# WebGL点数据的热力图实现

### 一、引入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绘制

				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图层

 					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;

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

}


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