原文链接及内容

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

效果如下视频所示：这里我将时钟设置为2倍速。

控制台输出结果如下：

示例代码如下：

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
79
80
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,
};

let tour = null;
viewer.dataSources
  .add(
    Cesium.KmlDataSource.load(
      "../SampleData/kml/eiffel-tower-flyto.kml",//文件名翻译为：埃菲尔铁塔飞行
      options,
    ),
  )
  .then(function (dataSource) {
    /**
     * 这里的dataSource的类型为KmlDataSource，
     * kmlTours:获取用于在指定时间间隔内引导相机至预设目的地的 KML 游览。类型为Array.<KmlTour>
     */
    tour = dataSource.kmlTours[0];
    //tourStart:当游览开始播放时触发该事件
    tour.tourStart.addEventListener(function () {
      console.log("开始旅行");
    });
    /**
     * tourEnd：当所有播放列表条目播放完毕或游览播放被取消时触发该事件。
     * 若游览播放被终止，事件回调将附带 terminated=true 参数。
     */
    tour.tourEnd.addEventListener(function (terminated) {
      console.log(`${terminated ? "游览终止" : "游览结束"} tour`);
    });
    /**
     * entryStart:当播放列表中的条目开始播放时触发该事件。
     * 事件回调函数的第一个参数(下面的entry参数)为当前播放条目。
     * entry.type：
     *  1. KmlTourFlyTo:将 KmlTour 过渡至下一目的地。该过渡通过指定的 flyToMode 在给定秒数内完成。
     *  2. KmlTourWait:暂停 KmlTour 指定的秒数。
     */
    tour.entryStart.addEventListener(function (entry) {
      console.log(`开始播放：${entry.type} (时长：${entry.duration})`);
    });
    /**
     * 当播放列表中的条目结束播放时触发该事件。
     * 事件回调函数将接收以下参数：
     *   1. entry - 条目对象  
     *   2. terminated - 若播放是通过调用 KmlTour#stop 终止的则为 true
     */
    tour.entryEnd.addEventListener(function (entry, terminated) {
      console.log(`${terminated ? "游览终止" : "游览结束"} ${entry.type}`);
    });
  });

Sandcastle.addToolbarButton("开始(游览)", function () {
  tour.play(viewer.cesiumWidget);
});

Sandcastle.addToolbarButton("终止(游览)", function () {
  tour.stop();
});

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

加载的kml文件内容如下:

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
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
    <Document id="Document_65">
        <name>Eiffel Tower Flyto</name>
        <visibility>1</visibility>
        <open>0</open>
        <Folder id="Folder_66">
            <name>AutoPlay</name>
            <visibility>1</visibility>
            <open>0</open>
        </Folder>
        <gx:Tour id="Tour_69">
            <name>eiffel-tower-flyto</name>
            <gx:Playlist>
                <gx:Wait id="Wait_70">
                    <gx:duration>0.2</gx:duration>
                </gx:Wait>
                <gx:FlyTo id="FlyTo_74">
                    <gx:duration>6</gx:duration>
                    <LookAt id="LookAt_72">
                        <longitude>2.29448129999356</longitude>
                        <latitude>48.8583700998311</latitude>
                        <altitude>196.5753973788714</altitude>
                        <heading>0.0</heading>
                        <tilt>67.0</tilt>
                        <range>1500.0</range>
                        <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
                    </LookAt>
                </gx:FlyTo>
                <gx:Wait id="Wait_75">
                    <gx:duration>4</gx:duration>
                </gx:Wait>
                <gx:FlyTo id="FlyTo_74">
                    <gx:duration>6</gx:duration>
                    <Camera>
                        <longitude>170.157</longitude>
                        <latitude>-43.671</latitude>
                        <altitude>9700</altitude>
                        <heading>-6.333</heading>
                        <tilt>33.5</tilt>
                    </Camera>
                </gx:FlyTo>
            </gx:Playlist>
        </gx:Tour>
    </Document>
</kml>