arcgis api（八）arcgis api for js 3.x 加载热力图图层

       热力图（Heat Map）是通过密度分析函数进行可视化用于表示地图中点的密度的热图，它使人们能够独立于缩放因子感知点的密度。热力图是一个城市各个区域人口密度的一种展示模式，可以显示某个地方人员比较集中甚至拥挤程度，颜色越深表示人员越多，颜色浅代表人比较少。现在互联网的百度地图、高德地图、腾讯地图都有热力图的api，应用最广泛的是echarts的热力图api。目前政务系统的离线地图用arcgis的比较多，同时arcgis的API为热力图也提供了相应的HeatmapRenderer的类。

      绘制热力图，数据结构需要包括经纬度的信息，点位的value值。首先我们需要将后台接口返回的数据处理成FeatureSet的参数所需要的数据结构

假设接口返回的数据为：

const heatMapPoints = [
    {
       lon: 121.21,
       lat: 31.53,
       value: 3
    },
    {
       lon: 121.23,
       lat: 31.43,
       value: 24
    }
    {
       lon: 122.21,
       lat: 31.53,
       value: 32
    }
]

    esriLoader
      .loadModules([
        'esri/layers/FeatureLayer',
        'esri/tasks/FeatureSet',
        'esri/renderers/HeatmapRenderer'
      ])
      .then(([
        FeatureLayer,
        FeatureSet,
        HeatmapRenderer
      ]) => {

              // 添加热力图
              const features = []
              const blurRadius = 2 // 缓冲区半径
              const maxPixelIntensity = 100 // 最大识别像素
              const minPixelIntensity = 0 // 最小识别像素
              const fieldName = 'VALUE' // 渲染的字段
              heatMapPoints.forEach((item, index) => {
                const attribute = {
                  FID: index.toString(),
                  LON: item.lon.toString(),
                  LAT: item.lat.toString(),
                  VALUE: item.value
                }
                const graphic = {
                  geometry: {
                    x: item.lon,
                    y: item.lat
                  },
                  attributes: attribute
                }
                features.push(graphic)
              })

              const fields = [
                {
                  name: 'FID',
                  type: 'esriFieldTypeOID',
                  alias: 'FID'
                },
                {
                  name: 'LON',
                  type: 'esriFieldTypeString',
                  alias: 'LON',
                  length: 100
                },
                {
                  name: 'LAT',
                  type: 'esriFieldTypeString',
                  alias: 'LAT',
                  length: 100
                },
                {
                  name: 'VALUE',
                  type: 'esriFieldTypeDouble',
                  alias: 'VALUE'
                }
              ]

              const option = {
                // 数据的基本属性
                displayFieldName: '',
                fieldAliases: {
                  FID: 'FID',
                  LON: 'LON',
                  LAT: 'LAT',
                  VALUE: 'VALUE'
                },
                geometryType: 'esriGeometryPoint',
                spatialReference: {
                  wkid: 4326,
                  latestWkid: 4326
                },
                // 所含有的字段信息
                fields: fields,
                // 所含有的集合要素集
                features: features
              }
              const featureSet = new FeatureSet(option)

              const layerDefinition = {
                geometryType: 'esriGeometryPoint',
                fields: fields
              }
              const featureCollection = {
                layerDefinition: layerDefinition,
                featureSet: featureSet
              }
              const heatmapFeatureLayerOptions = {
                id: 'gisHeatLayer',
                mode: FeatureLayer.MODE_SNAPSHOT,
                outFields: ['FID', 'VALUE']
                // infoTemplate: infoTemplate
              }

              const heatmapFeatureLayer = new FeatureLayer(featureCollection, heatmapFeatureLayerOptions)
              const heatmapRenderer = new HeatmapRenderer({
                field: fieldName,
                blurRadius: blurRadius,
                maxPixelIntensity: maxPixelIntensity,
                minPixelIntensity: minPixelIntensity
              })

              heatmapFeatureLayer.setRenderer(heatmapRenderer)
              mapView.addLayer(heatmapFeatureLayer)
            }
      })

mapView即为加载的地图对象，最后的渲染结果如图所示