Cesium之大批量点加载研究

Cesium之大批量点加载研究

需求：有一个6万4千个点的geojson文件全部加载到Cesium地球上去

实现方式：

PointPrimitive加载

代码：

var randomCount = 80000;
            var pointPrimitives = null;// 申明点渲染集合
            pointPrimitives = this.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
            while (randomCount--) {
                const dd = [3];
                dd[0] = 0 + Math.random() * 20
                dd[1] = 0 + Math.random() * 20
                dd[2] = 100
                var position = Cesium.Cartesian3.fromDegrees(dd[0], dd[1], dd[2]);
                pointPrimitives.add({
                    pixelSize: 5,
                    color: Cesium.Color['BLUE'],
                    outlineColor: Cesium.Color.BLACK,
                    outlineWidth: 0,
                    position: position
                });
            }

注释：代码中的点为随机数生成，效果与加载文件中的数据一致

其他实现方式与局限：

1.geojson加载：

this.viewer.dataSources.add(Cesium.GeoJsonDataSource.load('/geojson/conflict4000.json', {
                stroke: Cesium.Color.HOTPINK,
                fill: Cesium.Color.PINK,
                strokeWidth: 3,
                markerSymbol: '?'
            }));

局限：点的数据量大于5000以后浏览器崩溃

2.entities加载

var promise=Cesium.GeoJsonDataSource.load('/geojson/conflict4000.json');
            promise.then((dataSource) => {
                this.viewer.dataSources.add(dataSource);
                var entities = dataSource.entities.values;
                for (var i = 0; i < entities.length; i++) {
                    var entity = entities[i];
                    entity.billboard = null
                    entity.point = {
                        pixelSize : 10,
                        color :Cesium.Color.YELLOW
                    }
                }
            });
            this.viewer.flyTo(promise);

局限：效果同上，最大可加载5000点

注：entity.billboard = null 可关闭默认图钉样式

3.与echarts结合

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>echarts</title>
    <link rel="stylesheet" href="../../plugins/ys/ys.min.css">
    <link rel="stylesheet" href="../../plugins/Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="../../plugins/ysCesium/css/ysCesium.css">
    <link rel="stylesheet" href="../../css/ysCesium/pageStyle.css">
    <style>
        .tips{
            display: none;
            position: fixed;
             auto;
            height:auto;
            line-height: 30px;
            background-color: rgba(0,0,0,0.5);
            padding: 5px 15px;
            font-size: 14px;
            color:#fff;
            z-index: 999;
            user-select: none;
        }
    </style>
</head>
<body>
<div class="ys-absolute-container" id="map" style="overflow: hidden"></div>
<div class="tips" id="tip"></div>
</body>
<script src="../../plugins/ys/ys.min.js"></script>
<script src="../../plugins/Cesium/Cesium.js"></script>
<script src="../../plugins/others/echarts.min.js"></script>
<script src="../../plugins/ysCesium/ysCesium.js"></script>
<script>

    const app = new YsCesium("map")
    const viewer = app.viewer
    

    /* 开始 */
    //一：不需要有china.js; option中不需要geo; 每个series数组中元素都加 coordinateSystem: 'GLMap',
    
    const convertData = function (data) {
        const res = [];
        for (let i = 0; i < data.length; i++) {
            const geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        console.log(res);
        return res;
    };
    
    var randomCount = 80000;
    var i = 0;
    // var data = new Float32Array(randomCount);
    // const data = new Float32Array(randomCount);
    // const geoCoordMap = new Float32Array(randomCount);
    const res = [];
    while (randomCount--) {
        const dd = [3];
        // data[i] = -125.8 + Math.random() * 50;
        // data[i+1] = 30.3 + Math.random() * 201;
        // data[i] = {name: 'test', value: 10};
        // geoCoordMap[i].push('test':[-125.8 + Math.random() * 50,31.89,30.3 + Math.random() * 201]);
        dd[0] = 0 + Math.random() * 20
        dd[1] = 0 + Math.random() * 20
        dd[2] = 100
        res.push({
            name: i,
            value: dd
        });
        i++;
    }
        console.log(res);
    
    const option = {
        animation: !1,
        GLMap: {},
        series: [
            {
                name: '城市',
                type: 'scatter',
                coordinateSystem: 'GLMap',
                data: res,
                symbolSize: function (val) {
                    return val[2] / 20;
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ddb926'
                    }
                }
            }
        ]
    };

    app.combineEcharts(option);

    viewer.camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(117.16, 32.71, 15000000.0)
    });
</script>
</html>

View Code

借鉴了：

　　https://www.wellyyss.cn/ysCesium/main/main.html ysCesium的echarts1的demo

　　https://echarts.apache.org/examples/zh/editor.html?c=scatterGL-gps&gl=1 echarts官方案例散点图

通过与echarts的结合可以加载千万级的点。

局限：echarts与cesium的结合比较麻烦

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