700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 天地图 热力图_arcgis js 3.x使用webgl绘制热力图

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

时间:2022-09-19 14:25:40

相关推荐

天地图 热力图_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),这样就可以为所欲为了。。。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。