Cesium 三维热力图

原创

已于 2024-06-05 16:55:06 修改 · 4.6k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#3d #前端

于 2022-11-17 13:55:30 首次发布

要用cesium做个三维热力图的效果，但在网上没找到现成的方案，摸索了很久，最终效果如下：

三维热力图

实现思路如下：

1、通过heatmapjs库生成二维热力图，拿到canvas；

addHeatMap() {
        let width = 500
        let height = 500
        this.heatMap = h337.create(this.getDefaultData(width, height))
        let bounds = [113.5, 22, 114.5, 23]

        this.bounds = {
            west: 113.5,
            south: 22,
            east: 114.5,
            north: 23,
        }
        let data = [];
        let max = 0
        for (let i = 0; i < 200; i++) {
            let value = Math.floor(Math.random() * 100)
            max = Math.max(max, value)
            let x = Math.floor(Math.random() * width)
            let y = Math.floor(Math.random() * height)
            data.push({ x: x, y: y, value: value });
        }


        this.heatMap.setData({
            // min: 0,
            max: max,
            data: data
        })

        this.addcanvas(bounds, true)
    }

2、canvas的rgb像素值转hsl，将h分量作为该像素点的高度值的参考（即越红高度越高）；

先转灰度图

    // 图片转灰度图
    getGrayMap(img) {
        const canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0)
        const c = ctx.getImageData(0, 0,