中心思想:使用Cesium.GeoJsonDataSource.load()方法读取geoJson文件,解析后通过viewer.dataSources.add()方法添加到viewer中。
实现代码:
const addGeojsonArea = (viewer, geoJsonFile) => {
return isExistFile(geojson).then(res => {
if (!res) return null
const promise = Cesium.GeoJsonDataSource.load(geoJsonFile, {
clampToGround: true // 是否贴地面
});
return promise.then(function(dataSource) {
const entities = dataSource.entities.values;
const colors = {}; // 存储json中定义的颜色值Map
const colorHash = {}; // 存储计算后的颜色值Map
for (let i = 0; i < entities.length; i++) {
const entity = entities[i];
const name = entity.name;
if (!colors[name]) {
colors[name] = entity.properties.getValue('color').color
}
let color = colorHash[name] || Cesium.Color.fromCssColorString(entity.properties.getValue('color').color);
if (!color) {
color = Cesium.Color.fromRandom({
alpha : 1.0
}); // 随机取色,可自定义
}
colorHash[name] = color;
entity.polygon.material = color;
entity.polygon.outline = true; // 是否显示边界线
}
return viewer.dataSources.add(dataSource)
})
})
}
// 调用上述方法
const coverage = await addGeojsonArea(viewer, geoJsonFile)
// coverage.show = false; // 显示隐藏