vue3.0+vite+Cesium使用记录

项目使用,本项目使用vite与vue

vue3.0项目 Vite + JS Cesium 初学,做记录

序言

Cesium传送门本文使用vue3搭建项目模板地址,提供vite参考 vue3.0+element-plus+js+tailwind传送门

安装Cesium

安装cesium vite还需要安装vite-plugin-cesium 并在vite.comfig.js中进行注册 import cesium from 'vite-plugin-cesium'; defineConfig({ plugins: [ cesium() ] })

初始化Cesium

html
<div id="container" class="full-size"></div>

JavaScript
 const viewer = new Cesium.Viewer('container');

Viewer参数设置参考ConstructorOptionsWidgets API

样式自行调整 class禁止使用container命名,与tailwind中一个类冲突

在Cesium初始化时需要在vue中的onMounted调用 Cesium中ViewerAPI的传送门此间详细记录处理初始化界面上内容

去除时间轴上方Cesium的logo

viewer.cesiumWidget.creditContainer.style.display = 'none';

开启深度地形图监测

原由: 随着地图缩放深度增加会导致数据获取不到,所以需要进行开启深度监测 viewer.scene.globe.depthTestAgainstTerrain = true; depthTestAgainstTerrain介绍API

监听viewer操作事件

new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas) handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

JavaScript
/// Cesium.ScreenSpaceEventType.WHEEL 事件类型,参考[中文网cesium事件API]
  handler.setInputAction(() => {
    ...
  }, Cesium.ScreenSpaceEventType.WHEEL);

或者

JavaScript
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
    ...
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

中文网cesium事件API

获取鼠标点击处的地理做标(非点击事件也可)

事件Cesium.ScreenSpaceEventType.LEFT_CLICK 点击事件参数中带有position可进行做标解析事件参数 : lclickment

1、获取cartesian const cartesian = viewer.scene.pickPosition(lclickment.position) 2、判断cartesian是否存在(地图未加载成功时,depthTestAgainstTerrain未开启时) 3、使用cartesianToCartographic将cartesian转换成三维做标，cartesianToCartographic介绍API

获取坐标前置使用ellipsoid:const { ellipsoid } = viewer.scene.globe,viewer在标题[初始化Cesium]中介绍

const cartographic = ellipsoid.cartesianToCartographic(cartesian);

4、将三维做标转换成地理做标

toDegrees:将弧度转换成度数API

Cesium.Math.toDegrees(cartographic.longitude):lon Cesium.Math.toDegrees(cartographic.latitude):lat

获取高度

viewer.camera.positionCartographic.height

默认为中国区域

JavaScript
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
    75.0, // 西经
    0.0, // 南纬
    140.0, // 东经
    60.0, // 北纬
  );

在Cesium.Viewer初始化之前设置

目录

序言