Cesium的基础使用（前端网页三维地球）

        前言：在多数数字孪生业务场景中，三维地球已经成为最基础的功能模块，在浩繁三维框架中，cesium以其实时性与便捷性独树一帜
一、什么是Cesium

Cesium是便用JavaScript开发的基于WebGL的实现三维地球和地图可视化的JS库
Cesium中文API文档
Cesium官方网站
二、Cesium的安装

1. npm install cesium

复制代码

安装之后进入vite.config.js，在plugins中引用cesium()

1.   plugins: [
2.     vue(),cesium()
3.   ],

复制代码

三、Cesium的初始化

3.1、创建一个div标签用来承载Cesium

1. <div id="cesiumContainer" style="width: 100vw; height: 100vh;"></div>

复制代码

3.2、在文件中引入

1. import * as Cesium from 'cesium'

复制代码

3.3、获取Token

3.3.1、注册并登录到Cesium Ion的Token

        起首，你必要有一个Cesium Ion账户。如果你还没有账户，可以在Cesium Ion官网注册一个。
3.3.2、创建API Token

        登录后，进入你的账户设置。在Cesium Ion控制台中，你可以找到“API Tokens”或类似的选项。在这里，你可以生成一个新的API Token。确保给你的token一个有意义的名称，这样你就可以在以后的管理中辨认它。
3.4、定义初始化方法

        我们起首将刚刚获取到的Token粘贴过来

1. Cesium.Ion.defaultAccessToken = '你的Token'

复制代码

        定义初始地球坐标

1. const Cartesian = Cesium.Cartesian3.fromDegrees(0, 0, 500.0)

复制代码

        定义viewer，viewer是所有API的开始,此中imageryProvider是地图瓦片，可以通过不同的地图引擎来定义覆盖在cesium地球上的地图

1.     const viewer = new Cesium.Viewer('cesiumContainer', {
2.         geocoder: false,
3.         homeButton: false,
4.         sceneModePicker: false,
5.         baseLayerPicker: false,
6.         navigationHelpButton: false,
7.         animation: false,
8.         infoBox: false,
9.         selectionIndicator: false,
10.         timeline: false,
11.         fullscreenButton: false,
12.         vrButton: false,
13.         enableLighting: true,
14.         shadows: true,
15.         imageryProvider: new Cesium.UrlTemplateImageryProvider({
16.             url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
17.         }),
18.     })

复制代码

        定义初始状态时camera坐标并配置动画结果（cesium中是笛卡尔坐标）

1. viewer.camera.flyTo({
2.         destination: new Cesium.Cartesian3.fromDegrees(116.435314, 40.960521, 20000000.0),
3.         duration: 3
4.     })

复制代码

到这里一个三维地球算是初始化完了
四、创建坐标点

4.1、创建变量

1. const point_position_data = [
2.     {
3.         position: Cesium.Cartesian3.fromDegrees(104.04, 30.58, 200000),
4.         label: "成都"
5.     },
6.     {
7.         position: Cesium.Cartesian3.fromDegrees(119.21, 29.6, 200000),
8.         label: "杭州"
9.     },
10.     {
11.         position: Cesium.Cartesian3.fromDegrees(121, 30.90, 200000),
12.         label: "上海"
13.     },
14.     {
15.         position: Cesium.Cartesian3.fromDegrees(11.35, 48.08, 200000),
16.         label: "慕尼黑"
17.     },
18. ]

复制代码

释义：fromDegrees(东经, 北纬, 离地距离)
4.2、创建写入点方法

1. /**
2. * 此函数用于生成cesium广告牌
3. * @param {Dom} viewer viewer实例
4. * @param {Function} point 坐标
5. * @param {String} image_url 图片URL
6. * @param {String} label 广告牌文字
7. */
8. const add_point = (viewer, point, image_url, label) => {
9.     viewer.entities.add({
10.         name: label,
11.         // 设置实体位置
12.         position: point, // 纬度, 经度
13.         point: {
14.             pixelSize: 25,
15.             color: Cesium.Color.RED,
16.             outlineWidth: 5,
17.             outlineColor: Cesium.Color.WHITE,
18.             show: false
19.         },
20.         label: {
21.             text: label,
22.             font: '15px monospace',
23.             style: Cesium.LabelStyle.FILL_AND_OUTLINE,
24.             outlineWidth: 3,
25.             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
26.             pixelOffset: new Cesium.Cartesian2(0, 30),
27.         },
28.         billboard: {
29.             image: image_url,
30.             show: true, // 是否显示
31.             scale: 0.5, // 图标大小
32.             pixelOffset: new Cesium.Cartesian2(0.0, 0.0), // 图标位置偏移
33.         },
34.     });
35. }

复制代码

4.3、循环创建坐标点表现在地球上

1. point_position_data.map((a, index) => {
2.         add_point(viewer, point_position_data[index].position, '/image/蓝小.png', point_position_data[index].label)
3.     })

复制代码

释义：add_point(坐标，坐标点自定义图片，坐标点名称)
五、点击坐标点飞至对应城市（坐标）

1. handler.setInputAction((e) => {
2.         // 获取点击的实体
3.         const pick = scene.pick(e.position);
4.         // 判断点击的是不是点位
5.         if (Cesium.defined(pick)) {
6.             point_position_data.map((currentValue, index) => {
7.                 if (pick.id._name == point_position_data[index].label) {
8.                     cesium_viewer.value.camera.flyTo({
9.                         destination: point_position_data[index].position,
10.                         duration: 3
11.                     })
12.                 }
13.             })
14.         }
15.     }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 监听屏幕鼠标左键点击

复制代码

思绪：通过点击时判定点击的地方是不是我们创建的点位以及点位名去查找对应坐标，然后调用cesium_viewer.value.camera.flyTo方法飞入相应坐标。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。