Vue.js2+ArcGIS3四、热力图_esri-loader文档 多边形

Github

添加热力图

<template>
  <div id="map-container"
    style="width:100%;height:100%;">
    <div
      style="position:absolute;right:50px;top:50px;z-index:999;">
      <button
        @click="addHeatMap()">热力图</button>
      <button
        @click="clearHeatMap()">clear</button>
    </div>
  </div>
</template>
<script>
import { loadCss, loadModules } from 'esri-loader'
export default {
  name: 'HeatMap',
  data() {
    return {
      map: '',
      gisConstructor: {}, // gis 构造函数
      gisModules: [
        'esri/SpatialReference',
        'esri/graphic',
        'esri/geometry/Point',
        'esri/layers/FeatureLayer',
        'esri/renderers/HeatmapRenderer',
        'esri/geometry/Extent',
        'esri/map',
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    /**
     * @name: 清除热力图
     */
    clearHeatMap() {
      let layer = this.map.getLayer('热力图')
      this.map.removeLayer(layer)
    },

    /**
     * @name: 添加热力图
     * @param {data} Array
     * @param {type} String 权重值
     */
    // eslint-disable-next-line no-unused-vars
    addHeatMap(data, type) {
      let mockData = [
        { x: -13043465.062410325, y: 3857375.365345625, count: '10' },
        { x: -13041492.031617718, y: 3857031.398718342, count: '100' },
        { x: -13041042.964076541, y: 3855808.4062657813, count: '1000' },
        { x: -13044606.840520333, y: 3854317.8842142224, count: '100' },
        { x: -13043035.104126222, y: 3855120.4730112157, count: '10' },
      ]
      // let _type = type || 'ID'
      let _type = 'count'
      let layerDefinition = {
        geometryType: 'esriGeometryPoint',
        fields: [
          {
            name: _type,
            type: 'esriFieldTypeInteger',
            alias: _type,
          },
        ],
      }
      let featureCollection = {
        layerDefinition: layerDefinition,
        featureSet: null,
      }
      let heatMapLayer = new this.gisConstructor.FeatureLayer(
        featureCollection,
        {
          mode: this.gisConstructor.FeatureLayer.MODE_SNAPSHOT,
          outFields: ['*'],
          opacity: 1,
          id: '热力图',
        }
      )
      let heatmapRenderer = ''
      let colors = [
        'rgba(255, 0, 0, 0)',
        'rgb(0, 255, 0)',
        'rgb(255, 255, 0)',
        'rgb(255, 0, 0)',
      ]
      if (_type !== 'ID') {
        // 有权重值
        heatmapRenderer = new this.gisConstructor.HeatmapRenderer({
          field: _type,
          colors: colors,
          blurRadius: 10,
        })
      } else {
        // 无权重值
        heatmapRenderer = new this.gisConstructor.HeatmapRenderer({
          colors: colors,
          blurRadius: 50,
          maxPixelIntensity: 200,
          minPixelIntensity: 10,
        })
      }
      heatMapLayer.setRenderer(heatmapRenderer)
      this.map.addLayer(heatMapLayer, 9)
      for (let i = 0; i < mockData.length; i++) {
        let point = new this.gisConstructor.Point(
          mockData[i].x,
          mockData[i].y,
          new this.gisConstructor.SpatialReference(this.map.spatialReference)
        )
        let graphic = new this.gisConstructor.graphic(point)
        if (_type !== 'ID') {
          let count = Number(mockData[i].count)
          graphic.setAttributes({ count: count })
        }
        heatMapLayer.refresh()
        heatMapLayer.add(graphic)
      }
    },

    mapClickFun() {
      this.map.on('click', e => {
        console.log(e)
      })
    },

    /**
     * @name: 初始化地图
     */
    init() {
      // 加载 css
      loadCss('https://js.arcgis.com/3.32/esri/css/esri.css')
      // 加载模块
      loadModules(this.gisModules, {
        url: 'https://js.arcgis.com/3.32/',
      })
        .then(this.initMap)
        .then(this.mapClickFun)
    },
    initMap(args) {
      // 将 ArcGIS 的每个功能模块都存放到 gisConstructor 中
      for (let k in args) {
        let name = this.gisModules[k].split('/').pop()
        this.gisConstructor[name] = args[k]
      }
      this.map = new this.gisConstructor.map('map-container', {
        basemap: 'osm',
        logo: false,
        slider: true,
      })
      // 设置初始化范围
      let extent = {
        xmin: -117.1839455,
        ymin: 32.68087830000002,
        xmax: -117.15035189999998,
        ymax: 32.732100979999984,
      }
      /*
        如果坐标系是 4490，初始化范围需要设置空间参考坐标系
        // 'esri/SpatialReference',
        new this.gisConstructor.SpatialReference({
          wkid: 4490
        })
      */
      this.map.setExtent(
        new this.gisConstructor.Extent(
          extent.xmin,
          extent.ymin,
          extent.xmax,
          extent.ymax
        )
      )
    },
  },
}
</script>
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180