1 加载原理

GeoJsonDataSource可以直接对geojson数据解析，并渲染到地图；无需手动解析数据格式，可以满足一般性需求

2 代码

加载一份兰州市道路数据；👉数据下载

                                        
import {
  Viewer,
  GeoJsonDataSource,
  Color,
  Ion
} from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
// 如果底图的影像图不出来。在cesium官网复制，添加自己的token即可
// Ion.defaultAccessToken = ""
// 1 初始化viewer
var V = new Viewer('gisContainer');
// 2 隐藏底部logo
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display ='none';
// 3 使用GeoJsonDataSource加载器加载geojson文件
var promise=GeoJsonDataSource.load('./statics/geojson/兰州市道路数据.json');
promise.then(function(dataSource) {
  // 4 将结果添加到viewer中，即可显示内容
  V.dataSources.add(dataSource);
  V.flyTo(promise);
})
                                        
                                    

数据渲染默认是黄色

加载一份杭州市滨江区部分道路数据

3 自定义每个实体的样式

上面整个source使用统一的样式；我们也可以对source中每个实体设置不同的样式；根据geojson数据的属性字段，比如name、长度、区域等等

代码如下

                                        
import {
  Viewer,
  GeoJsonDataSource,
  Color,
  Ion
} from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
// Ion.defaultAccessToken = ""
// 1 初始化viewer
var V = new Viewer('gisContainer');
// 2 隐藏底部logo
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display ='none';
// 3 使用GeoJsonDataSource加载器加载geojson文件
var promise=GeoJsonDataSource.load('./statics/geojson/binjiang_road.json');
promise.then(function(dataSource) {
  // 4 将结果添加到viewer中，即可显示内容
  V.dataSources.add(dataSource);
  // 4.1 设置单个实体的样式
  var entities = dataSource.entities.values;
  for (var i = 0; i < entities.length; i++) {
    var entity = entities[i];
    if(i%2===1){
      entity.polyline.material=Color.RED
    }else{
      entity.polyline.material=Color.YELLOW
      entity.polyline.width=2
    }
  }
  V.flyTo(promise);
})