由于公司项目要求使用超图在三维地图中的 添加热力图 , 但是在参照超图的案例生成的的热力图 的方向总是 朝着正北方的目前没办法在改变热力图的方向,
在网上搜索了一些解决方案 , 综合起来 算是满足要求了
效果如图所示
本文前端代码 由angular 实现代码
引用的js
html 热力图需要添加的代码 页面
<div class="heatmap" style="overflow: hidden; width: 840px;height: 400px">
<div class="heatmap-canvas" width="50%" height="25%" >
</div>
</div>
ts 创建 热力图代码
画多边形, 以多边形为边界 生成热力图, 以添加entity 的方式添加到三维地图
const heatMapInstance = this.createHeatMap(40);
this.polyLineHandler = new Cesium.DrawHandler(this.viewer, Cesium.DrawMode.Line);
this.polyLineHandler.drawEvt.addEventListener((result) => {
this.polyLineHandler.polyline.show = true;
pts = result.object ? result.object.positions : result;
position = [];
if (pts && pts instanceof Array) {
pts.forEach((point, index) => {
if (index < 4) {
position.push(point);
}
});
}
this.positionList = position;
this.viewer.entities.add({
id: 'box_1',
name: 's',
polygon: {
hierarchy: this.positionList,
material: heatMapInstance._renderer.canvas,
rotation: Cesium.Math.toRadians(0),
stRotation: Cesium.Math.toRadians(-25),
},
clampToS3M: true
});