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

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

一、什么是Cesium

Cesium是便用JavaScript开发的基于WebGL的实现三维地球和地图可视化的JS库

Cesium中文API文档

Cesium官方网站

二、Cesium的安装

npm install cesium

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

  plugins: [
    vue(),cesium()
  ],

三、Cesium的初始化

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

3.2、在文件中引入

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粘贴过来

Cesium.Ion.defaultAccessToken = '你的Token'

        定义初始地球坐标

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

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

    const viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        infoBox: false,
        selectionIndicator: false,
        timeline: false,
        fullscreenButton: false,
        vrButton: false,
        enableLighting: true,
        shadows: true,
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        }),
    })

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

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

到这里一个三维地球算是初始化完了

四、创建坐标点

4.1、创建变量

const point_position_data = [
    {
        position: Cesium.Cartesian3.fromDegrees(104.04, 30.58, 200000),
        label: "成都"
    },
    {
        position: Cesium.Cartesian3.fromDegrees(119.21, 29.6, 200000),
        label: "杭州"
    },
    {
        position: Cesium.Cartesian3.fromDegrees(121, 30.90, 200000),
        label: "上海"
    },
    {
        position: Cesium.Cartesian3.fromDegrees(11.35, 48.08, 200000),
        label: "慕尼黑"
    },
]

释义：fromDegrees(东经, 北纬, 离地距离)

4.2、创建写入点方法

/**
 * 此函数用于生成cesium广告牌
 * @param {Dom} viewer viewer实例
 * @param {Function} point 坐标
 * @param {String} image_url 图片URL
 * @param {String} label 广告牌文字
 */
const add_point = (viewer, point, image_url, label) => {
    viewer.entities.add({
        name: label,
        // 设置实体位置
        position: point, // 纬度, 经度
        point: {
            pixelSize: 25,
            color: Cesium.Color.RED,
            outlineWidth: 5,
            outlineColor: Cesium.Color.WHITE,
            show: false
        },
        label: {
            text: label,
            font: '15px monospace',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth: 3,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, 30),
        },
        billboard: {
            image: image_url,
            show: true, // 是否显示
            scale: 0.5, // 图标大小
            pixelOffset: new Cesium.Cartesian2(0.0, 0.0), // 图标位置偏移
        },
    });
}

4.3、循环创建坐标点显示在地球上

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

释义：add_point(坐标，坐标点自定义图片，坐标点名称)

五、点击坐标点飞至对应城市（坐标）

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

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