『Cesium 基础』热力图（heatmap.js）

关注公众号"seeling_GIS"， 领取学习视频资料

实现原理

通过 heatmap.js 生成热力图，然后通过图片的方式贴到 cesium 中

实现效果

heatmap.png

开发背景

• 使用 vue 前端框架

库文件引入

const h337 = require('heatmap.js');

新加一个 div 容器

<div class="heatmap" v-show="false"></div>

创建热力图

var heatmapInstance = h337.create({
    container: this.$el,
});
var data = {
    max: max,
    data: points,
};
heatmapInstance.setData(data);

添加热力图到地球上

var canvas = document.getElementsByClassName('heatmap-canvas');
console.log(canvas);
this.heatmapLayer = this.viewer.entities.add({
    name: 'heatmap',
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(lonMin, latMin, lonMax, latMax),
        material: new Cesium.ImageMaterialProperty({
            image: canvas[0],
            transparent: true,
        }),
    },
});

this.viewer.zoomTo(viewer.entities);

---

更多内容，欢迎关注公众号

seeling_GIS