关于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
网友评论