kdyjs_ui/public/static/plugins/Heatmap.js

class SkySceneryHeatmap {
    /*
        params = {
            ele:document.querySelector('.div-heatmap'),
            data:[
                {
                    x:116, // 经度
                    y:39, //  纬度
                    value:4 // 强度值
                }
            ]
        }
    */
    constructor(viewer, params, yinqing) {
        this.viewer = viewer
        this.data = params.data;
        this.heatStyle = params.heatStyle;
        this.height = params.height;
        this.flyTo = params.flyTo;
        this.CesiumObject = yinqing
        this._init();
    }
    _init() {
        var eleObj = this._createEle();
        let heatmapParam = {
            blur: 0.85,
            gradient: { 0.4: 'blue', 0.6: 'green', 0.8: 'yellow', 0.9: 'red' },
            maxOpacity: 0.8,
            minOpacity: 0.1,
            radius: 20,
        }
        heatmapParam = Object.assign(heatmapParam, this.heatStyle);
        heatmapParam.container = eleObj.container;
        // 创建热力图
        var heatmapInstance = h337.create(heatmapParam);
        var obj = this._screenAArrange(this.data, eleObj.width, eleObj.height)
        var data = {
            max: obj.max,
            min: obj.min,
            data: obj.data
        };
        heatmapInstance.setData(data);
        var image = heatmapInstance._renderer.canvas.toDataURL("image/png")

        // let t = { "maxOpacity": 0.8, "minOpacity": 0.1, "blur": 0.85, "radius": 25, "gradient": { "0.4": "blue", "0.6": "green", "0.8": "yellow", "0.9": "red" } }

        // 将热力图添加到球体上(生成的热力图canvas元素类名为heatmap-canvas)
        // var canvas = document.getElementsByClassName('heatmap-canvas');

        let rectangleParam = {
            coordinates: this.CesiumObject.Rectangle.fromDegrees(
                obj.lonMin,
                obj.latMin,
                obj.lonMax,
                obj.latMax,
            ),
            heightReference: this.CesiumObject.HeightReference.NONE,
            material: new this.CesiumObject.ImageMaterialProperty({
                image: image,
                transparent: true
            })
        }
        if (!isNaN(this.height)) {
            rectangleParam.height = this.height
        }
        this.heatmapEntity = this.viewer.entities.add({
            name: 'heatmap',
            rectangle: rectangleParam
        });

        if (this.flyTo) {
            this.viewer.camera.setView({
                destination: this.CesiumObject.Rectangle.fromDegrees(
                    obj.lonMin,
                    obj.latMin,
                    obj.lonMax,
                    obj.latMax
                )
            });
        }
    }

    _createEle() {

        if (document.querySelector(".div-heatmap") != null) {
            document.querySelector(".div-heatmap").remove();
        }

        let div = document.createElement("div");
        //为div创建属性class = "test"
        var divattr = document.createAttribute("class");
        divattr.value = "div-heatmap";
        //把属性class = "test"添加到div
        div.setAttributeNode(divattr);
        var style = document.createAttribute("style");
        div.setAttributeNode(style);
        div.style.width = "800px";
        div.style.height = "800px";
        this.viewer.container.appendChild(div)
        return {
            container: div,
            width: 800,
            height: 800,
        };
    }

    _screenAArrange(data, width, height) {
        var lonMin = data.sort(function (a, b) {
            return a.x - b.x // 从小到大
        })[0].x - 0.5
        var lonMax = data.sort(function (a, b) {
            return b.x - a.x // 从大到小
        })[0].x + 0.5
        var latMin = data.sort(function (a, b) {
            return a.y - b.y // 从小到大
        })[0].y - 0.5
        var latMax = data.sort(function (a, b) {
            return b.y - a.y // 从大到小
        })[0].y + 0.5
        var max = data.sort(function (a, b) {
            return b.value - a.value // 从大到小
        })[0].value
        var min = data.sort(function (a, b) {
            return a.value - b.value // 从大到小
        })[0].value
        var points = [];
        // 根据热力图图片范围，生成随机热力点和强度值
        for (var i = 0; i < data.length; i++) {
            var point = {
                // x: Math.floor((data[i].y - latMin) / (latMax - latMin) * width),
                // y: Math.floor((data[i].x - lonMin) / (lonMax - lonMin) * height),
                x: Math.floor((data[i].x - lonMin) / (lonMax - lonMin) * width),
                y: Math.floor((latMax - data[i].y) / (latMax - latMin) * height),
                value: data[i].value
            };
            // viewer.entities.add({  // 点
            //     position: this.CesiumObject.Cartesian3.fromDegrees(data[i].x, data[i].y, 0),
            //     name: "point",
            //     point: {
            //         color: this.CesiumObject.Color.RED,
            //         pixelSize: 2
            //     }
            // });
            points.push(point);
        }

        return {
            lonMin: lonMin,
            lonMax: lonMax,
            latMin: latMin,
            latMax: latMax,
            max: max,
            min: min,
            data: points
        }
    }

    remove() {
        if (this.heatmapEntity)
            this.viewer.entities.remove(this.heatmapEntity)
    }

    destroy() {
        this.remove();

        delete this.viewer
        delete this.data
        delete this.heatStyle
        delete this.height
        delete this.heatmapEntity
        delete this.flyTo

        // delete this.__proto__._init
        // delete this.__proto__._createEle
        // delete this.__proto__._screenAArrange
        // delete this.__proto__.remove
        // delete this.__proto__.destroy
    }
    resetData(data) {
        var eleObj = this._createEle();
        let heatmapParam = {
            blur: 0.85,
            gradient: { 0.4: 'blue', 0.6: 'green', 0.8: 'yellow', 0.9: 'red' },
            maxOpacity: 0.8,
            minOpacity: 0.1,
            radius: 20,
        }
        heatmapParam = Object.assign(heatmapParam, this.heatStyle);
        heatmapParam.container = eleObj.container;
        // 创建热力图
        var heatmapInstance = h337.create(heatmapParam);
        var obj = this._screenAArrange(data, eleObj.width, eleObj.height)
        var hdata = {
            max: obj.max,
            data: obj.data
        };
        heatmapInstance.setData(hdata);
        var image = heatmapInstance._renderer.canvas.toDataURL("image/png")
        if (!this.heatmapEntity) return;

        let rectangleParam = {
            coordinates: this.CesiumObject.Rectangle.fromDegrees(
                obj.lonMin,
                obj.latMin,
                obj.lonMax,
                obj.latMax,
            ),
            heightReference: this.CesiumObject.HeightReference.NONE,
            material: new this.CesiumObject.ImageMaterialProperty({
                image: image,
                transparent: true
            })
        }
        if (!isNaN(this.height)) {
            rectangleParam.height = this.height
        }
        this.heatmapEntity.rectangle = rectangleParam
    }
}