Cesium快速入门到精通系列教程四：加载渲染GEOJSON数据

在 Cesium 1.93 中加载和渲染 GeoJSON 数据主要通过 GeoJsonDataSource 实现

一、基础加载方法

1. ​​直接加载本地/远程文件​​

  const viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false, //设置搜索框可见
    homeButton: false, // 返回初始位置键是否可见
    sceneModePicker: false, // 查看器选择模式选择键是否可见
    baseLayerPicker: false, // 图层选择键是否可见
    navigationHelpButton: false, // 是否显示帮助按钮
    animation: false, // 是否显示播放控制按钮
    timeline: false, // 是否显示时间轴
    fullscreenButton: false, // 是否显示全屏按钮
  });

  viewer.dataSources.add(Cesium.GeoJsonDataSource.load('https://geo.datav.aliyun.com/areas_v3/bound/100000.json', {
    stroke: Cesium.Color.HOTPINK,
    fill: Cesium.Color.BLUE,
    strokeWidth: 3,
    markerSymbol: '?'
  }));

// https://geo.datav.aliyun.com/areas_v3/bound/100000.json也可以改成本地数据

 或者使用以下方式

  const viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false, //设置搜索框可见
    homeButton: false, // 返回初始位置键是否可见
    sceneModePicker: false, // 查看器选择模式选择键是否可见
    baseLayerPicker: false, // 图层选择键是否可见
    navigationHelpButton: false, // 是否显示帮助按钮
    animation: false, // 是否显示播放控制按钮
    timeline: false, // 是否显示时间轴
    fullscreenButton: false, // 是否显示全屏按钮
  });

  Cesium.GeoJsonDataSource.load('https://geo.datav.aliyun.com/areas_v3/bound/100000.json', {
    stroke: Cesium.Color.HOTPINK,
    fill: Cesium.Color.PINK,
    strokeWidth: 3,
    markerSymbol: '?'
  }).then(dataSource => {
    viewer.dataSources.add(dataSource);
  });

二、样式自定义

1. ​​全局样式配置​​

加载时通过 options 参数设置默认样式：

viewer.dataSources.add(
  Cesium.GeoJsonDataSource.load('data/roads.geojson', {
    stroke: Cesium.Color.HOTPINK,  // 轮廓颜色
    fill: Cesium.Color.PINK,       // 填充颜色
    strokeWidth: 3                 // 轮廓线宽
  })
);

三、性能优化（大规模数据）

当 GeoJSON 包含数万+面片时，建议使用 Primitive 替代 Entity：

const features = geojsonData.features;
const instances = [];

for (const feature of features) {
  const geometry = new Cesium.PolygonGeometry({
    polygonHierarchy: Cesium.PolygonHierarchy.fromDegreesArray(feature.geometry.coordinates[0])
  });
  instances.push(new Cesium.GeometryInstance({ geometry }));
}

const primitive = new Cesium.Primitive({
  geometryInstances,
  appearance: new Cesium.EllipsoidSurfaceAppearance({
    material: Cesium.Material.fromType('Color', {
      uniforms: { color: new Cesium.Color(1.0, 0.0, 0.0, 0.8) }
    })
  })
});
viewer.scene.primitives.add(primitive);