热力图(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即为加载的地图对象,最后的渲染结果如图所示