Cesium源码解读系列（一）：GeoJsonDataSource如何处理geojson格式的数据

已于 2022-04-18 09:47:40 修改
阅读量7.3k 收藏 9
点赞数 2
分类专栏： Cesium JavaScript GIS 文章标签： 前端
于 2022-04-17 21:20:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GhostPaints/article/details/124233933
版权
JavaScript 同时被 3 个专栏收录
20 篇文章 1 订阅
订阅专栏
GIS
15 篇文章 0 订阅
订阅专栏
Cesium
12 篇文章 18 订阅
订阅专栏

 想写这个系列的文章起因，是因为项目上的“图层管理”模块功能进行了更改。里面涉及到了一种GeoJson格式的图层数据。

从接口获取到的数据，当时设计接口的时候就已经定好了数据格式。标准的GeoJson对象的形式。

然后，我就使用了Cesium官方提供的GeoJsonDataSource方法来直接使用这个json对象。于是我成功的在地图上看到了很多billboard图标。但是呢，这个图标不是我想要的那种，是我的项目资源里面没有的图标，是Cesium默认的图标或者以前谁改了Cesium源码显示的默认图标。

于是，我只能在这个dataSource创建好后，重新去遍历它的entities，拿到每一个entity并重新设置billboard的image图片。

做好之后，我一直在想，Cesium知道我没有给这些point点设置图标，所以它使用了默认的图标。那么，我应该怎么做，才能让Cesium去用我设置好的图标？我带着疑惑去看了下源码。

这是我项目的多余操作：

loadGeoJsonWithImg: function (geoJsonObj,name,imgPath = null) {
    const dataSource = new Cesium.GeoJsonDataSource(name);    // 创建并取名
    dataSource.load(geoJsonObj,{ clampToGround:true }).then(function (data) {
        viewer.dataSources.add(data);    // 添加这个datasource
        const entities = data.entities.values;    // 拿到所有实体
        entities.forEach(entity => {
                // 重置图片，图片大小，大小单位为米
                entity.billboard.image = imgPath || entity.properties.style.getValue().image;
                entity.billboard.width = 30;
                entity.billboard.height = 30;
                entity.billboard.sizeInMeters = true;
        })
    })
},

Cesium的官方示例中，它加载了一个geojson文件，里面每一个的图标都不一样。我就尝试着去打印它那个文件。官方示例：

 Cesium Sandcastlehttps://sandcastle.cesium.com/index.html?src=GeoJSON%2520simplestyle.html

 官方示例的文件的文本内容：

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[0,0]},"properties":{"title":"Unnamed","marker-color":"#B9EB14"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,0]},"properties":{"title":"0","marker-symbol":"0","marker-color":"#D13C3C"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,0]},"properties":{"title":"1","marker-symbol":"1","marker-color":"#C49D22"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,0]},"properties":{"title":"2","marker-symbol":"2","marker-color":"#8EE3A6"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.4,0]},"properties":{"title":"3","marker-symbol":"3","marker-color":"#34BE96"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.5,0]},"properties":{"title":"4","marker-symbol":"4","marker-color":"#8F1312"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.6000000000000001,0]},"properties":{"title":"5","marker-symbol":"5","marker-color":"#E7F163"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.7000000000000001,0]},"properties":{"title":"6","marker-symbol":"6","marker-color":"#713291"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.8,0]},"properties":{"title":"7","marker-symbol":"7","marker-color":"#FA40B3"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9,0]},"properties":{"title":"8","marker-symbol":"8","marker-color":"#46117E"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,0]},"properties":{"title":"9","marker-symbol":"9","marker-color":"#4ABA5E"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.1,0]},"properties":{"title":"a","marker-symbol":"a","marker-color":"#77A1EF"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.2000000000000002,0]},"properties":{"title":"b","marker-symbol":"b","marker-color":"#A1F5F1"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.3,0]},"properties":{"title":"c","marker-symbol":"c","marker-color":"#7831EE"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.4000000000000001,0]},"properties":{"title":"d","marker-symbol":"d","marker-color":"#FB6E43"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,-0.1]},"properties":{"title":"e","marker-symbol":"e","marker-color":"#07C621"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,-0.1]},"properties":{"title":"f","marker-symbol":"f","marker-color":"#DCC44A"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,-0.1]},"properties":{"title":"g","marker-symbol":"g","marker-color":"#FECF10"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,-0.1]},"properties":{"title":"h","marker-symbol":"h","marker-color":"#AD5BBE"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.4,-0.1]},"properties":{"title":"i","marker-symbol":"i","marker-color":"#508916"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.5,-0.1]},"properties":{"title":"j","marker-symbol":"j","marker-color":"#D120E0"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.6000000000000001,-0.1]},"properties":{"title":"k","marker-symbol":"k","marker-color":"#D919EB"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.7000000000000001,-0.1]},"properties":{"title":"l","marker-symbol":"l","marker-color":"#FDED4D"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.8,-0.1]},"properties":{"title":"m","marker-symbol":"m","marker-color":"#085A20"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9,-0.1]},"properties":{"title":"n","marker-symbol":"n","marker-color":"#B32F65"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,-0.1]},"properties":{"title":"o","marker-symbol":"o","marker-color":"#86BA8E"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.1,-0.1]},"properties":{"title":"p","marker-symbol":"p","marker-color":"#EF1BD8"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.2000000000000002,-0.1]},"properties":{"title":"q","marker-symbol":"q","marker-color":"#B007E2"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.3,-0.1]},"properties":{"title":"r","marker-symbol":"r","marker-color":"#8BFC18"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.4000000000000001,-0.1]},"properties":{"title":"s","marker-symbol":"s","marker-color":"#14C39F"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,-0.2]},"properties":{"title":"t","marker-symbol":"t","marker-color":"#2FE765"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,-0.2]},"properties":{"title":"u","marker-symbol":"u","marker-color":"#740D40"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,-0.2]},"properties":{"title":"v","marker-symbol":"v","marker-color":"#4C1374"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,-0.2]},"properties":{"title":"w","marker-symbol":"w","marker-color":"#FD1134"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.4,-0.2]},"properties":{"title":"x","marker-symbol":"x","marker-color":"#A487D2"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.5,-0.2]},"properties":{"title":"y","marker-symbol":"y","marker-color":"#C35194"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.6000000000000001,-0.2]},"properties":{"title":"z","marker-symbol":"z","marker-color":"#07C7EB"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.7000000000000001,-0.2]},"properties":{"title":"airfield","marker-symbol":"airfield","marker-color":"#618982"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.8,-0.2]},"properties":{"title":"airport","marker-symbol":"airport","marker-color":"#57D824"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9,-0.2]},"properties":{"title":"alcohol-shop","marker-symbol":"alcohol-shop","marker-color":"#F51BC8"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,-0.2]},"properties":{"title":"america-football","marker-symbol":"america-football","marker-color":"#815025"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.1,-0.2]},"properties":{"title":"art-gallery","marker-symbol":"art-gallery","marker-color":"#B749F9"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.2000000000000002,-0.2]},"properties":{"title":"bakery","marker-symbol":"bakery","marker-color":"#1E7403"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.3,-0.2]},"properties":{"title":"bank","marker-symbol":"bank","marker-color":"#4600EA"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.4000000000000001,-0.2]},"properties":{"title":"bar","marker-symbol":"bar","marker-color":"#E83792"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,-0.30000000000000004]},"properties":{"title":"baseball","marker-symbol":"baseball","marker-color":"#CB75C2"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,-0.30000000000000004]},"properties":{"title":"basketball","marker-symbol":"basketball","marker-color":"#565023"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,-0.30000000000000004]},"properties":{"title":"beer","marker-symbol":"beer","marker-color":"#750BA2"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,-0.30000000000000004]},"properties":{"title":"bicycle","marker-symbol":"bicycle","marker-color":"#259653"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.4,-0.30000000000000004]},"properties":{"title":"building","marker-symbol":"building","marker-color":"#38A815"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.5,-0.30000000000000004]},"properties":{"title":"bus","marker-symbol":"bus","marker-color":"#68FA8F"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.6000000000000001,-0.30000000000000004]},"properties":{"title":"cafe","marker-symbol":"cafe","marker-color":"#B7FE7B"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.7000000000000001,-0.30000000000000004]},"properties":{"title":"camera","marker-symbol":"camera","marker-color":"#9EAD32"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.8,-0.30000000000000004]},"properties":{"title":"campsite","marker-symbol":"campsite","marker-color":"#7CEB79"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9,-0.30000000000000004]},"properties":{"title":"car","marker-symbol":"car","marker-color":"#31E5D8"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,-0.30000000000000004]},"properties":{"title":"cemetery","marker-symbol":"cemetery","marker-color":"#E0D128"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.1,-0.30000000000000004]},"properties":{"title":"cesium","marker-symbol":"cesium","marker-color":"#D34EEF"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.2000000000000002,-0.30000000000000004]},"properties":{"title":"chemist","marker-symbol":"chemist","marker-color":"#BC4302"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.3,-0.30000000000000004]},"properties":{"title":"cinema","marker-symbol":"cinema","marker-color":"#DBB441"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.4000000000000001,-0.30000000000000004]},"properties":{"title":"circle-stroked","marker-symbol":"circle-stroked","marker-color":"#AE0407"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,-0.4]},"properties":{"title":"circle","marker-symbol":"circle","marker-color":"#9FF73A"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,-0.4]},"properties":{"title":"city","marker-symbol":"city","marker-color":"#37E981"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,-0.4]},"properties":{"title":"clothing-store","marker-symbol":"clothing-store","marker-color":"#E53679"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,-0.4]},"properties":{"title":"college","marker-symbol":"college","marker-color":"#E57D14"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.4,-0.4]},"properties":{"title":"commercial","marker-symbol":"commercial","marker-color":"#162A19"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.5,-0.4]},"properties":{"title":"cricket","marker-symbol":"cricket","marker-color":"#D6AD1E"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.6000000000000001,-0.4]},"properties":{"title":"cross","marker-symbol":"cross","marker-color":"#2B8E7B"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.7000000000000001,-0.4]},"properties":{"title":"dam","marker-symbol":"dam","marker-color":"#A4E4BD"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.8,-0.4]},"properties":{"title":"danger","marker-symbol":"danger","marker-color":"#D3AA1B"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9,-0.4]},"properties":{"title":"disability","marker-symbol":"disability","marker-color":"#381CAE"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,-0.4]},"properties":{"title":"dog-park","marker-symbol":"dog-park","marker-color":"#FFFE35"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.1,-0.4]},"properties":{"title":"embassy","marker-symbol":"embassy","marker-color":"#7B3AC7"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.2000000000000002,-0.4]},"properties":{"title":"emergency-telephone","marker-symbol":"emergency-telephone","marker-color":"#A6F6EC"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.3,-0.4]},"properties":{"title":"entrance","marker-symbol":"entrance","marker-color":"#B83FF6"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.4000000000000001,-0.4]},"properties":{"title":"farm","marker-symbol":"farm","marker-color":"#CF38F0"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,-0.5]},"properties":{"title":"fast-food","marker-symbol":"fast-food","marker-color":"#19D6E6"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,-0.5]},"properties":{"title":"ferry","marker-symbol":"ferry","marker-color":"#BAA5E8"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,-0.5]},"properties":{"title":"fire-station","marker-symbol":"fire-station","marker-color":"#B7EC62"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,-0.5]},"properties":{"title":"fuel","marker-symbol":"fuel","marker-color":"#20228D"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.4,-0.5]},"properties":{"title":"garden","marker-symbol":"garden","marker-color":"#E7B9A3"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.5,-0.5]},"properties":{"title":"gift","marker-symbol":"gift","marker-color":"#306A6A"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.6000000000000001,-0.5]},"properties":{"title":"golf","marker-symbol":"golf","marker-color":"#7A1036"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.7000000000000001,-0.5]},"properties":{"title":"grocery","marker-symbol":"grocery","marker-color":"#8A718E"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.8,-0.5]},"properties":{"title":"hairdresser","marker-symbol":"hairdresser","marker-color":"#535403"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9,-0.5]},"properties":{"title":"harbor","marker-symbol":"harbor","marker-color":"#ABC90F"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,-0.5]},"properties":{"title":"heart","marker-symbol":"heart","marker-color":"#77E8EA"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.1,-0.5]},"properties":{"title":"heliport","marker-symbol":"heliport","marker-color":"#D5600D"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.2000000000000002,-0.5]},"properties":{"title":"hospital","marker-symbol":"hospital","marker-color":"#CF27FB"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.3,-0.5]},"properties":{"title":"ice-cream","marker-symbol":"ice-cream","marker-color":"#CB2B5B"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.4000000000000001,-0.5]},"properties":{"title":"industrial","marker-symbol":"industrial","marker-color":"#C3B6AA"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,-0.6000000000000001]},"properties":{"title":"land-use","marker-symbol":"land-use","marker-color":"#F002A5"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,-0.6000000000000001]},"properties":{"title":"laundry","marker-symbol":"laundry","marker-color":"#4B84E9"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,-0.6000000000000001]},"properties":{"title":"library","marker-symbol":"library","marker-color":"#85D541"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,-0.6000000000000001]},"properties":{"title":"lighthouse","marker-symbol":"lighthouse","marker-color":"#A9D41C"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.4,-0.6000000000000001]},"properties":{"title":"lodging","marker-symbol":"lodging","marker-color":"#55248D"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.5,-0.6000000000000001]},"properties":{"title":"logging","marker-symbol":"logging","marker-color":"#4966A4"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.6000000000000001,-0.6000000000000001]},"properties":{"title":"london-underground","marker-symbol":"london-underground","marker-color":"#D21380"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.7000000000000001,-0.6000000000000001]},"properties":{"title":"marker-stroked","marker-symbol":"marker-stroked","marker-color":"#38F6EF"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.8,-0.6000000000000001]},"properties":{"title":"marker","marker-symbol":"marker","marker-color":"#2FD6D1"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9,-0.6000000000000001]},"properties":{"title":"minefield","marker-symbol":"minefield","marker-color":"#118A73"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,-0.6000000000000001]},"properties":{"title":"mobilephone","marker-symbol":"mobilephone","marker-color":"#9FE746"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.1,-0.6000000000000001]},"properties":{"title":"monument","marker-symbol":"monument","marker-color":"#B16B66"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.2000000000000002,-0.6000000000000001]},"properties":{"title":"museum","marker-symbol":"museum","marker-color":"#A16186"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.3,-0.6000000000000001]},"properties":{"title":"music","marker-symbol":"music","marker-color":"#ED79A4"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.4000000000000001,-0.6000000000000001]},"properties":{"title":"oil-well","marker-symbol":"oil-well","marker-color":"#38A9DF"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,-0.7000000000000001]},"properties":{"title":"park","marker-symbol":"park","marker-color":"#EDBFC8"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,-0.7000000000000001]},"properties":{"title":"park2","marker-symbol":"park2","marker-color":"#11078F"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,-0.7000000000000001]},"properties":{"title":"parking-garage","marker-symbol":"parking-garage","marker-color":"#E66D3C"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,-0.7000000000000001]},"properties":{"title":"parking","marker-symbol":"parking","marker-color":"#ADB288"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.4,-0.7000000000000001]},"properties":{"title":"pharmacy","marker-symbol":"pharmacy","marker-color":"#180EF1"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.5,-0.7000000000000001]},"properties":{"title":"pitch","marker-symbol":"pitch","marker-color":"#262B3F"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.6000000000000001,-0.7000000000000001]},"properties":{"title":"place-of-worship","marker-symbol":"place-of-worship","marker-color":"#1B628C"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.7000000000000001,-0.7000000000000001]},"properties":{"title":"playground","marker-symbol":"playground","marker-color":"#9C2074"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.8,-0.7000000000000001]},"properties":{"title":"police","marker-symbol":"police","marker-color":"#F3FA9D"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9,-0.7000000000000001]},"properties":{"title":"polling-place","marker-symbol":"polling-place","marker-color":"#7D999D"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,-0.7000000000000001]},"properties":{"title":"post","marker-symbol":"post","marker-color":"#25E703"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.1,-0.7000000000000001]},"properties":{"title":"prison","marker-symbol":"prison","marker-color":"#AD77F3"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.2000000000000002,-0.7000000000000001]},"properties":{"title":"rail-above","marker-symbol":"rail-above","marker-color":"#91E275"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.3,-0.7000000000000001]},"properties":{"title":"rail-light","marker-symbol":"rail-light","marker-color":"#39B405"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.4000000000000001,-0.7000000000000001]},"properties":{"title":"rail-metro","marker-symbol":"rail-metro","marker-color":"#9E412F"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,-0.8]},"properties":{"title":"rail-underground","marker-symbol":"rail-underground","marker-color":"#014D11"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,-0.8]},"properties":{"title":"rail","marker-symbol":"rail","marker-color":"#5C667F"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,-0.8]},"properties":{"title":"religious-christian","marker-symbol":"religious-christian","marker-color":"#D9B961"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,-0.8]},"properties":{"title":"religious-jewish","marker-symbol":"religious-jewish","marker-color":"#0FF371"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.4,-0.8]},"properties":{"title":"religious-muslim","marker-symbol":"religious-muslim","marker-color":"#481A08"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.5,-0.8]},"properties":{"title":"restaurant","marker-symbol":"restaurant","marker-color":"#B4794C"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.6000000000000001,-0.8]},"properties":{"title":"roadblock","marker-symbol":"roadblock","marker-color":"#F56585"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.7000000000000001,-0.8]},"properties":{"title":"rocket","marker-symbol":"rocket","marker-color":"#FD22CF"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.8,-0.8]},"properties":{"title":"school","marker-symbol":"school","marker-color":"#631B68"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9,-0.8]},"properties":{"title":"scooter","marker-symbol":"scooter","marker-color":"#85D24C"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,-0.8]},"properties":{"title":"shop","marker-symbol":"shop","marker-color":"#47C366"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.1,-0.8]},"properties":{"title":"skiing","marker-symbol":"skiing","marker-color":"#81AEF9"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.2000000000000002,-0.8]},"properties":{"title":"slaughterhouse","marker-symbol":"slaughterhouse","marker-color":"#881591"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.3,-0.8]},"properties":{"title":"soccer","marker-symbol":"soccer","marker-color":"#0E981A"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.4000000000000001,-0.8]},"properties":{"title":"square-stroked","marker-symbol":"square-stroked","marker-color":"#47D25C"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,-0.9]},"properties":{"title":"square","marker-symbol":"square","marker-color":"#7EFF04"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,-0.9]},"properties":{"title":"star-stroked","marker-symbol":"star-stroked","marker-color":"#D8AEAF"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,-0.9]},"properties":{"title":"star","marker-symbol":"star","marker-color":"#9CF7E9"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,-0.9]},"properties":{"title":"suitcase","marker-symbol":"suitcase","marker-color":"#1AAA24"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.4,-0.9]},"properties":{"title":"swimming","marker-symbol":"swimming","marker-color":"#BE0946"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.5,-0.9]},"properties":{"title":"telephone","marker-symbol":"telephone","marker-color":"#66E15A"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.6000000000000001,-0.9]},"properties":{"title":"tennis","marker-symbol":"tennis","marker-color":"#EEF2D1"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.7000000000000001,-0.9]},"properties":{"title":"theatre","marker-symbol":"theatre","marker-color":"#217572"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.8,-0.9]},"properties":{"title":"toilets","marker-symbol":"toilets","marker-color":"#B31C69"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9,-0.9]},"properties":{"title":"town-hall","marker-symbol":"town-hall","marker-color":"#9D8B6A"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1,-0.9]},"properties":{"title":"town","marker-symbol":"town","marker-color":"#D4A019"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.1,-0.9]},"properties":{"title":"triangle-stroked","marker-symbol":"triangle-stroked","marker-color":"#AF6474"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.2000000000000002,-0.9]},"properties":{"title":"triangle","marker-symbol":"triangle","marker-color":"#91DAA4"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.3,-0.9]},"properties":{"title":"village","marker-symbol":"village","marker-color":"#2C3A7F"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.4000000000000001,-0.9]},"properties":{"title":"warehouse","marker-symbol":"warehouse","marker-color":"#2F3D8A"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0,-1]},"properties":{"title":"waste-basket","marker-symbol":"waste-basket","marker-color":"#9BEEB0"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.1,-1]},"properties":{"title":"water","marker-symbol":"water","marker-color":"#40310A"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.2,-1]},"properties":{"title":"wetland","marker-symbol":"wetland","marker-color":"#FF42EA"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.30000000000000004,-1]},"properties":{"title":"zoo","marker-symbol":"zoo","marker-color":"#9195A1"}}]}

内容获取方法，在官方示例代码中添加如下代码并运行，在console卡片窗口查看：

Cesium.Resource.fetchJson("../SampleData/simplestyles.geojson").then(function (result){
  console.log(JSON.stringify(result));
})

官方的geojson文件格式，每一个feature结构都是长这样的：

{
    "type":"Feature",
    "geometry":{
        "type":"Point",
        "coordinates":[0.30000000000000004,-1]
    },
    "properties":{
        "title":"zoo",
        "marker-symbol":"zoo",
        "marker-color":"#9195A1"
    }
}

就是这样一个feature定义了官方示例的效果里面，最后一排那个灰颜色的长颈鹿图标。

然后再看第一排第一个那个什么内容都没有的空图标是如何定义的

{
    "type":"Feature",
    "geometry":{
        "type":"Point",
        "coordinates":[0,0]
    },
    "properties":{
        "title":"Unnamed",
        "marker-color":"#B9EB14"
    }
}

除了geometry里面的坐标值不同，那就是properties属性里面的不同了。第一排第一个那个空图标是没有marker-symbol这个字段的。marker-color决定的是图标颜色，那么可以猜测有两种情况：

1.Cesium在处理point类型的feature时候，会提供默认的一个可以更改颜色的图标billboard，里面的内容靠marker-symbol这个字段决定。

2.Cesium在处理point类型的feature时候，会提供默认的一个可以更改颜色的图标billboard，里面的内容靠title这个字段决定。

 从官网进入源码查看，会发现这样一个方法：

function createPoint(dataSource, geoJson, crsFunction, coordinates, options) {
  let symbol = options.markerSymbol;
  let color = options.markerColor;
  let size = options.markerSize;

  const properties = geoJson.properties;
  if (defined(properties)) {
    const cssColor = properties["marker-color"];
    if (defined(cssColor)) {
      color = Color.fromCssColorString(cssColor);
    }

    size = defaultValue(sizes[properties["marker-size"]], size);
    const markerSymbol = properties["marker-symbol"];
    if (defined(markerSymbol)) {
      symbol = markerSymbol;
    }
  }

  let canvasOrPromise;
  if (defined(symbol)) {
    if (symbol.length === 1) {
      canvasOrPromise = dataSource._pinBuilder.fromText(
        symbol.toUpperCase(),
        color,
        size
      );
    } else {
      canvasOrPromise = dataSource._pinBuilder.fromMakiIconId(
        symbol,
        color,
        size
      );
    }
  } else {
    canvasOrPromise = dataSource._pinBuilder.fromColor(color, size);
  }

  const billboard = new BillboardGraphics();
  billboard.verticalOrigin = new ConstantProperty(VerticalOrigin.BOTTOM);

  // Clamp to ground if there isn't a height specified
  if (coordinates.length === 2 && options.clampToGround) {
    billboard.heightReference = HeightReference.CLAMP_TO_GROUND;
  }

  const entity = createObject(
    geoJson,
    dataSource._entityCollection,
    options.describe
  );
  entity.billboard = billboard;
  entity.position = new ConstantPositionProperty(crsFunction(coordinates));

  const promise = Promise.resolve(canvasOrPromise)
    .then(function (image) {
      billboard.image = new ConstantProperty(image);
    })
    .catch(function () {
      billboard.image = new ConstantProperty(
        dataSource._pinBuilder.fromColor(color, size)
      );
    });

  dataSource._promises.push(promise);
}

这个方法的参数：

第一个dataSource：创建好的dataSource，后续将创建好的东西添加进去。

第二个geoJson： 要处理的geojson对象

第三个crsFunction：某个方法

第四个coordinates：坐标点

第五个options： 调用Cesium.GeoJsonDataSource.load(data, options)的第二个参数。

首先是定义了三个变量，默认使用options里面设置好的值。如果需要处理的geojson有properties属性，就使用对应的值。

得到一个结论，properties里面的"marker-color"决定了某一个颜色值。

接着又定义了一个变量 canvasOrPromise，从名称来分析，这个变量要么存储一个canvas对象或者一个异步的promise。geojson的properties是否设置了“marker-symbol”则使用它，然后看options是否设置了markerSymbol，如果前面两个都没有，那么直接使用颜色color和size来创建一个promise。

到了这里就差不多懂了。如果properties里面的“marker-symbol”长度只有1，那么Cesium会将它转换为大写，然后使用dataSource._pinBuilder.fromText方法，将文字内容，颜色和大小传入。异步绘制成一个图标。

dataSource._pinBuilder已知有三种方法，fromText传入文本，fromMakiIconId传入一个icon的id值，fromColor只做颜色和大小处理。

PinBuilder是Cesium的一个加载方法：

“marker-symbol"设置的id，其实是这个网站里面的图标：

Maki Icons | By Mapbox https://labs.mapbox.com/maki-icons/  Cesim官方把这个些图标文件存放在它源码的Assets/Textures/maki路径下，对应的目录文件结构是这样的：

 “marker-symbol"传入的其实是这个文件夹里面的图片文件名称。

这样我们就明白了官方示例的文件是一个怎样的处理逻辑：

marker-symbol如果是一个长度为1的字符串，那么Cesium会将这个文字转换为大写，然后生成一个有对应文字的图标。如果长度不为1，那么Cesium会把它看成是一个图片的地址，为这个图片设置颜色和大小。

所以，我们可以看到那些数字和字母，是生成的canvas。而其他那些没法通过键盘敲出来的图标呢，则是使用的图片资源地址。

接下来就是创建一个图标billboard，设置是否贴地

 然后创建一个需要显示的entity，并将这个billboard赋值给它。

 这里可以看到，Cesium使用了promise异步方法，没有失败或者报错的话，就会将billboard设置成对应的图标。否则就是默认图标，那么默认图标是这个方法来的：dataSource._pinBuilder.fromColor(color, size)

所以，后端如果按GeoJSON的数据格式给我们前端数据一堆point类型的数据，那么我们应该给后端提一点要求。那就是每一个feature里面的properties都设置一个“marker-symbol值来存放这个点对应使用的图片路径。这样我们就不用每一个entity的billboard的image都设置了。

Cesium.GeoJsonDataSource.load(data, options)方法的options参数里面，我们已经了解到了markerSize，markerSymbol，markerColor 三个值会在源码的createPoint方法中用到。接下来就可以看其他的创建方法，源码中总共有这些方法来分别创建点线面：

createPoint        创建点，可以看作创建一个billboard，对应Point类型。

createLineString   创建线，可以看作创建一个polyline，对应LineString类型。

createPolygon        创建面，可以看作创建一个polygon，对应Polygon类型。

createObject        创建一个entity，毕竟那些点线面需要放在entity里面。

多个点线面，在源码里面也就是多次创建而已。底层的创建方法就这四个。

也刚好对应了GeoJSON数据规范所定义的类型。

 首先看createLineString方法，在创建polyline的时候，使用到了options的哪些值。

传入参数的作用和createPoint方法一样，就不重复说明了。

定了两个变量，来决定线的材质和宽度。同样的去geojson对象里面取properties里面的值。

然后创建一个entity，再弄一个polylineGraphics来设置宽度位置材质这些东西。

createLineString方法总结就是：

// 通过geojson对象来设置线的宽度颜色和透明度
{
    "type":"Feature",
    "geometry":{
        "type":"LineString",
        "coordinates": 多个坐标形成的数组
    },
    "properties":{
        "stroke-width":"3",    // 宽度。最好使用数字，或者字符串内容为数字
        "stroke-opacity":"0.5",    // 透明度。范围：0-1.0
        "stroke":"#9195A1"        // 颜色
    }
}

 接下来看createPolygon方法，如何创建一个面。这个就比较麻烦。

 定义了三个变量，面轮廓的颜色，面的填充材质，面轮廓的宽度。

和创建线不同，多了两个属性，填充颜色和填充透明度

polygon面还有一个特性，那就是面可以被镂空。Cesium是这样处理镂空的：

除了坐标数组的第一个值当作，其余的都当作镂空来处理。

 createPolygon方法总结，如果想通过geojson对象来设置绘制的面：

// 通过geojson对象来设置线的宽度颜色和透明度
{
    "type":"Feature",
    "geometry":{
        "type":"Polygon",
        "coordinates":         // 二维数组，子项为坐标数组
            数组[第一个值为面的坐标，后续为镂空.....]
    },
    "properties":{
        "stroke-width":"3",    // 轮廓宽度，和线的设置一样
        "stroke-opacity":"0.5",    // 轮廓线透明度
        "stroke":"#9195A1"        // 轮廓颜色
        // 面独有的设置
        "fill":"#9195A1"        // 颜色值
        "fill-opacity": "0.5"    // 填充透明度
    }
}

这篇文章主要探讨，如何传递GeoJSON对象，更好的绘制我们想要的结果。更多的就不研究了，另外开篇章来分析。

总结：

对于point点，我们可以在json对象这样设置图标，颜色。

{
    .....省略
    "properties": {
        "marker-color": "颜色值",
        "marker-symbol": "单个字为单字图标，否则为图片路径"
    }
}

GhostPaints
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Cesium：GeoJsonDataSource贴地
席木木的博客
11-14 547
Cesium：GeoJsonDataSource贴地
17 Cesium—矢量数据-GeoJsonDataSource
初八
03-27 2709
文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配 首先推荐几个在线解析工具： 在线生成 GeoJSON：http://geojson.io/ shp 数据转 GeoJSON 和 TopoJSON：http://mapshaper.org/ GeoJson 和 TopopJson 在线转换：http://jeffpaine.github.io/geojson-topojson/ JSON 在线解析及格式化：https://www.json.cn/ 其它等等 GeoJ..
【CesiumJS入门】（5）GooJSON的加载、更新、监听与销毁——GeoJsonDataSource应用
ReBeX
06-18 2544
GooJSON的加载、更新、监听与销毁——GeoJsonDataSource应用：包括了GeoJSON数据的加载、更新、销毁、监听等方法的类。
地理空间数据格式GeoJSON扫盲，在CesiumJS中如何加载。
最新发布
贝格前端工场的博客
06-25 1330
GeoJSON是一种基于JSON（JavaScript Object Notation）格式的地理数据表示标准，用于存储和交换地理空间数据。它可以描述点、线、面等地理要素的几何形状，并可以包含属性信息。GeoJSON作为一种通用的地理数据表示格式，可以在不同的GIS平台和工具之间进行数据交换和共享，促进了地理数据的互操作性。GeoJSON数据可以直接在Web地图中展示，例如在Cesium、Leaflet、Mapbox等地图库中加载GeoJSON数据来展示地理要素，如点、线、面等。地理分析。
cesium源码解析篇:GeoJsonDataSource(Polygon)
u010206379的博客
01-29 746
本篇主要内容为GeoJSONpolygonentity。
cesium实战(1)、cesium 加载本地json、GeoJson数据
csl125的博客
07-19 8671
将本地文件，例如：3dtileset.json 上传到服务器上，通过绝对地址可以访问到，地址例如：https://www.mapdata.com/map-data/3dtileset.json，在vue中访问注意有可能存在跨域，可以使用代理。注意，每个图层都有自己的名称和透明度属性，我们可以根据需要为它们设置不同的值。方法来将第二个图层设置为顶层图层，将第一个图层设置为底层图层。：将数据源在集合中的位置降低一个位置，移动图层降低一个位置。: 将数据源在集合中的位置降低一个位置。将数据源降低到集合的底部。
Cesium加载GeoJson数据
唐小爷的博客
01-20 4901
直接上图 GeoJson数据简介 GeoJSON是一种对各种地理数据结构进行编码的格式，符合JSON格式规范的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。 获取中国行政区边界GeoJson数据地址：http://datav.aliyun.com/portal/school/atlas/area_selector 加载GeoJson
cesium数据处理工具cesiumlab2.3.4
05-14
CesiumLab是围绕Cesium开源三维地球引擎的一套免费的完整工具，该资源为cesium最新2021版数据处理工具，可以处理地形，影像，模型，矢量房屋，max模型，BIN模型，倾斜摄影等，也可在线预览数据处理情况，资源难寻，...
49.（cesium篇）cesium接入geojson（地形透明）.zip
11-09
【cesium接入geojson】：GeoJSON是一种轻量级的数据交换格式，用于存储地理空间数据，如点、线、多边形等。在Cesium中，我们可以方便地将GeoJSON数据加载到场景中，展示地理信息。接入GeoJSON通常包括以下步骤： 1. ...
geotile:将 GeoJSON 数据拆分为矢量切片
07-09
var land = require ( './geojson/land.json' ) ; var borders = require ( './geojson/borders.json' ) ; var lakes = require ( './geojson/lakes.json' ) ; var places = require ( './geojson/places.json' ) ; ...
cesium数据处理工具 cesiumlab2 v2.1.5
03-14
5. **在线预览**：一个突出的特点是，CesiumLab2允许用户实时预览数据处理结果。这意味着在进行任何编辑或处理后，用户可以立即看到更改的效果，这对于快速验证和调试数据至关重要。 6. **GIS集成**：作为一款GIS...
中国1:100万水系线面geojson格式（cesium加载用）
05-25
标题中的“中国1:100万水系线面geojson格式（cesium加载用）”指的是一个地理信息数据集，该数据集包含了中国地区的水系信息，比例尺为1:100万，数据格式为GeoJSON。GeoJSON是一种基于JSON的地理编码格式，用于存储...
第六章 Cesium学习入门之添加Geojson数据（dataSource）
Aliavlue的博客
04-14 5389
Cesium学习入门之添加Geojson数据（dataSource）
Cesium加载矢量数据探索——从geojson到矢量切片
wenyeqv的博客
02-27 1407
通常来说，对于简单的shp数据，最常规的处理方式是通过geojson格式在cesium中进行加载，而cesium也为加载geojson及后续操作提供了丰富的api。
cesium学习记录05-加载数据（矢量、影像、地形、3D模型）
木卯彳亍的博客
08-10 4624
一个基于JSON的地理数据格式，Cesium支持GeoJSON的直接加载。KML (keyhole markup language)是以XML语言为基础开发的一种文件格式，用来描述和存储地理信息数据（点、线、面、图片等），是纯粹的xml文本格式， KMZ是Google Earth默认的输出文件格式，是一个经过ZIP格式压缩过的KML文件。/*** 添加卫星轨迹czml数据*/.add(Cesium.CzmlDataSource.load("../static/卫星轨迹.czml"))},
Cesium 加载geojson数据类型点线面
taozi8957的博客
11-21 2120
Cesium 加载geojson数据类型点线面
cesium根据geojson 加载水面材质
qq_41690869的博客
02-04 402
cesium根据geojson 加载水面材质
Cesium入门之八：Cesium加载矢量数据
九仞山的专栏
05-18 2132
详细介绍了什么是矢量数据，Cesium中常用的矢量数据格式及其属性和方法，并举例实现Cesium加载GeoJSON格式文件的方法
Cesium加载geojson并更改其材质
XFIRR的博客
04-12 741
看上去似乎没什么问题，运行之后代码并不会报错，也没有警告信息，但是就是出不来。而且是直接完全消失的那种。不论如何设置show:true都没有用。甚至重新调用viewer.entities.add都无法展示。今天碰到这个需求，在网上找了一大圈，发现就是使用了GeoJsonDataSource方法后遍历其的entities，然后修改材质即可。有兴趣的可以看一下。
cesiumjs 如何使用epsg:4490格式的地图服务
08-29
CesiumJS是一个基于WebGL的开源地理信息系统库，可以用于构建高性能的地图应用程序。要使用epsg:4490格式的地图服务，需要经过以下步骤： 1. 导入CesiumJS库：首先，在你的HTML文件中引入CesiumJS库的脚本文件，并在 `<head>` 标签中添加以下代码： ```html <script src="path_to_cesium/Build/Cesium/Cesium.js"></script> ``` 2. 创建地图容器：在你的HTML文件中，创建一个 `<div>` 元素作为地图容器，例如： ```html <div id="cesiumContainer"></div> ``` 3. 初始化Cesium Viewer：在JavaScript文件中，使用以下代码初始化Cesium Viewer： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); ``` 4. 添加epsg:4490格式的地图服务：使用 `viewer.imageryLayers` 属性来添加地图图层。可以通过以下代码添加epsg:4490格式的地图服务： ```javascript var BASE_URL = 'https://your_map_service_url/'; // 地图服务的基础URL地址 var epsg4490Layer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapServiceImageryProvider({ url : BASE_URL, layers : 'layer_name', // 地图服务的图层名 tilingScheme : new Cesium.GeographicTilingScheme(), // 使用GeographicTilingScheme来处理地理坐标 rectangle : Cesium.Rectangle.fromDegrees(west, south, east, north) // 设置地图的范围，以经纬度的方式（单位为度）定义 })); ``` 其中，`BASE_URL` 是地图服务的基础URL地址，`layer_name` 是地图服务的图层名，`west`、`south`、`east`、`north` 分别是地图的西、南、东、北边界经纬度。 5. 设定视图初始位置：可以使用以下代码设置视图的初始位置： ```javascript viewer.scene.camera.setView({ destination : Cesium.Rectangle.fromDegrees(west, south, east, north) // 设置视图的初始范围 }); ``` 通过以上步骤，你就可以在CesiumJS中使用epsg:4490格式的地图服务了。请注意，你需要替换代码中的URL和参数为你实际使用的地图服务信息。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值