Cesium(六)加载不同的矢量数据kml

1.kml 文件是什么

KML（Keyhole Markup Language）是谷歌公司创建的一种用于表示地理数据的文件格式，主要用于在地球浏览器（如 Google Earth 和 Google Maps）中展示地理信息，记录某一地点、或连续地点的时间、经度、纬度、海拔等地理信息数据。KML 是基于 XML 的格式，它允许用户以层次结构的方式定义地理特征、样式和属性。

2. 认识cesium提供的eiffel-tower-flyto.kml

2.1 文件结构解析

首先，我们看下官网提供的kml文件-github.com/CesiumGS/ei...，省流，这边直接粘贴过来：

xml 复制代码

<?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>

一眼就看出来是xml格式，那这段代码究竟是什么意思呢？将其中一些要素拉出来看：

<visibility> : 文档的可见性（1 表示可见，0 表示不可见）
<open> : 文档初始是否展开（0 表示收起，1 表示展开）。

<gx:Tour> 元素定义一个飞行路径（Tour）,用于播放动画；<gx:Playlist>包含一系列要执行的动作。

xml 复制代码

<gx:Tour id="Tour_69">
    <name>eiffel-tower-flyto</name>
    <gx:Playlist>

<gx:Wait>飞行动作为等待,设置等待的时间为0.2s。

xml 复制代码

<gx:Wait id="Wait_70">
    <gx:duration>0.2</gx:duration>
</gx:Wait>

<gx:FlyTo>元素定义飞行到的目标位置,设置经度（longitude）、纬度（latitude）、飞行高度（altitude）、相机的朝向（heading）、相机的倾斜角度(tilt)、到目标的距离（range）

xml 复制代码

<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>
        <!--altitudeMode高度模式，这里是相对海底（`relativeToSeaFloor`）-->
        <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode> 
    </LookAt>
</gx:FlyTo>

概括的说，就是这个KML文件描述了一个自动播放的飞行路径，首先将视角移动到埃菲尔铁塔的位置，然后在飞向新西兰的某个地点。gx:Tour 和 gx:FlyTo 是 Google Earth 的 KML 扩展的固定写法，提供了额外的功能来增强 KML 的表现力。关于这部分的详细介绍，可以查阅谷歌kml文档-游览

2.2 在项目中加载eiffel-tower-flyto.kml文件

2.2.1 静态资源移动到项目中

首先，当然是将上述完整的kml文件放置于vite3项目的public目录下。

2.2.2 在html上增加播放和暂停的按钮

在App.vue文件

vue 复制代码

<template>
  <div id="cesiumContainer" class="fullSize"></div>
  <div id="toolbar">
    <button type="button" class="cesium-button" id="playButton">播放 ▶️</button
    ><button type="button" class="cesium-button" id="terminateButton">暂停 ⏸</button>
  </div>
</template>
<style>
#app {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  text-align: center;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.fullSize {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  height: 100%;
}
#toolbar {
  margin: 5px;
  padding: 2px 5px;
  position: absolute;
}
.cesium-button {
  display: inline-block;
  position: relative;
  background: #303336;
  border: 1px solid #444;
  color: #edffff;
  fill: #edffff;
  border-radius: 4px;
  padding: 5px 12px;
  margin: 2px 3px;
  cursor: pointer;
  overflow: hidden;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cesium-button:hover {
  color: #fff;
  fill: #fff;
  background: #48b;
  border-color: #aef;
  box-shadow: 0 0 8px #fff;
}
.cesium-button:active {
  color: #000;
  fill: #000;
  background: #adf;
  border-color: #fff;
  box-shadow: 0 0 8px #fff;
}
</style>

2.2.3 加载kml资源文件

在cesium中，kml的资源文件是通过KmlDataSource加载上去，通过该方法，设置要加载的camera和canvas用来绑定。

Example:

js 复制代码

const viewer = new Cesium.Viewer('cesiumContainer');
viewer.dataSources.add(Cesium.KmlDataSource.load('../../SampleData/facilities.kmz',
     {
          camera: viewer.scene.camera,
          canvas: viewer.scene.canvas
     })
);

在项目中加载，得到kml中的资源信息dataSource,如下：

js 复制代码

  const viewer = new Cesium.Viewer("cesiumContainer");
  const options = {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
  };
  const dataSource = await viewer.dataSources.add(
    Cesium.KmlDataSource.load("/eiffel-tower-flyto.kml", options)
  );

KmlDataSource方法的属性设置除了这里的camera和canvas，还有以下：

credit：Cesium.Credit，与 KML 数据源相关联的版权信息。
sourceUri：覆盖用于解析相对链接和其他 KML 网络功能的 url。
clampToGround：默认为false
ellipsoid：用于地理计算的全球椭球体。
screenOverlayContainer：ScreenOverlay 图像的容器。

2.2.4 处理kml资源文件

kmlTours 是 KmlDataSource 对象的一个属性，包含 KML 文件中定义的所有飞行路径（Tour）。在项目中打印看看console.log(dataSource.kmlTours)

是个数组。拿第一个，得到需要的Tour:

js 复制代码

  const tour = dataSource.kmlTours[0];

接下来获取需要点击播放按钮，执行飞行步骤；点击暂停按钮，暂停飞行；

js 复制代码

  const playButton = document.getElementById("playButton");
  //点击播放按钮，执行tour.play(viewer.cesiumWidget)
  playButton.addEventListener("click", function () {
    tour.play(viewer.cesiumWidget);
  });

  const terminateButton = document.getElementById("terminateButton");
  //点击暂停按钮，执行tour.stop()
  terminateButton.addEventListener("click", function () {
    tour.stop();
  });

这个案例的最后，别忘记销毁的动作。

js 复制代码

onUnmounted(() => {
  viewer.dataSources.removeAll();
  viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
  viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
  //清除监听事件
  playButton.removeEventListener("click", function () {
    tour.play(viewer.cesiumWidget);
  });
  terminateButton.removeEventListener("click", function () {
    tour.stop();
  });
});

2.2.5 扩展

在飞行执行的过程中，可以对飞行的各个状态进行监听，打开控制台，看下执行结果：

js 复制代码

  tour.tourStart.addEventListener(function () {
    console.log("Start tour");
  });
  tour.tourEnd.addEventListener(function (terminated) {
    console.log(`${terminated ? "Terminate" : "End"} tour`);
  });
  tour.entryStart.addEventListener(function (entry) {
    console.log(`Play ${entry.type} (${entry.duration})`);
  });
  tour.entryEnd.addEventListener(function (entry, terminated) {
    console.log(`${terminated ? "Terminate" : "End"} ${entry.type}`);
  });

3. 认识cesium提供的facilities.kml

3.1 文件结构解析

首先，我们看下cesium提供的facilities.kml文件-github.com/CesiumGS/fa...，由于这个文件是在内容太多，节选一下其中三个完整的数据如下所示：

xml 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="GroundStation">
<BalloonStyle>
<text><![CDATA[<table style='color:white'><tr><td><b>Type</b></td><td>$[Role]</td></tr><tr><td><b>Status</b></td><td>$[Status]</td></tr><tr><td><b>Country</b></td><td>$[Country]</td></tr></table><div style='position:absolute; right:0; bottom:0;'><a href="http://www.agi.com"><img style='height:24px;width:70px' src='agiLogo.svg'/></a></div>]]></text><bgColor>#ff673005</bgColor><textColor>#ffffffff</textColor>
</BalloonStyle>
<IconStyle><Icon><href>GroundStation.png</href></Icon></IconStyle>
</Style>

<Style id="RadarStation">
<BalloonStyle>
<text><![CDATA[<table style='color:white'><tr><td><b>Type</b></td><td>$[Role]</td></tr><tr><td><b>Status</b></td><td>$[Status]</td></tr><tr><td><b>Country</b></td><td>$[Country]</td></tr></table><div style='position:absolute; right:0; bottom:0;'><a href="http://www.agi.com"><img style='height:24px;width:70px;' src='agiLogo.svg'/></a></div>]]></text><bgColor>#ff673005</bgColor><textColor>#ffffffff</textColor>
</BalloonStyle>
<IconStyle><Icon><href>RadarStation.png</href></Icon></IconStyle>
</Style>

<Style id="LaunchPad">
<BalloonStyle>
<text><![CDATA[<table style='color:white'><tr><td><b>Type</b></td><td>$[Role]</td></tr><tr><td><b>Status</b></td><td>$[Status]</td></tr><tr><td><b>Country</b></td><td>$[Country]</td></tr></table><div style='position:absolute; right:0; bottom:0;'><a href="http://www.agi.com"><img style='height:24px;width:70px;' src='agiLogo.svg'/></a></div>]]></text><bgColor>#ff673005</bgColor><textColor>#ffffffff</textColor>
</BalloonStyle>
<IconStyle><Icon><href>LaunchPad.png</href></Icon></IconStyle>
</Style>

<Placemark>
<name>MACRES Ground Receiving Station</name>
<styleUrl>#GroundStation</styleUrl>
<Point><coordinates>102.339,3.463</coordinates></Point>
<ExtendedData>
<Data name="Role"><value>Ground Station</value></Data><Data name="Status"><value>Active</value></Data><Data name="Country"><value>Malaysia</value></Data>
</ExtendedData>
</Placemark>

<Placemark>
<name>ALCOR STDN KMRQ</name>
<styleUrl>#RadarStation</styleUrl>
<Point><coordinates>167.48284936,9.39859958</coordinates></Point>
<ExtendedData>
<Data name="Role"><value>Radar Station</value></Data><Data name="Status"><value>Active</value></Data><Data name="Country"><value>Marshall Islands</value></Data>
</ExtendedData>
</Placemark>

<Placemark>
<name>Guiana Space Center - ZL3 (STDN KR3P)</name>
<styleUrl>#LaunchPad</styleUrl>
<Point><coordinates>-52.75178147,5.24036314</coordinates></Point>
<ExtendedData>
<Data name="Role"><value>Launch Pad</value></Data><Data name="Status"><value>Active</value></Data><Data name="Country"><value>French Guiana</value></Data>
</ExtendedData>
</Placemark>

</Document></kml>

这样看起来结构清晰多了。来解析下该kml文件。先看样式定义部分：

<Style id="GroundStation">定义一个样式元素，id 属性指定样式的唯一标识符为 GroundStation。 -<BalloonStyle>:用于配置地图上标记的气泡（信息窗口）样式。其中的<text>定义气泡中显示的内容，这里使用 CDATA 来支持 HTML 格式的内容,该内容包括一个表格，显示三个字段：Type、Status 和 Country。这些字段的值将动态替换为 $[Role]、$[Status] 和 $[Country];<bgColor>设置气泡的背景颜色。这里使用的是十六进制颜色值，表示半透明的颜色;<textColor>设置气泡文本的颜色，这里是白色（#ffffff）;还设置一个height:24px;width:70px的logo图标在信息窗口中，效果如下：

<IconStyle>:用于配置地图上标记的图标样式。这里指定图标的图像文件，<href>GroundStation.png</href>指向名为 GroundStation.png 的文件。

再来看看应用部分：

<Placemark>:定义一个地理标记，表示地图上的一个特定位置。
<name>:指定标记的名称,会显示在标注的位置。
<Point>:定义标记的地理位置。
<ExtendedData>:用于提供附加的数据，通常是键值对形式;这里用于跟信息窗口的动态参数对应。

3.2 在项目中加载facilities.kml文件

3.2.1 静态资源移动到项目中

这里除了facilities.kml文件，还要引入样式相关的图片文件。在public目录下新建文件夹facility ,将github-facilities上的内容移动到facility目录中。

3.2.2 加载kml资源文件

加载方式同eiffel-tower-flyto.kml

js 复制代码

<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
onMounted(async () => {
  const viewer = new Cesium.Viewer("cesiumContainer");

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

  viewer.dataSources.add(Cesium.KmlDataSource.load("/facility/facilities.kml", options));
});
</script>

看下效果：

4. 认识cesium提供的bikeRide.kml

4.1 文件结构解析

首先，bikeRide.kml文件-github.com/CesiumGS/bi...，由于这个文件是在内容太多，节选一下其中几段数据如下所示：

xml 复制代码

<?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:atom="http://www.w3.org/2005/Atom">
<Document>
<open>1</open>
<visibility>1</visibility>
<name><![CDATA[Schuylkill River Trail Bike Ride]]></name>

<Style id="track">
<LineStyle><color>7f0000ff</color><width>4</width></LineStyle>
<IconStyle>
<scale>1.3</scale>
<Icon><href>http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png</href></Icon>
</IconStyle>
</Style>
<Style id="start"><IconStyle>
<scale>1.3</scale>
<Icon><href>http://maps.google.com/mapfiles/kml/paddle/grn-circle.png</href></Icon>
<hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
</IconStyle></Style>

<Style id="end"><IconStyle>
<scale>1.3</scale>
<Icon><href>http://maps.google.com/mapfiles/kml/paddle/red-circle.png</href></Icon>
<hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/>
</IconStyle></Style>

<Style id="statistics"><IconStyle>
<scale>1.3</scale>
<Icon><href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href></Icon>
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
</IconStyle>
</Style>

<Style id="waypoint"><IconStyle>
<scale>1.3</scale>
<Icon><href>http://maps.google.com/mapfiles/kml/pushpin/blue-pushpin.png</href></Icon>
<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
</IconStyle>
</Style>


<Schema id="schema">
<gx:SimpleArrayField name="power" type="int">
<displayName><![CDATA[Power (W)]]></displayName>
</gx:SimpleArrayField>
<gx:SimpleArrayField name="cadence" type="int">
<displayName><![CDATA[Cadence (rpm)]]></displayName>
</gx:SimpleArrayField>
<gx:SimpleArrayField name="heart_rate" type="int">
<displayName><![CDATA[Heart rate (bpm)]]></displayName>
</gx:SimpleArrayField>
</Schema>

<Placemark>
<name><![CDATA[Schuylkill River Trail Bike Ride (Start)]]></name>
<description><![CDATA[]]></description>
<TimeStamp><when>2013-07-25T19:33:58.000Z</when></TimeStamp>
<styleUrl>#start</styleUrl>
<Point>
<coordinates>-75.300238,40.109584,-2.799999952316284</coordinates>
</Point>
</Placemark>

<Placemark id="tour">
<name><![CDATA[Matt]]></name>
<description><![CDATA[
Name: Schuylkill River Trail Bike Ride<br>
]]></description>
<styleUrl>#track</styleUrl>
<ExtendedData>
<Data name="type"><value><![CDATA[biking]]></value></Data>
</ExtendedData>
<gx:MultiTrack>
<altitudeMode>absolute</altitudeMode>
<gx:interpolate>1</gx:interpolate>
<gx:Track>
<when>2013-07-25T19:33:58.000Z</when>
<gx:coord>-75.300238 40.109584 -2.799999952316284</gx:coord>
<when>2013-07-25T19:33:59.000Z</when>
<gx:coord>-75.300234 40.109597 38.0</gx:coord>
<when>2013-07-25T19:34:00.000Z</when>
<gx:coord>-75.300214 40.109641 36.099998474121094</gx:coord>
<when>2013-07-25T19:34:42.000Z</when>
<gx:coord>-75.300441 40.109397 29.100000381469727</gx:coord>
<when>2013-07-25T19:35:04.000Z</when>
<gx:coord>-75.300476 40.109341 28.0</gx:coord>
<when>2013-07-25T19:35:05.000Z</when>
<gx:coord>-75.300515 40.109283 26.299999237060547</gx:coord>
<when>2013-07-25T19:35:32.000Z</when>
<gx:coord>-75.302012 40.108413 5.300000190734863</gx:coord>
<when>2013-07-25T19:35:39.000Z</when>
<gx:coord>-75.302582 40.108266 2.0</gx:coord>
<when>2013-07-25T19:35:40.000Z</when>
<gx:coord>-75.302664 40.108251 1.5</gx:coord>
<when>2013-07-25T19:35:41.000Z</when>
<gx:coord>-75.302746 40.108235 0.699999988079071</gx:coord>
<when>2013-07-25T19:35:42.000Z</when>
<gx:coord>-75.302819 40.108224 -0.10000000149011612</gx:coord>
<when>2013-07-25T19:35:43.000Z</when>
<gx:coord>-75.302883 40.108209 0.30000001192092896</gx:coord>
<when>2013-07-25T19:35:44.000Z</when>
<gx:coord>-75.302943 40.108193 0.0</gx:coord>
<when>2013-07-25T19:35:45.000Z</when>
<gx:coord>-75.303 40.108175 -0.10000000149011612</gx:coord>
<gx:coord>-75.303525 40.107947 0.800000011920929</gx:coord>
<when>2013-07-25T19:36:00.000Z</when>
<gx:coord>-75.303477 40.107917 0.800000011920929</gx:coord>


<when>2013-07-25T19:36:30.000Z</when>
<gx:coord>-75.300397 40.109523 25.5</gx:coord>
<when>2013-07-25T19:36:31.000Z</when>
<gx:coord>-75.300397 40.109552 26.0</gx:coord>
<when>2013-07-25T19:36:33.999Z</when>
<gx:coord>-75.300394 40.109589 28.299999237060547</gx:coord>
<when>2013-07-25T19:36:35.000Z</when>
<gx:coord>-75.300397 40.109601 29.100000381469727</gx:coord>
<when>2013-07-25T19:36:38.000Z</when>
<gx:coord>-75.30039 40.10964 30.799999237060547</gx:coord>
<when>2013-07-25T19:36:39.000Z</when>
<gx:coord>-75.300381 40.109649 32.20000076293945</gx:coord>
<when>2013-07-25T19:36:47.999Z</when>
<gx:coord>-75.300355 40.109624 35.70000076293945</gx:coord>
<when>2013-07-25T19:36:49.000Z</when>
<gx:coord>-75.3003 40.109628 34.099998474121094</gx:coord>
<when>2013-07-25T19:37:14.000Z</when>
<gx:coord>-75.300243 40.109622 33.900001525878906</gx:coord>
<when>2013-07-25T19:37:15.000Z</when>
<gx:coord>-75.300232 40.10962 34.20000076293945</gx:coord>
<when>2013-07-25T19:37:59.000Z</when>
<gx:coord>-75.300255 40.109655 35.29999923706055</gx:coord>
<when>2013-07-25T19:38:00.000Z</when>
<gx:coord>-75.300242 40.109664 34.70000076293945</gx:coord>
<when>2013-07-25T19:38:02.000Z</when>
<gx:coord>-75.300212 40.109686 34.29999923706055</gx:coord>
<when>2013-07-25T19:38:03.000Z</when>
<gx:coord>-75.300196 40.109696 34.0</gx:coord>
<when>2013-07-25T19:38:06.000Z</when>
<gx:coord>-75.300147 40.109702 33.79999923706055</gx:coord>
<when>2013-07-25T19:38:07.000Z</when>
<gx:coord>-75.300127 40.109701 33.599998474121094</gx:coord>
<when>2013-07-25T19:38:11.000Z</when>
<gx:coord>-75.300071 40.10971 33.400001525878906</gx:coord>
<when>2013-07-25T19:38:12.000Z</when>
<gx:coord>-75.300061 40.10971 33.400001525878906</gx:coord>
<when>2013-07-25T19:38:25.000Z</when>
<gx:coord>-75.30001 40.109709 33.29999923706055</gx:coord>

<ExtendedData>
<SchemaData schemaUrl="#schema">
</SchemaData>
</ExtendedData>
</gx:Track>
</gx:MultiTrack>
</Placemark>

<Placemark>
<name><![CDATA[Schuylkill River Trail Bike Ride (End)]]></name>
<TimeStamp><when>2013-07-25T19:38:25.000Z</when></TimeStamp>
<styleUrl>#end</styleUrl>
<Point>
<coordinates>-75.30001 40.109709 33.29999923706055</coordinates>
</Point>
</Placemark>

</Document>
</kml>

这段代码是一个 KML 文件的完整示例，用于描述一段骑行路线，包括起点、终点和经过的轨迹。

<Style id="track">定义轨迹的线条样式。
<Style id="start"> 和 <Style id="end">起点和终点的图标样式。
<Style id="statistics"> 和 <Style id="waypoint">定义统计数据和途经点的图标样式，使用不同的图标。(这里没有用上该样式)
<Schema>定义了一个包含功率、踏频和心率的简单数组字段，用于扩展数据。(这里没有用上该样式)
<gx:MultiTrack>表示一段多轨迹的运动数据,在时间序列上记录多个位置点。
- <gx:Track>表示一条轨迹的具体数据点。
  - <when> 记录了这个位置点的时间点。

4.2 在项目中加载bikeRide.kml文件

4.2.1 静态资源移动到项目中

将该github.com/CesiumGS/bi...文件下载移动到项目中的public目录下

4.2.2 加载kml资源文件

替换App.vue里面的文件路径。

js 复制代码

 const viewer = new Cesium.Viewer("cesiumContainer");
  const options = {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
  };
 viewer.dataSources.add(
    Cesium.KmlDataSource.load("/bikeRide.kml", options)
  );

4.2.3 处理kml资源文件

仅仅是加载是不够的，要让运动轨迹显示出来，得做额外的处理工作。

js 复制代码

  const dataSource = await viewer.dataSources.add(
    Cesium.KmlDataSource.load("/bikeRide.kml", options)
  );
 // 先不执行动画
  viewer.clock.shouldAnimate = false;
  const rider = dataSource.entities.getById("tour");
  //在 Cesium 中将视图飞到一个名为 `tour` 的实体。
  viewer.flyTo(rider).then(function () {
    // 相机跟随这个实体的移动而移动
    viewer.trackedEntity = rider;
    // 确保被跟踪的实体也被选中
    viewer.selectedEntity = viewer.trackedEntity;
    // 动画速度
    viewer.clock.multiplier = 30;
    // 开始动画
    viewer.clock.shouldAnimate = true;
  });

看下效果：

轨迹是不停在动的。

5. 认识cesium提供的gdpPerCapita2008.kmz

5.1 文件结构解析

首先，找到官网在github上提供的该文件-github.com/CesiumGS/gd...，想直接打开预览看下文件结构，是不行的。因为KMZ 文件实际上是一个 ZIP 文件！

KMZ 是 KML 文件的压缩版本，将文件下载下来，后缀名改为zip，然后解压，解压后的目录结构:

doc.kml
files
- flag
  - cj.gif
  - mf.gif
  - io.gif
  - sb.gif
  - ......
- img
  - logo2.png

照例，节选doc.kml其中一段代码看看:

xml 复制代码

<Placemark>
    <styleUrl>#kmlfactbook_style1</styleUrl>
    <Style>
        <PolyStyle><color>E50000ff</color></PolyStyle>
        <IconStyle><Icon><href>files/flag/qa.gif</href></Icon></IconStyle>
    </Style>
    <name><![CDATA[Qatar]]></name>
    <Snippet></Snippet>
    <ExtendedData>
        <Data name='cc'><value>qa</value></Data>
        <Data name='name'><value><![CDATA[Qatar]]></value></Data>
        <Data name='data'><value>87,600</value></Data>
        <Data name='rank'><value>1</value></Data>
    </ExtendedData>
    <MultiGeometry>
        <altitudeMode>relativeToGround</altitudeMode>
        <extrude>1</extrude>
        <Point>
            <coordinates>51.192,25.0784,2000000</coordinates>
            <altitudeMode>relativeToGround</altitudeMode>
        </Point>
        <Polygon>
            <extrude>1</extrude>
            <altitudeMode>relativeToGround</altitudeMode>
            <outerBoundaryIs>
            <LinearRing>
                <coordinates>51.52,25.38,2000000 51.57,25.91,2000000 51.04,26.05,2000000 50.83,24.75,2000000 51.22,24.62,2000000 51.52,25.38,2000000 </coordinates>
            </LinearRing>
            </outerBoundaryIs>
        </Polygon>
    </MultiGeometry>
</Placemark>

<styleUrl>:指定样式的id。
<Style>:定义与该标记相关的样式。<PolyStyle>设置多边形的颜色;<IconStyle>设置图标的样式。
<name>:标记的名称，表示该地理标记指向的地点。
<Snippet>:此字段通常用于提供简短的描述。
<ExtendedData>:提供附加的、结构化的数据，其中<Data>标签中对应的name与信息窗中动态标签对应，作用就是在信息窗中展示特定标记的value值。
<MultiGeometry>:定义多个几何形状（如点、线、多边形），可以组合使用。<altitudeMode>指定高度相对于地面;<extrude>指定多边形是否应从地面向上延伸，设置为 1 表示延伸。
<Polygon>:定义一个多边形区域。

5.2 在项目中加载gdpPerCapita2008.kmz文件

5.2.1 静态资源移动到项目中

首先，当然是将github.com/CesiumGS/gd...文件放置于vite3项目的public目录下。

5.2.2 加载kmz资源文件

与之前加载的步骤一致。重复代码省略。

js 复制代码

 viewer.dataSources.add(Cesium.KmlDataSource.load("/gdpPerCapita2008.kmz", options))

看下效果：

6. 总结

通过对cesium提供的这4个kml案例，可以联想到适用的场景还是很多的。KML 文件在 Cesium 中的应用场景非常广泛，适用于多种行业和用途，KML 提供了一种灵活和强大的方式来处理和展示地理信息。