cesium+mapv之熱力圖地球背面隱藏效果

cesium+mapv之熱力圖地球背面隱藏效果

當mapv加載在cesium地球上時，會出現地球背面的熱力圖未隱藏，影響顯示效果

解決方法：

在cesium場景改變時，更新mapv的dataset，只傳入當前地球正面的數據

地球正面數據獲取辦法：

獲取當前攝像機查看地球的點，然后獲取地球正面范圍，然后用經緯度過濾掉地球背面的點（本篇中過濾方法較粗，如需要使用可細化算法）

代碼：

/* 熱力圖 */
export default {
    data() {
        return {
            dataSet: {},
            getHeatMapUpdate: {} // 熱力圖數據更新事件
        }
    },
    methods: {
        // mapV 熱力圖
        addHeatmap(data, options) {
            let viewer = this._earth.czm.viewer
            var dataSet = new mapv.DataSet([]);
            this.dataSet = dataSet
            // 更新dataSet
            dataSet.set(this.getData(data))
            this.getHeatMapUpdate = setInterval(()=>{
                dataSet.set(this.getData(data))
            },200)
            var optionsDeaf = {
                fillStyle: 'rgba(255, 250, 50, 1)', // 填充顏色
                globalCompositeOperation: 'lighter', // 顏色疊加方式
                maxSize: 10, // 顯示的圓最大半徑大小
                max: 10, // 數值最大值范圍
                shadowBlur: 30, // 投影模糊級數
                shadowColor: 'rgba(255, 250, 50, 1)', // 投影顏色viewer
                gradient: {
                    0.25: 'rgb(0,201,255)',
                    0.55: 'rgb(0,255,0)',
                    0.6: 'yellow',
                    0.7: 'rgb(255,0,0)'
                }, // 漸變色
                draw: 'heatmap' // 用不同大小的圓來展示
            }
            if (options) {
                optionsDeaf = options
            }
            let heatMapLayer = XE.mixins.mapVLayer(viewer, dataSet, optionsDeaf)
        },
        // 獲取當前視角的熱力圖數據
        getData(data) {
            let viewer = this._earth.czm.viewer
            // 獲取攝像機位置世界坐標
            var cartesian3=viewer.camera.position
            var ellipsoid=viewer.scene.globe.ellipsoid;
            var cartographic=ellipsoid.cartesianToCartographic(cartesian3);
            // 經度：
            var lng=Cesium.Math.toDegrees(cartographic.longitude);
            // 緯度：
            var lat=Cesium.Math.toDegrees(cartographic.latitude);
            // 過濾獲取地球正面的點
            let heatMapData = data.filter(e => {
                return e.geometry.coordinates[0] > lng - 90 && e.geometry.coordinates[0] < lng + 90 && e.geometry.coordinates[1] > lat - 90 && e.geometry.coordinates[1] < lat + 90
            })
            return heatMapData
        },
        // 刪除熱力圖
        clearHeatmap () {
            clearInterval(this.getHeatMapUpdate)
            this.dataSet.set([])
        },
    }
}

混入后調用：

this.$refs.emap.addHeatmap(features)

features參數：

"features":[{
        "geometry":{"coordinates":[4.591792,51.938049],"type":"Point"},
        "type":"Feature",
        "properties":{}
}]

 

 

 

 

 

 

 

 

鑽研不易，轉載請注明出處。。。。。。