原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=KML.html

效果如下视频所示：

示例代码如下：

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const options = {
  camera: viewer.scene.camera,
  canvas: viewer.scene.canvas,
  screenOverlayContainer: viewer.container,
};

Sandcastle.addToolbarMenu(
  [
    {
      text: "全球科学设施的KML数据",
      onselect: function () {
        viewer.camera.flyHome(0);
        viewer.dataSources.add(
          Cesium.KmlDataSource.load(
            "../SampleData/kml/facilities/facilities.kml",
            options,
          ),
        );
      },
    },
    {
      text: "2008 年人均GDP的KMZ数据",
      onselect: function () {
        viewer.camera.flyHome(0);
        viewer.dataSources.add(
          Cesium.KmlDataSource.load(
            "../SampleData/kml/gdpPerCapita2008.kmz",
            options,
          ),
        );
      },
    },
    {
      text: "自行车骑行轨迹的KML数据",
      onselect: function () {
        viewer.dataSources
          .add(
            Cesium.KmlDataSource.load(
              "../SampleData/kml/bikeRide.kml",
              options,
            ),
          )
          .then(function (dataSource) {
            viewer.clock.shouldAnimate = false;
            const rider = dataSource.entities.getById("tour");
            viewer.flyTo(rider).then(function () {
              viewer.trackedEntity = rider;
              viewer.selectedEntity = viewer.trackedEntity;
              viewer.clock.multiplier = 30;
              viewer.clock.shouldAnimate = true;
            });
          });
      },
    },
  ],
  "toolbar",
);

Sandcastle.reset = function () {
  viewer.dataSources.removeAll();
  viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
  viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
};