zoukankan      html  css  js  c++  java
  • 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的结合比较麻烦

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

  • 相关阅读:
    Zend Framework 2.1.5 中根据服务器的环境配置调用数据库等的不同配置
    在基于 Eclipse 的 IDE 中安装和使用 Emmet(ZenCoding)
    【翻译】Emmet(Zen Coding)官方文档 之六 自定义 Emmet
    【翻译】Emmet(Zen Coding)官方文档 之二 缩写
    【翻译】Emmet(Zen Coding)官方文档 之七 一览表
    【翻译】Emmet(Zen Coding)官方文档 之三 CSS 缩写
    【翻译】Emmet(Zen Coding)官方文档 之四 动作
    【翻译】Emmet(Zen Coding)官方文档 之一 web 编程的必备工具
    Zend Framework 2 时区设置警告问题的解决
    【翻译】Emmet (Zen Coding) 元素类型
  • 原文地址:https://www.cnblogs.com/s313139232/p/13409426.html
Copyright © 2011-2022 走看看