Cesium源码解读系列（一）：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);    // 添加这个datasourceconst 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 specifiedif (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": "单个字为单字图标，否则为图片路径"}
}

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

Alamofire源码解读系列(九)之响应封装(Response)
本篇主要带来Alamofire中Response的解读前言在每篇文章的前言部分,我都会把我认为的本篇最重要的内容提前讲一下.我更想同大家分享这些顶级框架在设计和编码层次究竟有哪些过人的地方?当然, ...
Alamofire源码解读系列(五)之结果封装(Result)
本篇讲解Result的封装前言有时候,我们会根据现实中的事物来对程序中的某个业务关系进行抽象,这句话很难理解.在Alamofire中,使用Response来描述请求后的结果.我们都知道Alamof ...
py-faster-rcnn源码解读系列
转载自: py-faster-rcnn源码解读系列(一)--train_faster_rcnn_alt_opt.py - sunyiyou9的博客 - 博客频道 - CSDN.NET http://b ...
Hadoop源码解读系列目录
Hadoop源码解读系列 1.hadoop源码|common模块-configuration详解 2.hadoop源码|core模块-序列化与压缩详解 3.hadoop源码|core模块-远程调用与N ...
Alamofire源码解读系列(十二)之请求(Request)
本篇是Alamofire中的请求抽象层的讲解前言在Alamofire中,围绕着Request,设计了很多额外的特性,这也恰恰表明,Request是所有请求的基础部分和发起点.这无疑给我们一个Req ...
Alamofire源码解读系列(七)之网络监控(NetworkReachabilityManager)
Alamofire源码解读系列(七)之网络监控(NetworkReachabilityManager) 本篇主要讲解iOS开发中的网络监控前言在开发中,有时候我们需要获取这些信息: 手机是否联网 ...
spring源码解读系列（八）:观察者模式--spring监听器详解
一.前言在前面的文章spring源码解读系列(七)中,我们继续剖析了spring的核心refresh()方法中的registerBeanPostProcessors(beanFactory)(完成B ...
【注意力机制集锦】Channel Attention通道注意力网络结构、源码解读系列一
Channel Attention网络结构.源码解读系列一 SE-Net.SK-Net与CBAM 1 SENet 原文链接:SENet原文源码链接:SENet源码 Squeeze-and-Excit ...
Alamofire源码解读系列(十一)之多表单(MultipartFormData)
本篇讲解跟上传数据相关的多表单前言我相信应该有不少的开发者不明白多表单是怎么一回事,然而事实上,多表单确实很简单.试想一下,如果有多个不同类型的文件(png/txt/mp3/pdf等等)需要上传给 ...

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

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

最新文章

热门文章