cesium/超图 生成 多边形自定义方向热力图

由于公司项目要求使用超图在三维地图中的 添加热力图 , 但是在参照超图的案例生成的的热力图 的方向总是 朝着正北方的目前没办法在改变热力图的方向,

 在网上搜索了一些解决方案 , 综合起来 算是满足要求了

效果如图所示

 

 

 

本文前端代码 由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
  });