效果图
因为底图是蓝色的 没有改颜色 可能看不太清
首先声明一个GraphicLayer的图层,图层是客户端类型图层,与ArcGIS Server发布的图层没有任何联系,利用发布的图层生成热力图可以参考这篇然后生命工具类 Draw,根据点选的不同进行绘画,然后将绘画的图形进行渲染即可
主要代码
var data=[
{ x: "116.88739", y: "37.07553"},
{ x: "116.91090", y: "36.69125"},
{ x: "116.84069", y: "37.05630"},
{ x: "116.79400", y: "36.95468"},
{ x: "116.76379", y: "36.78988"},
{ x: "116.89288", y: "36.76791"},
{ x: "116.95605", y: "36.79537"},
{ x: "117.30238", y: "36.72474"},
{ x: "117.30238", y: "36.72474"},
{ x: "117.30238", y: "36.72474"},
{ x: "117.14282", y: "36.95674"},
{ x: "117.14282", y: "36.95674"},
{ x: "116.99862", y: "36.95262"},
{ x: "117.08377", y: "36.96223"},
{ x: "116.94232", y: "36.63195"},
{ x: "116.81735", y: "37.02609"},
{ x: "116.97528", y: "36.64981"},
{ x: "117.04943", y: "37.04188"},
{ x: "117.08377", y: "36.96223"},
{ x: "117.14282", y: "36.95674"},
{ x: "117.08377", y: "36.96223"},
{ x: "117.12222", y: "37.03295"},
{ x: "117.12222", y: "37.03295"},
{ x: "117.12222", y: "37.03295"},
{ x: "117.17715", y: "37.29663"},
{ x: "116.69109", y: "36.79409"},
{ x: "117.12285", y: "36.67474"},
{ x: "117.12285", y: "36.67474"},
{ x: "116.86816", y: "36.80293"},
{ x: "116.93408", y: "36.78919"},
{ x: "117.00823", y: "36.78233"},
{ x: "117.07237", y: "36.68769"},
{ x: "117.12334", y: "36.67321"},
{ x: "117.06148", y: "36.65346"}
]
var showHeatMap=function(arr) {
var layerDefinition = {
"geometryType": "esriGeometryPoint",
"fields": [{
"name": "xxx", //字段名称xxx
"type": "esriFieldTypeInteger" //字段数据类型
} //可以在数组里添加多个字段
]
};
var featureCollection = {
"layerDefinition": layerDefinition,
"featureSet": {
"features": null,
"geometryType": "esriGeometryPoint" //FeatureLayer只能添加一种geometry,GraphicsLayer可以添加多种
}
};
var heatMapLayer = new FeatureLayer(featureCollection, {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"],
opacity: 1
});
heatMapLayer['id'] = "heatMap";
map.addLayer(heatMapLayer);
var heatmapRenderer = new HeatmapRenderer({
colorStops: [
{ ratio: 0, color: "rgba(0, 0, 255,0)" },
{ ratio: 0.5, color: "rgb(0, 0, 255)" },
{ ratio: 0.7, color: "rgb(255, 0, 255)" },
{ ratio: 0.9, color: "rgb(255, 0, 0)" }],
blurRadius: 8,
maxPixelIntensity: 100,
minPixelIntensity: 0,
});
for (let i = 0; i < arr.length; i++) {
var x = parseFloat(arr[i].x);
var y = parseFloat(arr[i].y);
var point = new Point(x, y, map.spatialReference);
let g = new Graphic(point, null, { xxx: i }, null);
heatMapLayer.add(g);
}
heatMapLayer.setRenderer(heatmapRenderer);
}
启动
showHeatMap(data);