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

 

 

 

 

 

 

 

 

钻研不易，转载请注明出处。。。。。。