arcgis for jsapi 从 3 变到 4 之后,变化巨大,原先网络上的许多例子,好像都过时了。比如echart与arcgis结合,都是for 3.x的,4时代就不行了。
热力图也一样。
现在俺给个例子,不依赖于arcgis服务器,直接渲染出来:
原理是绘制,绘制在FeatureLayer里。怎么绘制呢?原来热力图有个专门的渲染器:HeatmapRenderer,将样式赋给该渲染器,然后渲染器、点数据等参与FeatureLayer的构造,就可以了。
heatMaphtml, 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,好像挺复杂。