ArcGIS Js Api 3.x 热力图在数据量达到三万左右的时候，绘制速度不尽人意，数据量再大些，缩放时候就会很卡，非常影响客户体验。
参考了一下网上webgl热力图，能达到更流畅的绘制的要求。(参考webgl-heatmap和heatmap-layer-js)webgl热力图使用很简单，只需要把屏幕坐标和权重设置到好就行，如下示例
heatmap.addPoints([{x:x, y:y, size:size, intensity:intensity}]);
复制代码依靠这个插件进行下热力图扩展，热力图插件和地图绑定首先要将地图坐标点转换出屏幕坐标就好了，设置好事件去联动请求数据。
var dataPoint = new Point(geo.x, geo.y, map.spatialReference);
screenGeometry = map.toScreen(dataPoint);
复制代码绑定好数据还要做的就是将热力图的画布元素放入合适位置(整好叠在地图上，尺寸一致)，不影响地图本身操作。
var canvas = document.getElementsByTagName('canvas')[0];
var heatmap = createWebGLHeatmap({
canvas: canvas,
intensityToAlpha: true
});
var reforeNode = document.getElementById("map_gc");
document.getElementById("map_layers").insertBefore(heatmap.canvas, reforeNode);
复制代码附完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"/>
<!--The viewport meta tag is used to improve the presentation and behavior
of the samples on iOS devices-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heatmap.js ArcGIS JavaScript API Heatmap Layer</title>
<link rel="shortcut icon"
type="image/png" href="http://www.patrick-wied.at/img/favicon.png"/>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<style>
body, html {
margin: 0;
padding: 0;
width: 99.9%;
height: 99.9%;
font-family: Arial;
}
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0px dashed black;
background-color: rgb(0, 38, 48);
}
</style>
</head>
<body>
<div id="map">
</div>
</body>
<script src="https://js.arcgis.com/3.24/"></script>
<script type="text/javascript" src="heatmap/webgl-heatmap.js"></script>
<script type="text/javascript">
var map;
require([
"esri/map",
"dojo/on",
"dojo/dom",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/geometry/screenUtils",
"esri/geometry/Extent",
"esri/geometry/Point",
"dojo/domReady!"
], function (
Map,
on,
dom,
ArcGISTiledMapServiceLayer,
Query,
QueryTask,
screenUtils,
Extent,
Point
) {
// Variables
var valueField = 'Focal'
// get the features within the current extent from the feature layer
function getFeatures() {
var q = new Query();
var url = 'http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Earthquakes_Since_1970/FeatureServer/0'
var queryTask = new QueryTask(url);
q.geometry = map.extent;
q.where = "1=1";
q.outFields = [valueField ]
q.orderByFields = [valueField ];
q.returnGeometry = true
q.geometryPrecision = 10;
q.outSpatialReference = map.spatialReference;
queryTask.execute(q, function (re) {
console.log(re.features.length)
if (re.features.length) {
console.time('end')
console.log(re.features)
setdata(re.features);
console.timeEnd('end')
}
});
}
var mapExtent = new Extent({
xmax:22189975.059293926,
xmin: -15302081.56646192,
ymax: 8961447.604325403,
ymin: -9569334.036901515,
spatialReference: {wkid: 102100}
})
map = new Map("map", {
basemap: "gray",
extent: mapExtent,
sliderStyle: "small",
logo: false
});
map.resize();
var canvas = document.createElement('canvas');
canvas.id = "heatLayer";
canvas.style.zIndex = 99
canvas.style.position = "absolute";
canvas.style.width="100%"
canvas.style.height="100%"
var heatmap = createWebGLHeatmap({
canvas: canvas,
//gradientTexture: 'heatmap-gradient2.png',
intensityToAlpha: true
});
var reforeNode = document.getElementById("map_gc");
document.getElementById("map_layers").insertBefore(heatmap.canvas, reforeNode);
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var update = function () {
//heatmap.addPoint(100, 100, 100, 10/255);
heatmap.adjustSize(); // can be commented out for statically sized heatmaps, resize clears the map
heatmap.update(); // adds the buffered points
heatmap.display(); // adds the buffered points
raf(update);
}
raf(update);
//getFeatures()
getFeatures()
map.on('zoom-end', function (e) {
getFeatures()
});
map.on('zoom-start', function (e) {
heatmap.clear();
});
map.on('pan-start', function (e) {
heatmap.clear();
});
map.on('pan-end', getFeatures);
map.on('dragstart', function (e) {
heatmap.clear();
});
map.on('dragend', getFeatures);
map.on('mousewheel', function (e) {
heatmap.clear();
getFeatures()
})
function setdata(features) {
var i, da, m, dataPoint, heatmapdata, attributes, screenGeometry
heatmapdata = []
da = []
for (i = 0; i < features.length; i++) {
da.push();
}
m = features[features.length - 1].attributes[valueField ]
for (i = 0; i < features.length; i++) {
var geo = features[i].geometry.normalize();
dataPoint = new Point(geo.x, geo.y, map.spatialReference);
attributes = features[i].attributes;
var va = attributes[valueField ]
//var normalizedExtent = map.extent._normalize();
screenGeometry = map.toScreen(dataPoint);
//screenUtils.toScreenGeometry(normalizedExtent, map.width, map.height, dataPoint);
if (attributes && attributes.hasOwnProperty(valueField )) {
heatmapdata.push({
x: screenGeometry.x,
y: screenGeometry.y,
size: 30,
intensity: va / m
});
} else {
heatmapdata.push({
x: screenGeometry.x,
y: screenGeometry.y,
size: 30,
intensity: 0
});
}
}
heatmap.clear();
heatmap.addPoints(heatmapdata);
}
});
</script>
</html>
复制代码小贴士:开启大数据量绘制需要修改webgl-heatmap.js中的this.maxPointCount值(默认是10240),这样就可以为所欲为了。。。