Cesium 绘制更新网格数据

一、源码

import type { Viewer, Primitive, Material } from "cesium";

const cesiumUtils = {
    viewer: <Viewer | null>null,
    rainPrimitive: <Primitive | null>null,
    interValIndex: 0,
    playIndex: 1,//播放材质索引
    isPlayIng: false,
    isPauseIng: false,
    setStatus: (options: any): void => { },
    imgArr: <Array<string>>[],
    m4DataArr: <Array<Array<string>>>[],
    gridmaterial: new Cesium.Material({
        fabric: {
            type: Cesium.Material.GridType,
            uniforms: {
                color: new Cesium.Color(0.0, 1.0, 1.0, 1.0),
                cellAlpha: 0.1,
                lineCount: new Cesium.Cartesian2(8.0, 8.0),
                lineThickness: new Cesium.Cartesian2(1.0, 1.0),
                lineOffset: new Cesium.Cartesian2(0.0, 0.0),
            },
        },
    }),
    gradientColors: [
        "#FF0000", // 红色
        "#FF3333",
        "#FF6666",
        "#FF9999",
        "#FFCCCC",
        "#CCFFFF", // 淡蓝色
        "#99CCFF",
        "#6699FF",
        "#3366FF",
        "#0000FF", // 蓝色
    ],
    gradientColors2: [
        "rgba(0,0,255,0.1)",
        "rgba(0,0,255,0.21)",
        "rgba(0,0,255,0.3)",
        "rgba(0,0,255,0.3)",
        "rgba(0,255,255,0.9)",
        "rgba(0,255,255,1)",
        "rgba(0,255,255,1)",
        "rgba(0,255,255,1)",
        "rgba(0,255,255,0.1)",
        "rgba(0,0,255,0.1)",
    ],
    drawMesh(dataArr: Array<string>) {
        const baseInfo = dataArr[0].split(" ");
        const width = Number(baseInfo[16]) - 1;
        const height = Number(baseInfo[17]) - 1;
        let startLon = Number(baseInfo[12]);
        let endLon = Number(baseInfo[13]);
        let startLat = Number(baseInfo[14]);
        let endLat = Number(baseInfo[15]);
        let isNumber = 2;
        const canvas = document.createElement("canvas");
        canvas.width = width * isNumber;
        canvas.height = height * isNumber;

        let ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
        this.imgArr = []
        for (let i = 0; i < width; i++) {
            for (let j = 0; j < height; j++) {
                const startX = i * isNumber;
                const startY = j * isNumber;

                let color = "rgba(128,128,128,0.3)"
                if (Math.random() < 0.95) {
                    color = "rgba(128,128,128,0.3)"
                } else {
                    color = "rgba(128,128,128,1)"
                }
                // this.gradientColors[Number((Math.sin(index)).toFixed(0))];
                ctx.fillStyle = color;
                ctx.fillRect(startX, startY, isNumber, isNumber);
            }
        }
        let img = canvas.toDataURL("image/png");
        this.imgArr.push(img)
        let instance = new Cesium.GeometryInstance({
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(
                    startLon,
                    startLat,
                    endLon,
                    endLat
                ),
                vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
            }),
        });

        let rectangleAppearance = new Cesium.EllipsoidSurfaceAppearance({
            material: Cesium.Material.fromType("Image", {
                image: img,
            }),
        });
        let viewer = this.viewer as Viewer
        this.rainPrimitive = viewer.scene.primitives.add(
            new Cesium.GroundPrimitive({
                geometryInstances: instance,
                appearance: rectangleAppearance,
            })
        );


    },
    setMateiral(dataArr: Array<string>) {
        const baseInfo = dataArr[0].split(" ");
        const width = Number(baseInfo[16]) - 1;
        const height = Number(baseInfo[17]) - 1;
        let isNumber = 2;
        const canvas = document.createElement("canvas");
        canvas.width = width * isNumber;
        canvas.height = height * isNumber;
        let ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

        for (let i = 0; i < width; i++) {
            for (let j = 0; j < height; j++) {
                const startX = i * isNumber;
                const startY = j * isNumber;

                let color = "rgba(128,128,128,0.3)"
                if (Math.random() < 0.95) {
                    color = "rgba(128,128,128,0.3)"
                } else {
                    color = "rgba(128,128,128,1)"
                }
                // this.gradientColors[Number((Math.sin(index)).toFixed(0))];
                ctx.fillStyle = color;
                ctx.fillRect(startX, startY, isNumber, isNumber);
            }
        }
        let img = canvas.toDataURL("image/png");
        this.imgArr.push(img);
    },
    setPrimitive(dataArr: Array<string>, firstFrame: string) {
        const baseInfo = dataArr[0].split(" ");
        let startLon = Number(baseInfo[12]);
        let endLon = Number(baseInfo[13]);
        let startLat = Number(baseInfo[14]);
        let endLat = Number(baseInfo[15]);

        let instance = new Cesium.GeometryInstance({
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(
                    startLon,
                    startLat,
                    endLon,
                    endLat
                ),
                vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
            }),
        });

        let rectangleAppearance = new Cesium.MaterialAppearance({
            material: new Cesium.Material({
                fabric: {
                    type: 'Image',
                    uniforms: {
                        image: firstFrame
                    }
                }
            }),
        }

        )
        let viewer = this.viewer as Viewer
        this.rainPrimitive = viewer.scene.primitives.add(
            new Cesium.GroundPrimitive({
                geometryInstances: instance,
                appearance: rectangleAppearance,
            })
        );
    },
    updateMaterial(material: any) {
        let primitive = this.rainPrimitive as Primitive
        primitive.appearance.material.uniforms['image'] = material
    },
    startPlay(setStatus: (options: any) => void) {
        let that = this;
        this.isPlayIng = true
        console.log(that.imgArr.length);
        if (this.imgArr.length > 0 && this.rainPrimitive != null) {
            this.interValIndex = setInterval(() => {
                const material = that.imgArr[that.playIndex];
                that.updateMaterial(material)
                that.playIndex = that.playIndex + 1
                console.log(that.playIndex);
                let options = {
                    step: that.playIndex / that.imgArr.length,
                    isPlayIng: this.isPlayIng,
                    isPauseIng: this.isPauseIng
                }
                setStatus(options)
                this.setStatus = setStatus
                if (that.playIndex == that.imgArr.length) {
                    clearInterval(this.interValIndex)
                }
            }, 3000)
        }
    },
    pauseOrPlay() {
        if (this.isPlayIng &&this.playIndex!=this.imgArr.length) {
            
            if (!this.isPauseIng) {
                clearInterval(this.interValIndex)
                this.isPauseIng = true;
                let options = {
                    step: this.playIndex / this.imgArr.length,
                    isPlayIng: this.isPlayIng,
                    isPauseIng: this.isPauseIng
                }
                this.setStatus(options)
            } else {
                this.isPauseIng = false
                this.startPlay(this.setStatus)
            }

        }

    },
    async setM4Data(urlArr: Array<string>) {
        this.m4DataArr = [];
        for (let i = 0; i < urlArr.length; i++) {
            const element = urlArr[i];
            let m4Data = await getM4Data(element);
            this.m4DataArr.push(m4Data)
        }
    },
    async initBaseData(urlArrr: Array<string>, viewer: Viewer) {
        this.viewer = viewer
        await this.setM4Data(urlArrr)
        this.m4DataArr.forEach(x => {
            this.setMateiral(x)
        })

        this.setPrimitive(this.m4DataArr[0], this.imgArr[0])


        return true;
    },

    restorePlay() {
        clearInterval(this.interValIndex);
        this.playIndex = 1
        this.isPlayIng = false;
        this.isPauseIng = false

        if (this.rainPrimitive != null) {
            this.viewer?.scene.primitives.remove(this.rainPrimitive)
            this.rainPrimitive = null
        }
        this.setStatus({
            isPauseIng: false,
            isPlayIng: false,
            step: 0
        })
    }
};




//获取最大值
function geRenderData(dataArr: any) {
    let maxValue = 0;

    let renderData = []
    for (let i = 1; i < dataArr.length; i++) {
        const element = dataArr[i];
        const tmpArr = element.trim().split("      ")
        let rowArr = []
        for (let j = 0; j < tmpArr.length; j++) {
            const res = Number(tmpArr[j]);
            if (res > maxValue) {
                maxValue = res
            }
            rowArr.push(res)
        }
        renderData.push(rowArr)
    }
    return {
        maxValue,
        renderData
    }
}
//获取数据
async function getM4Data(url: string) {
    const fetchData = await fetch(url);
    const data = await fetchData.text();
    const dataArr = data.split("\n");

    return dataArr;
}

export { getM4Data, cesiumUtils };