原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=GeoJSON%20simplestyle.html&label=All

效果如下所示：

示例代码如下：关于simplestyle详见注释提供的链接进行学习。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * 加载包含 simplestyle 信息的 GeoJSON 文件。
 * 要了解更多关于 simplestyle 的内容，
 * 请参阅 https://github.com/mapbox/simplestyle-spec
 * 
 * 1.0版本规范：https://github.com/mapbox/simplestyle-spec/blob/master/1.0.0/README.md
 * 1.1版本规范：https://github.com/mapbox/simplestyle-spec/blob/master/1.1.0/README.md
 */

/**
 * 在此特定示例中，每个实体的名称均设置为其 maki 图标标识符。
 * 点击任意广告牌将在 信息框(Cesium内置的infoBox组件) 中显示其对应标识符。
 */

const viewer = new Cesium.Viewer("cesiumContainer", {
  sceneMode: Cesium.SceneMode.SCENE2D,
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  timeline: false,
  animation: false,
  shouldAnimate: true,
});

viewer.cesiumWidget.creditContainer.style.display = "none";

const dataSource = Cesium.GeoJsonDataSource.load(
  "../SampleData/simplestyles.geojson",
);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);