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

灰太狼 2022-10-25 04:45 1049阅读 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 条评论，1049人围观）

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

相关阅读

相关 216：vue+openlayers 加载GPX数据，导出geojson文件

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

た入场券/ 2024年03月25日 09:35/ 0 赞/ 77 阅读

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

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

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

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

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

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

相关 Pytorch中的数据加载详解

LawsonAbs的认知与思考，还请各位读者批判阅读。总结这个是 pytorch 中的类，所以可以去 torch的在线[doc][]中查找相关的资料持

浅浅的花香味﹌/ 2022年12月24日 15:59/ 0 赞/ 186 阅读

相关 cesium中加载点图标

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

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

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

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

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

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

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

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

相关 Android状态页切换（数据加载中，数据加载失败，空数据）

咱们在开发过程中经常需要从网络上获取数据。这个时候为了增强用户体验。就可能有如下需求：在获取的数据的中时候显示加载中的UI（获取数据需要一定的时间）、如果获取数

深碍√TFBOYSˉ_/ 2022年05月26日 02:47/ 0 赞/ 267 阅读

相关 Cesium中加载Geojson

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

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

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

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

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