天地图热力图_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速度更快，同时使用过程不存在地图卡顿，性能提升显著

附完整代码

heatmap.js ArcGIS JavaScript API Heatmap Layer

小贴士:开启大数据量绘制需要修改webgl-heatmap.js中的this.maxPointCount值(默认是10240),这样就可以为所欲为了。。。

天地图热力图_arcgis js 3.x使用webgl绘制热力图相关推荐

python热力图颜色设置_【Python】绘制热力图seaborn.heatmap，cmap设置颜色的参数
1. 参数详解 seaborn.heatmap seaborn.heatmap(data, vmin=None, vmax=None, cmap=None, center=None, robust=F ...
pheatmap绘制热力图
文章目录 pheatmap绘制热力图 (1)坐标轴顺序 (2)调色板函数 ①colorRamp {grDevices}函数 ②brewer.pal{GiNA} (3)可视化辅助 ①数据转换,如log1 ...
如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟
本节课主要讲解如何用webgl(three.js)搭建一个建筑模型,客流量热力图模拟使用技术说明: 这里主要用到了three.js,echart.js以及一些其它的js 与css技术,利用webso ...
heatmap.js调用百度地图api做热力图
做热力图使用heatmap.js模块然后就是来挑用百度地图api是他展现在百度地图上面一首先你要申请一个百度地图api接口的密钥申请网址申请密钥之后,先登录上自己的账号然后创建应用三就是来取一 ...
6个网页背景特效源码 canvas+three.js科技贴图 webgl源码
隧道穿梭特效粒子矩阵特效几何随机变换特效下载地址: 6个网页背景特效源码 canvas+three.js科技贴图 webgl源码-素材美
Leaflet绘制热力图【转】
http://blog.csdn.net/giser_whu/article/details/51485871 时下用的最多的开源二维webgis引擎应该是openlayers与leaflet了,le ...
利用javascript和WebGL绘制地球【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
qcustomplot绘制热力图瀑布图_使用REmap绘制中国地图
上次我们介绍了使用ggplot2绘制中国热力地图,需要温习的同学可以点击以下链接使用ggplot2绘制中国地图 .在使用ggplot2绘制的时候,需要进行数据处理的步骤比较多,今天我们介绍一个新的 ...
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
说明 [跟月影学可视化]学习笔记. 如何用 WebGL 绘制三维立方体我们知道立方体有8个顶点,6个面,在 WebGL 中,需要用 12 个三角形来绘制它.把每个面的顶点分开,需要 24 个顶点. ...

天地图热力图_arcgis js 3.x使用webgl绘制热力图

天地图热力图_arcgis js 3.x使用webgl绘制热力图相关推荐

最新文章

热门文章

天地图 热力图_arcgis js 3.x使用webgl绘制热力图

天地图 热力图_arcgis js 3.x使用webgl绘制热力图相关推荐

最新文章

热门文章

天地图热力图_arcgis js 3.x使用webgl绘制热力图

天地图热力图_arcgis js 3.x使用webgl绘制热力图相关推荐