空间查询、属性查询

效果图

空间查询：框选

查询结果：

属性查询：

源码

<template>
  <div id="home">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item>Query</el-breadcrumb-item>
      <el-breadcrumb-item>QueryTask</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="15">
        <div class="grid-content bg-purple">
          <div id="mapDiv" class="MapClass"></div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="grid-content bg-purple">
          <el-row>
            <el-button type="primary" icon="el-icon-add-location" circle plain id="draw-point"></el-button>
            <el-button type="primary" icon="el-icon-edit" circle plain id="draw-line"></el-button>
            <el-button type="primary" icon="el-icon-edit-outline" circle plain id="draw-polygon"></el-button>
            <el-button type="warning" icon="el-icon-close" circle plain id="draw-dischoose"></el-button>
          </el-row>
          <div class="demo-input-suffix">
            <el-input
              placeholder="属性查询" prefix-icon="el-icon-search" clearable v-model="selecttext" id="select">
            </el-input>
          </div>

          <el-table :data="tableData" stripe style="width: 100%">
            <template v-for="(item, index) in columnData">
              <el-table-column :label="item.label" :prop="item.prop" :key="index"></el-table-column>
            </template>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as esriLoader from 'esri-loader'
import $ from 'jquery'

export default {
  data() {
    return {
      lendgeVisible: true,
      selecttext: '"地址" LIKE \'%大学\'',
      columnData: [],
      tableData: []
    }
  },
  mounted() {
    esriLoader.setDefaultOptions({
      version: '3.28'
    })
    const that = this

    this.createMap(that)
  },
  methods: {
    createMap: function (that) {
      esriLoader.loadModules(['esri/map', 'esri/layers/ArcGISDynamicMapServiceLayer', 'dojo/dom',
        'dojo/on', 'esri/tasks/QueryTask', 'esri/tasks/query', 'dojo/query', 'esri/Color',
        'esri/toolbars/draw', 'esri/symbols/SimpleMarkerSymbol',
        'esri/symbols/SimpleLineSymbol', 'esri/symbols/SimpleFillSymbol',
        'esri/graphic', 'dojo/domReady!'], {
        css: true
      })
        .then(([Map, ArcGISDynamicMapServiceLayer, dom, on, QueryTask, Query, query, Color, Draw, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Graphic]) => {
          const filts = ['城市名', '监测点', '地址', '纬度', '经度', 'AQI']
          var queryTask = new QueryTask('http://localhost:6080/arcgis/rest/services/Basic/China_POI/MapServer/0')
          const lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3)
          const markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, lineSymbol, new Color([215, 224, 203]))
          const fillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol)

          var map = new Map('mapDiv', {
            center: [108.934518, 34.35333],
            zoom: 5,
            logo: false,
            basemap: 'oceans'
          })
          var layer = new ArcGISDynamicMapServiceLayer('http://localhost:6080/arcgis/rest/services/Basic/China_POI/MapServer')
          map.addLayer(layer)

          on(dom.byId('select'), 'keypress', () => {
            map.graphics.clear()
            var query = new Query()
            query.where = $('#select').val()
            queryTask.execute(setQuery(query), showQueryResult)
          })

          // 空间查询
          var toolbar = new Draw(map)
          $('#draw-point').click((event) => {
            map.graphics.clear()
            toolbar.activate(Draw.POINT, {
              showTooltips: true
            })
          })
          $('#draw-line').click((event) => {
            map.graphics.clear()
            toolbar.activate(Draw.POLYLINE, {
              showTooltips: true
            })
          })
          $('#draw-polygon').click((event) => {
            map.graphics.clear()
            toolbar.activate(Draw.POLYGON, {
              showTooltips: true
            })
          })
          $('#draw-dischoose').click((event) => {
            toolbar.deactivate()
            map.graphics.clear()
            that.columnData = ''
          })
          // 绘图事件
          on(toolbar, 'draw-complete', (result) => {
            toolbar.deactivate()
            var query = new Query()
            query.geometry = result.geometry
            queryTask.execute(setQuery(query), showQueryResult)
          })

          // 设置筛选公共参数
          function setQuery(query) {
            query.returnGeometry = true
            query.outFields = filts
            return query
          }

          // 显示
          function showQueryResult(queryResult) {
            // console.log(queryResult)
            setgraphic(queryResult)
            setTable(queryResult)
          }

          function setSym(type) {
            switch (type) {
              case 'esriGeometryPoint':
                return markerSymbol
              case 'esriGeometryLine':
                return lineSymbol
              case 'esriGeometryPolygon':
                return fillSymbol
            }
          }

          function setgraphic(queryResult) {
            for (let i = 0; i < queryResult.features.length; i++) {
              var graphic = queryResult.features[i]
              graphic.setSymbol(setSym(queryResult.geometryType))
              map.graphics.add(graphic)
            }
          }

          function setTable(queryResult) {
            var coldata = []
            var filed = queryResult.fieldAliases
            for (var item in filed) {
              var col = { prop: '', label: '' }
              col.prop = item
              col.label = filed[item]
              coldata.push(col)
            }
            that.columnData = coldata

            var data = []
            for (let i = 0; i < queryResult.features.length; i++) {
              data[i] = queryResult.features[i].attributes
            }
            that.tableData = data
          }
        })
    }
  }
}
</script>

<style scoped lang="less">
  .MapClass {
    width: 100%;
    height: 830px;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

文章目录

1. 效果图
   1. 空间查询：框选
   2. 查询结果：
   3. 属性查询：

源码

原文链接: http://enofeng.github.io/2021/07/22/空间查询、属性查询/

版权声明: 转载请注明出处.