GeoJsonDataSource如何处理geojson格式的数据

想写这个系列的文章起因，是因为项目上的“图层管理”模块功能进行了更改。里面涉及到了一种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": "单个字为单字图标，否则为图片路径"    }}

本文转自 https://blog.csdn.net/GhostPaints/article/details/124233933，如有侵权，请联系删除。