WebGL点数据的热力图实现

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

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

一、引入js文件

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

二、添加标签

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

三、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