html绘制热力图,arcgis for jsapi 4.10绘制热力图

arcgis for jsapi 从 3 变到 4 之后，变化巨大，原先网络上的许多例子，好像都过时了。比如echart与arcgis结合，都是for 3.x的,4时代就不行了。

热力图也一样。

现在俺给个例子，不依赖于arcgis服务器，直接渲染出来：

原理是绘制，绘制在FeatureLayer里。怎么绘制呢？原来热力图有个专门的渲染器：HeatmapRenderer，将样式赋给该渲染器，然后渲染器、点数据等参与FeatureLayer的构造，就可以了。

heatMap

html, body, #map {

height: 100%;

margin: 0;

padding: 0;

}

require(["esri/map",

"esri/views/MapView",

"esri/Basemap",

"esri/geometry/Extent",

"esri/layers/TileLayer",

"esri/layers/FeatureLayer",

"esri/renderers/HeatmapRenderer",

"dojo/domReady!"], function (Map,

MapView,

BaseMap,

Extent,

TileLayer,

FeatureLayer,

HeatmapRenderer) {

let map, view;

(function () {//加载底图等

map = new Map({

basemap: getBaseMap({

"title": "影像图",

"thumbnailUrl": "images/map/影像图.gif",

"type": "tile",

"layer": "http://192.168.0.206:6080/arcgis/rest/services/HNJCZS/HNJCZSYXT/MapServer"

}),

});

view = new MapView({

container: "map",

map: map,

extent: new Extent({

"xmin": 105,

"ymin": 18,

"xmax": 115,

"ymax": 20,

"spatialReference": { "wkid": 4326 }

}),

});

view.ui._removeComponents(["attribution"]);

})();

function getBaseMap(basemapcof) {

let baselayer = new TileLayer({

url: basemapcof.layer,

});

return new BaseMap({

baseLayers: baselayer,

title: basemapcof.title,

thumbnailUrl: "../" + basemapcof.thumbnailUrl,

});

}

var heatmapRenderer = new HeatmapRenderer({//设置渲染器

colorStops: [{ ratio: 0.4, color: "rgba(0, 255, 0, 0)" },

{ ratio: 0.75, color: "rgba(255, 140, 0, 1)" },

{ ratio: 0.9, color: "rgba(255, 0, 0, 1)" }],

blurRadius: 8,

maxPixelIntensity: 230,

minPixelIntensity: 10

});

var heatDataUrl = "data/heatJson.json";

$.getJSON(heatDataUrl,{},function(data,textStatus,jqXHR){//读取数据，设置点数据集

var features = [];

for (var i = 0; i < data.heatData.length; i++) {

var x = data.heatData[i].lng;

var y = data.heatData[i].lat;

features.push({

geometry: {

type: "point",

x: x,

y: y

},

attributes: {

ObjectID: i,//重要！！！

}

});

}

var featureLayer = new FeatureLayer({

source: features,//点数据集

title: "热力图",

objectIdField: "ObjectID",//重要！！！

renderer: heatmapRenderer//渲染器

});

map.add(featureLayer);

});

});

热力图有个专有的名词：HeatMap，可以用这个单词去搜。

arcgis for jsapi官网上有两个例子，一个似乎是直接展示图层，一个是依赖于CSVLayer，好像挺复杂。