WebGIS 之 vue3+vite+ceisum

1.项目搭建node版本在16以上

1.1创建项目

npm create vite 项目名

1.2选择框架

vue+javaScript

1.3进入项目安装依赖

cd 项目名
npm install

1.4安装cesium依赖

pnpm i cesium vite-plugin-cesium

1.5修改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()]
})

1.6在app.vue中引入Cesium并打印

import * as Cesium from ‘cesium’
console.log(Cesium)

1.7运行项目

npm run dev

2.Hello Cesium

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
onMounted(() => {
 Cesium.Ion.defaultAccessToken = '申请的token'
 new Cesium.Viewer('cesiumContainer')
})
</script>
  
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

3.控件

Cesium内置了一些小控件，可以在new Cesium.Viewer时传入参数进行控制

3.1自定义地图影像

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'token'
   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,   //默认的谷歌地图影像  影像图层 ImageryLayer
    //地形图层TerrainProvider
    terrainProvider: Cesium.createWorldTerrain({
          requestWaterMask: true //水面特效
     }),
  })
  
})

3.2控件显示隐藏默认显示

// Viewer是一切API的开始
    let viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false,  //是否显示图层选择控件
        animation: false, //是否显示动画控件
        timeline: false,  //是否显示时间轴控件
        fullscreenButton: false, //是否显示全屏按钮
        geocoder: false, //是否显示搜索按钮
        homeButton: false, //是否显示主页按钮
        navigationHelpButton: false,//是否显示帮助提示按钮
        sceneModePicker: false//是否显示投影方式按钮
    })

4.坐标转换

4.1经纬度转笛卡尔

const Cesium1= Cesium.Cartesian3.fromDegrees(114, 30, 1000)//经度 纬度 高度
console.log(Cesium1)//返回的是一个笛卡尔坐标

4.2笛卡尔转经纬度

Cesium中的地理坐标单位默认是弧度制，用Cartographic变量表示,通过new Cesium.Cartographic()创建构造Cartographic对象

//第一步：笛卡尔转弧度
let cartographic = Cesium.Cartographic.fromCartesian(Cesium1)
console.log(cartographic)

//第二步：弧度坐标转角度坐标
// let lon = 180 / Math.PI * cartographic.longitude
// let lat = 180 / Math.PI * cartographic.latitude
let lon = Cesium.Math.toDegrees(cartographic.longitude)
let lat = Cesium.Math.toDegrees(cartographic.latitude)
console.log(lon)
console.log(lat)
console.log(cartographic.height)

5.相机

在Cesium中，我们确定的视角，需要设置相机的位置和方向。
● destination用于设置相机的位置。
● orientation用于设定相机的方向
orientation是用来控制相机的heading（偏航角） pitch（仰俯角） roll（翻滚角）。最简单的理解就是相机镜头当前浏览器窗口所在的位置
heading 偏航角 -->Y
pitch俯仰角–>x
roll 旋转角–z

5.1setView

setView通过定义相机飞行目的点的三维坐标和视角，没有飞行过程，直接定位到设定的视域范围，用于快速切换视角

 const position = Cesium.Cartesian3.fromDegrees(110, 30, 20000)
  viewer.camera.setView({
    destination: position,
    orientation: {//默认（0，-90，0）
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(90),
      roll: Cesium.Math.toRadians(0)
    }
  })

5.2 flyTo

flyTo是快速切换视角，带有飞行动画，可以设置飞行时长

const position = Cesium.Cartesian3.fromDegrees(110, 30, 20000)
viewer.camera.flyTo({
      destination: position,
      orientation: {
        heading: Cesium.Math.toRadians(20),  // 默认
        pitch: Cesium.Math.toRadians(-90.0),  // 默认
        roll: 0.0                             // 默认
      },
      duration: 3, 
 })

5.3 lookAt

lookAt将视角固定在所设置的目的点上，可以任意旋转视角，但是不会改变位置

const position = Cesium.Cartesian3.fromDegrees(110, 30)
viewer.camera.lookAt(position, new Cesium.HeadingPitchRange(
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(-90),
    20000,//中心点距离地面的距离
))

6.entity实体

Cesium丰富的空间数据可视化API分为两部分：Primitive API 面向三维图形开发者，更底层一些。Entity API 是数据驱动更高级一些。
Primitive API的主要目的是为了完成（可视化）任务的最少的抽象需求。他要求我们以一个图形开发者的方式去思考，并且使用了一些图形学术语。它是为了最高效最灵活的实现可视化效果，忽略了API的一致性。比如绘制三维模型和创建Billboard不同，和多边形绘制更是彻底不同。每种可视化都有自己鲜明的特色。此外，他们每种都有自己的独特的性能提升方式，也需要遵守不同的优化原则。虽然它很强大又很灵活，但是大多数项目需要比Primitive API更高层次的抽象。
Entity AP的主要目的是定义一组高级对象，它们把可视化和信息存储到统一的数据结果中，这个对象叫Entity。 它让我们更加关注我们的数据展示而不是底层的可视化机制。它提供了很方便的创建复杂的，与静态数据相匹配的随时间变化的可视化效果。Entity API实际内部在使用Primitive API ，它的实现细节，我们无需关心。经过各种数据的测试，Entity API提供灵活的，高层次的可视化，同时暴露一些一致性的、容易去学习和使用的接口
地址

6.1 entity实体点

//实体中都是笛卡尔坐标
// entity是基于primitive封装的点
// 写法一
const point1 = new Cesium.Entity({
    id: 'point1',
    position: Cesium.Cartesian3.fromDegrees(120, 30),//笛卡尔坐标
    point: {
        color: Cesium.Color.BLUE,
        pixelSize: 20
    }
})
viewer.entities.add(point1)

// 写法二(推荐)
const point2 = viewer.entities.add({
    id: 'point2',
    position: Cesium.Cartesian3.fromDegrees(121, 30),//笛卡尔坐标
    point: {
        color: Cesium.Color.BLUE,
        pixelSize: 20
    }
})
viewer.zoomTo(point2)

6.2标注

const billboard = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(116,40,10),billboard: {
image: '/src/assets/position.png'.
scale: 0.3,
color: Cesium.Color.YELLOW
viewer.zoomTo(billboard)

const label = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(122, 30),
  label: {
    text: '新中地',
    fillColor: Cesium.Color.YELLOWGREEN,//变量
    showBackground: true,
    backgroundColor: new Cesium.Color(255, 255, 0,)//实例化
  }
})
viewer.zoomTo(label)