本文主要是介绍arcgis js 3.x使用webgl绘制热力图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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);
写好了扩展，生成十万的随机数据进行测试，与自带的热力图进行一下对比。自带热力图: 435.635ms；webgl热力图扩展：126.260ms。说明webgl速度更快，同时使用过程不存在地图卡顿，性能提升显著
附完整代码
<!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 behaviorof 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) {// Variablesvar valueField = 'Focal'// get the features within the current extent from the feature layerfunction 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 = trueq.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 = 99canvas.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 mapheatmap.update(); // adds the buffered pointsheatmap.display(); // adds the buffered pointsraf(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, screenGeometryheatmapdata = []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),这样就可以为所欲为了。。。
这篇关于arcgis js 3.x使用webgl绘制热力图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
