esri loader + arcgis api 图层控制 + 筛选

留言
功能 ID
筛选 #option-choose
清除筛选 #option-clean
显示隐藏控制 #option-visible

筛选函数中的layerDefinitoin控制筛选条件

js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// 我们需要在该组件装载之后做的事情都放在该方法里
  mounted() {
    esriLoader.setDefaultOptions({ version: '3.28' })
    this.createMap()
  },
  // 我们需要执行的方法都定义在该属性里
  methods: {
    createMap: function() {
      esriLoader.loadModules(['esri/map',
        'esri/geometry/Extent',
        'esri/layers/ArcGISDynamicMapServiceLayer',
        'dojo/query',
        'esri/toolbars/navigation',
        'esri/geometry/Point',
        'dojo/domReady!'], { css: true })
        .then(([Map, Extent, ArcGISDynamicMapServiceLayer, query, Navigation, Point]) => {
          var tjUAVurl = 'http://localhost:6080/arcgis/rest/services/Eco/BJ_td_gd_nyd/MapServer'

          var map = new Map('map', {
            extent: new Extent({
              xmin: 114.4134760856628,
              ymin: 40.13100080490112,
              xmax: 118.36547288894677,
              ymax: 41.64383821487438,
              spatialReference: {
                wkid: 4326
              }
            }),
            logo: false
          })

          var tjUAVLayer = new ArcGISDynamicMapServiceLayer(tjUAVurl)
          var tjUAVLayerLD = new ArcGISDynamicMapServiceLayer(tjUAVurl)// 筛选
          map.addLayer(tjUAVLayer)
          // *************************************************************************************** //

          var that = this
          
          // 筛选
          function btnLayerDefinitions() {
            map.removeLayer(tjUAVLayer)
            var layerDefinitoin = []
            layerDefinitoin[0] = 'payMon_suz > 20'
            tjUAVLayerLD.setLayerDefinitions(layerDefinitoin)
            map.addLayer(tjUAVLayerLD)
            that.opensuccess()
          }
          // 清除筛选
          function optinClean() {
            map.removeLayer(tjUAVLayerLD)
            map.addLayer(tjUAVLayer)
            that.opensuccess()
          }

          function btnVisible() {
            if (that.options_power[2].label === '隐藏') {
              // 打开所有显示
              var visible = []
              for (var i = 0; i < tjUAVLayer.layerInfos.length; i++) {
                visible.push(i)
              }
              tjUAVLayer.setVisibleLayers(visible)
              that.options_power[2].label = '显示'
            } else {
              // 关闭所有显示
              visible = [-1]
              tjUAVLayer.setVisibleLayers(visible)
              that.options_power[2].label = '隐藏'
            }
            that.opensuccess()
          }
          // *************************************************************************************** //

          query('#option-choose').on('click', btnLayerDefinitions)
          query('#option-clean').on('click', optinClean)
          query('#option-visible').on('click', btnVisible)
        })
    }
  }

文章目录

  1. js部分