欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js2+ArcGIS3四、热力图

程序员文章站 2022-07-09 19:23:51
PreviewOnline Demo封装空间测量方法带删除当前点击的标注功能。measure.jsexport default { measure(map, gisConstructor, options) { options.map = map // eslint-disable-next-line no-undef dojo.declare('measureLayer', gisConstructor.GraphicsLayer, {...

Preview

Vue.js2+ArcGIS3四、热力图

添加热力图

<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>

本文地址:https://blog.csdn.net/qq_37236395/article/details/107211259