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)