Cesium中加载geojson数据,根据数据中的属性做等级展示

灰太狼 2022-10-25 04:45 1055阅读 0赞

cesium加载GeoJson数据，并做等级显示

效果  
![加载Geojson数据][Geojson]

const promise = viewer.dataSources.add(Cesium.GeoJsonDataSource.load(urlChina));//默认是黄色
    promise.then(function (dataSource) { 
        _this.jsonDatas[keydataSource] = dataSource;
        const entities = dataSource.entities.values;
        if (entities[0]._polygon) { 
            (_this.jsonDataArray).concat(entities);
        }
        const colorHash = { };
        const operation = { 
            showColor: function () {  //显示颜色
                for (let i = 0; i < entities.length; i++) { 
                    const entity = entities[i];
                    entity.properties = { ...urlChina.features[i]};  // 将每条数据的属性添加到模型的属性的properties中
                    let szxz = (entity.properties._szxx2019._value).trim(); //水资源等级
                    let featureType = entity.properties._geometry._value.type;
                    let color = colorHash[szxz];
                    if (!color) { 
                        if (szxz == '1') { 
                            color = new Cesium.Color(76 / 255, 230 / 255, 0, 1);  // #4ce600
                        } else if (szxz == '2') { 
                            color = new Cesium.Color(56 / 255, 168 / 255, 0, 1);  //#38a800
                        } else if (szxz == '3') { 
                            color = new Cesium.Color(168 / 255, 168 / 255, 0, 1);  // #a8a800
                        } else if (szxz == "4") { 
                            color = new Cesium.Color(230 / 255, 152 / 255, 0, 1);  // #e69800
                        } else if (szxz == "5") { 
                            color = new Cesium.Color(255 / 255, 255 / 255, 0, 1);  // #ffff00
                        } else if (szxz == "6") { 
                            color = new Cesium.Color(168 / 255, 0, 0, 1);  // #a80000
                        } else { 
                            color = new Cesium.Color(130 / 255, 130 / 255, 130 / 255, 1);  // #828282
                        }
    
                        colorHash[szxz] = color;
                    }
    // 判断加载的空间数据点线面类型 赋值颜色
                    if (featureType == "MultiPolygon") { 
                        entity.polygon.material = color;
                    } else if (featureType == "MultiLineString") { 
                        entity.polyline.material = color;
                        entity.polyline.width = _this.initPolylineWidth;
                    } else if (featureType == "MultiPoint") { 
                        entity.point.material = color;
                    }
                    entity.beOf = "水环境";
                }
            }
        };
    
        operation.showColor();

[Geojson]: /images/20221024/11478dfdc80a471fbcb7dd125daea19f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1055人围观）

还没有评论，来说两句吧...

相关阅读

相关 babylon怎么使用cesium加载数据

Babylon.js是一个开源的3D游戏引擎，而Cesium是一个开源的3D地理信息系统(GIS)框架。Babylon.js可以通过以下步骤使用Cesium加载数据： 1.

ゝ一纸荒年。/ 2024年03月25日 16:24/ 0 赞/ 104 阅读

相关 047：cesium加载geojson文件,显示图形

![在这里插入图片描述][8e6fb03228114687897d406ccc58f3ed.png_pic_center] 第047个 [点击查看专栏目录][Link 1]

朴灿烈づ我的快乐病毒、/ 2024年03月24日 16:06/ 0 赞/ 43 阅读

相关数据先加载还是先展示？

当用户打开你的app，你希望把数据展示给他，还任由他在上面操作，还是等数据加载好了，再给他呢？两种方式各有利弊： 1.先展示，后加载：优点：给用户0等待的错觉缺点

冷不防/ 2023年10月16日 22:52/ 0 赞/ 44 阅读

相关三、Cesium加载3dtitles数据

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: Cesium.Io

ゞ浴缸里的玫瑰/ 2023年06月05日 13:58/ 0 赞/ 104 阅读

相关 MATLAB打开geojson,Cesium-GeoJson数据的显示和隐藏

Cesium-GeoJson数据的显示和隐藏 Cesium-GeoJson数据的显示和隐藏 ![281e612602d637ee33b100482c0252ad.gif][

系统管理员/ 2023年01月16日 04:57/ 0 赞/ 260 阅读

相关 cesium中加载点图标

效果（截取部分效果） ![点图标][20210208105915500.png_pic_center] 代码 // primitives可加载大量数据，性能方面

亦凉/ 2022年10月25日 04:45/ 0 赞/ 754 阅读

相关 Cesium中加载geojson数据,根据数据中的属性做等级展示

cesium加载GeoJson数据，并做等级显示效果 ![加载Geojson数据][Geojson] const promise = viewer.dataS

灰太狼/ 2022年10月25日 04:45/ 0 赞/ 1056 阅读

相关 Cesium根据轨迹数据模型运动

var _start = Cesium.JulianDate.fromDate(new Date(2021, 07, 31, 11)); function my

刺骨的言语ヽ痛彻心扉/ 2022年09月02日 05:21/ 0 赞/ 557 阅读

相关 Cesium中加载Geojson

首先要下载安装Cesium ，见：[https://blog.csdn.net/qq\_40323256/article/details/108475669][https_bl

末蓝、/ 2021年09月02日 09:38/ 0 赞/ 1027 阅读

相关 openlayer中加载geojson的几种方式

目录一，加载本地geojson文件二，加载geoserver发布的geojson数据 1、wms方式 2、wfs方式三、点击查看属性 ------------

淡淡的烟草味﹌/ 2021年09月01日 00:09/ 0 赞/ 2322 阅读