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":{}
}]

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