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