WebGL点数据的热力图实现

关于WebGL实现热力图的示例,官网已经给出,可如果将自己的点坐标做成热力图,该怎么做呢。因此,此篇博客给大家讲讲如何将自己的数据制作成热力图

思路
热力图的实现,是将绘制成热力图效果的canvas叠加到S3M图层上显示,因此我们需要做的工作就是将点坐标等比例投影到canvas上,再将canvas叠加到场景中正确的范围。本文的坐标数据是使用的SQL查询示例中的
在这里插入图片描述

一、引入js文件

引入热力图js文件heatmap.min.js,由于本文还使用了SQL查询示例,因此还需要引入SuperMap.Include.js文件

<script src="./js/supermap/SuperMap.Include.js"></script>
<script src="./js/heatmap.min.js"></script>

二、添加标签

先添加一个热力图标签,设置好宽度和高度的值,这两个参数值在后面会使用到

<div class="heatmap" style="overflow: hidden; width: 800px;height: 400px;">
    <div class="heatmap-canvas" width="50%" height="25%" >
    </div>
</div>

三、canvas绘制

在SQL中的onQueryComplete()拿到查询中的坐标值,并计算出最大最小的经度纬度值(所有坐标的范围)和经度纬度最大最小的插值。通过计算每个点在坐标范围的位置,等比例算点落在canvas中的坐标(此坐标只支持正整数,且数值不能大于canvas的宽度和高度)。Value数值代表此坐标的权重,值却大,影响范围越大

				var xmin = 116.444464551956 //左,最小的经度值
				var ymax = 39.9225146059847 //上,最大的纬度值
				var xmax = 116.471757505707 //右,最大的经度值
				var ymin = 39.9028846469855 //下,最小的纬度值

                var h =xmax-xmin  //宽度
                var s =  ymax-ymin //高度
                
                var x = (parseFloat(selectedFeatures[i].fieldValues["12"])-xmin)/h*800
                var y = (ymax-parseFloat(selectedFeatures[i].fieldValues["13"]))/s*400
             var point = {
                x : Math.floor(x),
                y : Math.floor(y),
                value : 1  //权重值
            };
			createHeatMap(points)
			function createHeatMap(points) {
					var heatmapInstance = h337.create({
						container: document.querySelector('.heatmap')
					});

					var data = {
						max: 1,
						data: points
					}
					console.log(points)

					heatmapInstance.setData(data);
				}



四、叠加到S3M图层

将上一步拿到的坐标的范围值构造成一个Rectangle对象,拿到构造的canvas投影到S3M图层上

 					var buildingLayer = scene.layers.find("Building@CBD");
					if (IDs.length > 0) {
						buildingLayer.setSelection(IDs);
					}

					var mycanvas = document.getElementsByClassName("heatmap-canvas");
					var imgData = mycanvas[1].toDataURL("image/png");
					var img = new Image();
					img.src = imgData;
					img.onload = function() {

						buildingLayer.addOverlayImage({
							bounds: Cesium.Rectangle.fromDegrees(xmin, ymin, xmax, ymax),
							name: 'heat-map' + Date.now(),
							image: img
						});


					}

结言
完整代码可从以下链接获取,若绘制出来的热力图是黑色的,可以查看第三部分,传入的坐标是否符合条件
链接:https://pan.baidu.com/s/1j7uXir95bVhUQUJn4T-adg
提取码:eyp2

发布了712 篇原创文章 · 获赞 357 · 访问量 199万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览