Cesium 热力图

• 核心地图上绘制一个区域出来用(热力图)图片贴上去。

1、热力图。

热力图可以是现成的图片，或者根据其他插件生成的图片比如echarts或者heatmap.js

2、在地图上画上需要显示热力图的区域，在矩形上贴上热力图。

const createPrimitive = (viewer: Cesium.Viewer)=> { //创建primitive对象
    let instance = new Cesium.GeometryInstance({ //创建几何实例
        geometry: new Cesium.RectangleGeometry({ //要实例化的几何
            rectangle: Cesium.Rectangle.fromDegrees(104.190804, 30.398852,104.203932, 30.407749), //需要贴图的区域矩形
            // rectangle: Cesium.Rectangle.fromDegrees(80.0, 10.0, 130.0, 60.0), //矩形
            vertexFormat: Cesium.VertexFormat.POSITION_AND_ST //顶点渲染方式
        })
    })
    let canvas = document.createElement('canvas', {})
    canvas.width = 1
    canvas.height = 1
    let mat = new Cesium.Material({ //定义材质
        fabric: {
            type: 'Image',
            uniforms: {
                image: canvas
            }
        }
    })
    let appearance = new Cesium.EllipsoidSurfaceAppearance({ //外观
        aboveGround: true, //true 几何体位于椭球体表面
        renderState: { //渲染状态
            cull: {
                enabled: false
            },
            depthTest: {
                enabled: false
            }
        },
        material: mat //材质
    })
    viewer.scene.groundPrimitives.add(
        new Cesium.GroundPrimitive({
            geometryInstances: instance,
            appearance: appearance,
            classificationType: Cesium.ClassificationType.TERRAIN,
            asynchronous: false
        })
    )
    return mat
}
let _mat = createPrimitive(viewer)
_mat.uniforms.image = '你的图片可以是base64可以是图片地址'