arcgis api for js4.x 热力图渲染（vue，支持 点、线、面三种类型）

1、相关全局参数的配置

//热力图图层
    HeatMapLayers: [
        { name: '点图层', id: 'heatlayer01', type: 'point', url: 'http://-----------' },
        { name: '线图层', id: 'heatlayer02', type: 'polyline', url: 'http://-----------' },
        { name: '面图层', id: 'heatlayer03', type: 'polygon', url: 'http://---------' }
    ],
    //热力图渲染
    heatmapRenderer: {
        type: "heatmap",
        colorStops: [
            { ratio: 0, color: "rgba(0, 255, 150, 0)" },
            { ratio: 0.6, color: "rgb(250, 250, 0)" },
            { ratio: 0.85, color: "rgb(250, 150, 0)" },
            { ratio: 0.95, color: "rgb(255, 50, 0)" }
        ],
        blurRadius: 10,
        maxPixelIntensity: 10,
        minPixelIntensity: 0
    }

2、方法--（思路：线、面类型图层，需要先读取整个图层的要素，根据每个feature生产一个point，然后组成一个新的featurelayer图层）

//selectLayer={ name: '面图层', id: 'heatlayer03', type: 'polygon', url: 'http://---------' }

/* 切换热力图-----本功能使用了select进行显示不同的热力图，所以需要先将之前加载的热力图的删除掉 */
    _selectChange() {
      const self = this
      //1、清除已加载的热力图图层
      if (self.addLayerIDs.length > 0) {
        self.addLayerIDs.forEach(id => {
          MapManager.removeLayer(self.mapView, id)
        })
        self.addLayerIDs = []
      }
      //2、加载热力图
      if (self.selectLayer.type == "point") {//点图层，直接渲染热力图
        let featurelayer = new self.FeatureLayer({
          url: self.selectLayer.url,
          renderer: self.heatmapRenderer,
          id: self.selectLayer.id
        })
        self.mapView.map.add(featurelayer)
        self.addLayerIDs.push(featurelayer.id)//记录id
      } else {//线、面图层，先转点再渲染
        self._queryFeatureToPointLayer(self.selectLayer.url).then(featurelayer => {
          self.mapView.map.add(featurelayer)
          self.addLayerIDs.push(featurelayer.id)//记录id
        })
      }
    },

/* 读取图层数据--新建点图层 */
    _queryFeatureToPointLayer(url) {
      const self = this

      return new PolyfillPromise((resolve, reject) => {
        const query = new self.Query();
        const queryTask = new self.QueryTask({ url: url });
        query.returnGeometry = true;
        query.outFields = ['*'];
        query.where = '1=1';
        queryTask.execute(query).then(res => {
          let symbol = {
            type: 'simple-marker',
            style: 'circle',
            color: [250, 20, 20],
            size: 2,
            outline: {
              color: [0, 0, 0],
              width: 1
            }
          }
          //获取点要素
          let graphics = []
          res.features.forEach(feature => {
            let point = null
            if (feature.geometry.type == "polyline") {
              point = feature.geometry.getPoint(0, Math.ceil(feature.geometry.paths.length / 2));
            } else if (feature.geometry.type == "polygon") {
              point = feature.geometry.centroid;
            }

            let graphic = new self.Graphic({ geometry: point, attributes: feature.attributes, symbol: symbol })
            graphics.push(graphic)
          })
          //新建点图层
          var renderer = self.heatmapRenderer
          var featureLayer = new self.FeatureLayer({
            source: graphics,
            fields: res.fields,
            renderer: renderer,
            id: 'heatlayerChange'
          });

          resolve(featureLayer)
        })
      })
    },