Cesium学习笔记

1、Cesium介绍

Cesium是便用JavaScript开发的基于WebGL的实现三维地球和地图可视化的JS库，Cesium支持海量的三维模型数据，影像数据，地形高程数据，矢量数据等丰富的地理数据的加载。在交通，规划，城市管理，地形仿真等领城有非常广泛的应用。Cesium为三维的GIS提供了一个高效的数据可视化平台。

中文文档
Cesium中文api文档 | Index - Cesium Documentation

官网
Cesium: The Platform for 3D Geospatial

例子
Cesium Sandcastle
Cesium的特点
①、跨平台，跨浏览器，无插件
②、强大的地理数据可视化能力。Cesium自定义的3D Tiles数据格式，支持海量数据渲染
③、丰富可用的工具，Cesium支持三类地图模式，三维，二维，哥伦布视图(2.5D)。Cesium图层选择器定义了丰富的地图和地形图层，支持地址搜索和信息属性框等交互功能，支持全屏模型和网络虚拟现实WebVR

进入官网 CesiumJS – Cesium  

Downloads – Cesium

不建议下载 最新版本 

2.简单示例：第一个cesium页面

解压  在一个文件夹内 打开项目  新建index文件夹里面是index.html 引入js和css 

// 引入依赖
<script src="../cesium1.99/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="../cesium1.99/Build/Cesium/Widgets/widgets.css">


// 地图容器
<div id="cesiumContainer"></div>


script中：
Cesium.Ion.defaultAccessToken = ''
// 实例化
new Cesium.Viewer('cesiumContainer')

会提示需要access token  去官网注册（很难打开）

Cesium ion是一个提供瓦片图和3D地理空间数据的平台，Cesiumion支持把数据添加到用户白己的CesiumJs应用中
https:/cesium.comyion/

登录后会获得账号token

效果

自带控件  搜索加跳转   home回到默认  

三种投影方式  3D 2D 2.5D  可以选择图层

按住右键左右拉 缩放； 左键拖拽 ；中键改变视角

3.vue3+vite+Cesium  

项目路径打开cmd 

①pnpm创建项目 : pnpm create vite 项目名

②选择框架

③cd 项目名 进入项目 安装依赖 pnpm i 

④安装Cesium ： pnpm i cesium@1.99 vite-plugin-cesium

⑤修改vite.config.js 文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
    plugins:[vue(),cesium()]
})

⑥ App.vue

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

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(()=> {
    Cesium.Ion.defaultAccessToken =''
    // viewer 是所有API的开始 
    // 默认谷歌影像图层 这里使用ArcGIS影像图层
    const esri = new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/Mapserver",
        enablePickFeatures:false,
    })
    const viewer = new Cesium.Viewer('cesiumContainer' , {
        imageryProvider: esri,// 自定义图层
        terrainProvider: Cesium.createWorldTerrain(), //地形图层
        requestWaterMask: true, //水面特效 没必要的话无需设置
        // 隐藏控件
        timeline:false, // 控制下方时间轴控件
        animation:false, // 控制左下角的动画控件
        geocoder:false, // 控制右上角第一个位置的搜索按钮
        homeButton:false, // 控制右上角第二个位置的home图标-主页按钮
        sceneModePicker:false, // 投影方式按钮 控制右上角第三个位置的选择视角模式，2d，3d
        baseLayerPicker:false, // 控制右上角第四个位置的图层选择按钮
        navigationHelpButton:false, // 控制右上角第五个位置的帮助按钮
        vrButton: false, // 右下角vr按钮
        infoBox: false, // 不显示点击要素之后显示的信息
        selectionIndicator: false, // 隐藏选中状态
        shouldAnimate: true, // 允许动画同步
        fullscreenButton:false, // 右下角全屏按钮
    })
    viewer._cesiumWidget._creditContainer.style.display="none";//取消版权信息
})
</script>

<style scoped>
    #cesiumContainer {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
</style>

// 隐藏图标 不要放在scoped的样式中无效
<style>
   .cesium-viewer-bottom {
        display: none;
   }
</style>

4.坐标转换

用的是笛卡尔坐标  

笛卡尔空间直角坐标系（Z轴不是高度）