当前位置：首页 > news >正文

vue3中使用cesium

news 2025/8/18 20:29:32

vue3中使用cesium

Cesium是一个开源的JavaScript库，专门用于创建3D地球和2D地图的Web应用程序。它提供了丰富的功能和工具，使得开发人员能够轻松地构建出高质量的地理空间可视化应用。

1. 安装cesium包

npm install cesium

2. 复制node_modules中的Cesium至public静态资源中

在这里插入图片描述

3. main.ts中引入cesium

import "cesium/Build/Cesium/Widgets/widgets.css";import * as Cesium from "cesium";(window as any).CESIUM_BASE_URL = "/Cesium"; Cesium.Ion.defaultAccessToken = "你的token";  // 注册地址https://cesium.com/ion/signin/tokens

4. 编写页面

<script setup lang="ts">
import { onMounted } from "vue";
import * as Cesium from "cesium";onMounted(() => {const viewer = new Cesium.Viewer("cesiumContainer1");
});
</script>
<template><div id="cesiumContainer1" />
</template>
<style lang="less" scoped>
#cesiumContainer1 {width: 100%;height: 100%;
}
</style>

此时页面效果
在这里插入图片描述

5.cesium相关配置, 具体可查看官方文档。

viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "xxx", //换成自己的地址maximumLevel: 9,}),animation: false, // 动画控件shouldAnimate: false, // 初始时刻运动homeButton: false, // Home按钮fullscreenButton: false, // 全屏按钮baseLayerPicker: false, // 图层选择控件geocoder: false, // 地名查找控件timeline: false, // 时间线控件shadows: false,navigationHelpButton: false, // 帮助信息控件infoBox: false, // 点击要素之后显示的信息 信息框小部件requestRenderMode: false, // true启用请求渲染模式:更新实体需拖动地图 视图才更新[true 加载完entity后requestRender一下]scene3DOnly: false, // 几何图形以3D模式绘制以节约GPU资源sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式  3d 球maximumRenderTimeChange: 1,sceneModePicker: false, // 切换展示模式控件selectionIndicator: false,// 设置渲染orderIndependentTranslucency: false,contextOptions: {webgl: {alpha: true,},},
});//去除 左下角 版权信息
(viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";// 相机位置
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(120, 48, 25000000),
});const scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;

配置后的页面效果