Cesium环境搭建及初始化
引言：当前主流GIS系统开发多采用框架集成方案，本文将以Vue3+vite工程为例，分享Cesium在现代化前端工程中的集成方案。至于TypeScript，作者已经在公司项目中开始实践，为了更流畅的编写代码，因此在此项目中没有引入TypeScript。
-
环境版本号
node：v18.20.0 vue：v3.5.13 cesium：v1.128.0 vite：v6.2.1 -
创建vue项目： 请自行查找怎么创建vue3+vite项目。
-
集成cesium：
npm i cesium@1.128.0 vite-plugin-cesium，执行此命令，等待依赖下载完成。打开vite.config.js文件。
// vite.config.js
......
// 引入cesium集成插件，不用像webpack一样中配置好多东西
import cesium from "vite-plugin-cesium";
export default defineConfig({
plugins: [
.....
cesium(),//在此引入cesium集成插件
],
......
});
- 项目初始化： 此时cesium已集成到vue项目中，在
src目录下创建hooks目录，创建useCesium.js文件。
// useCesium.js
import * as cesium from "cesium"; // 引入cesium.js库
// cesium的Token，联网开发时用来请求官方的地图和地形资源时认证用，断网时，自己搭建的地形和地图资源则无所谓。
// import.meta.env.VITE_CESIUM_TOKEN：请在cesium官网注册申请自己的TOKEN，否则官方的地图资源无法加载。
cesium.Ion.defaultAccessToken = import.meta.env.VITE_CESIUM_TOKEN;
// cesium配置项
export const options = {
infoBox: false, // 信息展示框（默认右下角弹窗）
selectionIndicator: false, // 选择指示器（选中实体时的黄色选框）
animation: false, // 动画控制组件（时间轴上方播放按钮）
baseLayerPicker: false, // 底图切换面板（包含影像/地形图切换）
geocoder: false, // 地理编码搜索框（右上角搜索按钮）
navigationHelpButton: false, // 导航帮助面板（问号图标操作指南）
fullscreenButton: false, // 全屏切换按钮（右下角全屏控件）
homeButton: false, // 复位视角按钮（默认返回初始视角）
sceneModePicker: false, // 场景模式切换（2D/3D/哥伦布视图切换）
timeline: false, // 时间轴控件（底部时间进度条）
shadows: true, // 阴影渲染开关（影响模型/地形的光影效果）
shouldAnimate: true, // 自动动画开关（控制时钟自动推进）
};
/**
* cesium初始化
* @param {HTMLElement} element
* @returns {viewer} viewer
*/
export const useCesium = (element) => {
const viewer = new cesium.Viewer(element, {
...options,
});
// 去除logo
const creditContainer = viewer.cesiumWidget.creditContainer;
creditContainer.style.display = "none";
//关闭大气
viewer.scene.skyAtmosphere.show = false;
//抗锯齿
viewer.scene.postProcessStages.fxaa.enabled = true;
viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
// 删除左键双击，右键单击
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
cesium.ScreenSpaceEventType.RIGHT_CLICK
);
return viewer;
};
在views目录下创建initEarth.vue，引入useCesium.js文件。
// initEarth.vue
<script setup>
import * as cesium from "cesium";
import { onMounted } from "vue";
import { useCesium } from "@/hooks/useCesium";
onMounted(() => {
const earth = document.querySelector("#earth");
useCesium(earth);
});
</script>
<template>
<div class="earth" id="earth"></div>
</template>
<style lang="scss" scoped>
.earth {
width: 100%;
height: 100%;
}
</style>
打开路由配置文件src/router/index.js，配置对应的路由。
// router.js
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
......
{
......
children: [
{
path: "/initEarth",
name: "初始化地球",
component: () => import("../views/initEarth.vue"),
}
],
},
......
],
});
export default router;
找到项目入口文件main.js。引入路由文件，其余路由出口根据需要在配置一、二级路由出口即可，App.vue如下。
// main.js
......
import router from "./router"; // 引入router，并使用
import store from "./store";
const app = createApp(App);
app.use(router).use(store).use(ElementPlus);
app.mount("#app");
// App.vue
<script setup>
import { RouterView } from 'vue-router'
</script>
<template>
<RouterView />
</template>
<style scoped></style>
- 项目启动： 执行
npm run dev命令，如下图（已做配置项处理）
- 未处理： 如下图，未作配置项处理
- 总结： 至此，cesium项目集成初始化完成，相比于vue2+webpack来说，vue3+vite的项目工程cesium更方便集成，如果文章有不对的地方欢迎在下方留言指出，也感谢其余cesium大佬分享的博客，在作者工作中帮了不少大忙。
目前作者正在整理在2023年毕业到现在工作中学习使用cesium的一些技术文档，后续还有，敬请期待！ - 其他：
turf: v7.2.0 <地理空间分析库，处理各种地图算法> https://fenxianglu.cn/turfjs/
lodash: v4.17.21 <Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。> https://www.lodashjs.com/
