Cesium基础教程_cesium教程

一、概述

Cesium是国外一个基于javascript的地图引擎，支持3D、2D、2.5D形式的展示，可以自行绘制图形、高亮区域，并提供良好的触摸支持，并支持大多数的浏览器和移动端。

• Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。
• Cesium 使用WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL。
• Cesium是基于Apache2.0 许可的开源程序。它可以免费的用于商业和非商业用途。

二、安装

当前案例基于vue3+vite构建

1.安装插件

插件地址

npm i cesium vite-plugin-cesium vite -D
# yarn add cesium vite-plugin-cesium vite -D
1
2

2.配置

vite.config.js配置：

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [cesium()]
});
1
2
3
4
5

三、创建一个Viewer

1、基础Viewer

<template>
    <div id="cesiumContainer"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { Viewer } from 'cesium';
onMounted(() => {
    const viewer = new Viewer('cesiumContainer');
})
</script>
<style lang="scss" scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12

2、辅助按钮

1. Geocoder : 一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
2. HomeButton : 首页位置，点击之后将视图跳转到默认视角。
3. SceneModePicker : 切换2D、3D 和 Columbus View (CV) 模式。
4. BaseLayerPicker : 选择三维数字地球的底图（imagery and terrain）。
5. NavigationHelpButton : 帮助提示，如何操作数字地球。
6. Animation :控制视窗动画的播放速度。
7. CreditsDisplay : 展示商标版权和数据源。
8. Timeline : 展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
9. FullscreenButton : 视察全屏按钮。

四、 Cesium Ion

在我们使用Cesium的过程中，如果没有申请ion，同时没有自己的数据源用的cesium提供的数据源，viewer的底部常常会提示一行小的英文字母。大意就是需要申请access token.

1. 首先需要去注册一个免费的Cesium ion账户。
2. 打开 Cesium ion 然后注册一个新的账户。
3. 点击"Access Token"，跳转到Access Tokens page页面。
4. 选择Default默认的access token拷贝到contents中。
   
   在创建Cesium Viewer的时候，将access token填为自己的access token即可。

Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';
1

此时底部的小字就消失了！
以上就能畅快的访问Cesium ion提供的各种数据源了。

五、添加图层

Cesium应用程序另一个关键元素是Imagery(图层)。瓦片图集合根据不同的投影方式映射到虚拟的三维数字地球表面。依赖于相机指向地表的方向和距离，Cesium会去请求和渲染不同层级的图层详细信息。
多种图层能够被添加、移除、排序和适应到Cesium中。

Cesium提供了一系列方法用于处理图层，比如颜色自适应，图层叠加融合。一些样例代码如下：

• Adding basic imagery添加基本图层
• Adjusting imagery colors自适应图层颜色
• Manipulating and ordering imagery layers控制调整图层顺序
• Splitting imagery layers切割图层

Cesium提供了各种 接口 支持各样的图层数据源。

支持的图层格式

• wms
• TMS
• WMTS (with time dynamic imagery)
• ArcGIS
• Bing Maps
• Google Earth
• Mapbox
• OpenStreetMap

注意：不同的数据源需要不同的认证 - 需要确保自己能够有权限访问到这些数据源，自然地需要注册特定的认证才可以
默认地，Cesium使用Bing Maps作为默认的图层。这个图层被打包进Viewer中用于演示。Cesium需要您自己创建ion account然后生成一个access key用于访问图层数据。

1. 去Cesium ion页面，将Sentinel-2图层加入到自己的assets中。点击在导航栏中点击“Asset Depot”
   

2. 点击 Add to my assets。Sentinel-2将在你个人用户中的asset列表（My Assets）中出现，此时将在个人的app中图层数据源变得可用。

3. 代码修改
   我们创建一个IonImageryProvider，将assetId传给对应的Sentinel-2图层。然后我们将ImageryProvider添加到viewer.imageryLayers。

// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));
1
2
3
4
5

Sentinel-2：全世界的无云卫星图像，分辨率可降至10米

六、添加地形

Cesium支持流式的、可视化的全球高程投影地形地势、水形数据，包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。像图层数据一样，Cesium引擎会从一个服务器上请求流式地形数据，仅请求那些基于当前相机能看到的需要绘制的图层上的数据。

Cesium官方提供了一些地形数据集的例子，以及如何配置这些参数。

• ArcticDEM : 高投影的arctic terrain
• PAMAP Terrain : 高投影的Pennsylvania terrain
• Terrain display options : 一些地形数据配置和格式
• Terrain exaggeration : 是地形间的高度差异更加的优雅艺术

支持的地形数据格式：

• Quantized-mesh, Cesium团队自己开源的一种格式
• Heightmap
• Google Earth Enterprise

为了添加地形数据，我们需要创建一个CesiumTerrainProvider，提供一个url和一些配置项，然后将这个provider赋值给viewer.terrainProvider。

此处，我们使用Cesium WorldTerrian图层，该图层由Cesium ion提供，在“My Assets”中是默认提供的。我们可以用createWorldTerrainhelper函数创建一个由Cesium ion提供服务的Cesium WorldTerrian。

// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
    requestWaterMask : true, // required for water effects
    requestVertexNormals : true // required for terrain lighting
});
1
2
3
4
5

*requestWaterMask和requestVertexNormals是可选的配置项，告诉Cesium是否需要请求额外的水、光数据。这两个选项默认是设为false的。*

最终，既然我们有了地形数据，我们需要更多的线条来使得地形数据背后的objects能够正确地显示，只有最前面、最上面的objects才能是可见的。

// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;
1
2

我们现在有地形数据和运动的水。纽约非常平坦，所以可以在上面的地形数据上自由的探索。举一个显而易见的例子，你可以跳转到更加崎岖的区域比如 Grand Canyon 或者 San Francisco。

七、配置视窗

接下来将添加一些更多的正确的时间和空间设置到Viewer中。涉及到与viewer.scene进行交互，该类控制了viewer中的所有图形元素。

1. 首先，我们配置一下我们的scene，用以下代码激活基于太阳位置的光照：

// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;
1
2

按照以上配置，我们scene(场景)中的光照将会随着每天时间的变化而变化。如果你zoom out，你就会看到一部分数字地球位于黑暗之中，因为模拟真实的地球，太阳只能照射到地球的一部分。

2. 在我们开始初始化启动view之前，我们先简略的过一下一些基础的Cesium类型：
   Cartesian3 : 一个三维笛卡尔坐标——当它被用作相对于地球中心的位置时，使用地球固定框架（ECEF）。
   Cartographic : 由经度、纬度（弧度）和WGS84椭球面高度确定的位置。
   HeadingPitchRoll : 在东北向上的框架中关于局部轴的旋转（弧度）。航向是围绕负Z轴的旋转。俯仰是围绕负Y轴的旋转。滚动是关于正X轴的旋转。
   Quaternion :以4D坐标表示的3D旋转。

这些是在场景中定位和定位Cesium objects所必需的基本类型，并且有许多有用的转换方法。请参阅每种类型的文档以了解更多信息。
现在让我们把相机定位在我们数据所在的NYC（纽约）的场景中。

1、Camera Control

相机是viewer.scene中的属性，用来控制当前可见的域。我们可以通过直接设置它的位置和方向来控制相机，或者通过使用Cesium提供的API来控制相机，它被设计成指定相机的位置和方向随时间的变化。

一些最常用的方法如下：
Camera.setView(options): 在特定位置和方向立即设置相机。
Camera.zoomIn(amount): 沿着视角矢量移动摄像机。
Camera.zoomOut(amount): 沿视角矢量向后移动摄像机。
Camera.flyTo(options): 创建从当前相机位置到新位置的动画相机飞行。
Camera.lookAt(target, offset) : 定位并定位摄像机以给定偏移量瞄准目标点。
Camera.move(direction, amount) : 朝任何方向移动摄像机。
Camera.rotate(axis, angle) : 绕任意轴旋转相机。

进一步获得API功能，看看这些相机演示：
Camera API Demo
Custom Camera Controls Demo

让我们尝试一种方法将相机跳转到纽约。使用camera.setView()初始化view，使用Cartesian3和HeadingpitchRoll指定相机的位置和方向:

// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
    destination : initialPosition,
    orientation : {
        heading : initialOrientation.heading,
        pitch : initialOrientation.pitch,
        roll : initialOrientation.roll
    }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);
1
2
3
4
5
6
7
8
9
10
11
12
13

相机现在被定位和定向以俯瞰曼哈顿，并且我们的视图参数被保存在一个对象中，我们可以将其传递给其他相机方法。
效果如下：

实际上，我们可以使用这个相同的视角来更新按下home按钮的效果。我们不必让它从远处返回地球的默认视角，我们可以重写按钮，使我们看到曼哈顿的初始视角。我们可以通过添加几个选项来调整动画，然后添加一个取消默认航班的事件侦听器，并调用FlyTo()我们的Home视角：

// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
    e.cancel = true;
    viewer.scene.camera.flyTo(homeCameraView);
});
1
2
3
4
5
6
7
8
9
10

点击Home按钮后，视图会直接跳转到纽约上空

更多关于基本相机控制，请访问我们的Camera Tutorial。

2、Clock Control

接下来，我们配置viewer的Clock和Timline来控制scene的时间进度。

这里是clock的相关API

当使用特定时间时，Cesium使用JulandDATE类型，它存储了1月1日中午以来的天数-4712（公元前4713年）。为了提高精度，该类将日期和秒的全部部分存储在单独的组件中。为了计算安全和代表跳跃秒，日期总是存储在国际原子时间标准中。

下面是我们如何设置场景时间选项的例子：

// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range
1
2
3
4
5
6
7
8
9

这设置场景动画的速率、开始和停止时间，并告诉时钟在到达停止时间时循环回到开始。它还将时间线控件设置为适当的时间范围。看看这个时钟示例代码来测试时钟设置。

这是我们的初始场景配置！现在，当你运行你的应用程序时，你应该看到以下内容：
效果如下：

八、加载和样式化实体

实体使用Cesium官网提供的实体：kml下载地址

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

    var dataSourcePromise= Cesium.KmlDataSource.load('/cesium/gdpPerCapita2008.kmz', options);
    // viewer.dataSources.add(dataSourcePromise); 可以选择一次性加载
    dataSourcePromise.then(dataSource => {
        viewer.dataSources.add(dataSource);

        var geocacheEntities = dataSource.entities.values;
        for (var i = 0; i < geocacheEntities.length; i++) {
            var entity = geocacheEntities[i];
            if (Cesium.defined(entity.billboard)) {
                // 这里可以篡改entity的样式
            }
        }
    })
    viewer.camera.flyHome(0);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

效果如下：

Entity结构如下：

快捷键

• 按住鼠标左键拖拽 - 让相机在数字地球平面平移。
• 按住鼠标右键拖拽 - 放缩相机。
• 鼠标滚轮滑动 - 放缩相机。
• 按住鼠标中键拖拽 - 在当前地球的屏幕中间点，旋转相机。

【引用教程】
新手入门中文教程