vue3+cesium使用天地图

集成 Cesium 到 Vue3 项目
为了在 Vue3 项目中集成 Cesium 并使用天地图作为底图，可以按照如下方式操作：
安装依赖库
首先，在 Vue3 项目的根目录下执行命令来安装必要的依赖项。
npm install cesium @types/cesium vue-class-component vue-property-decorator --save
登录后复制
这一步骤确保了所有必需的包都已就绪[^1]。
修改 vite.config.ts 文件配置 Vite 构建工具支持 Cesium 资源路径解析
编辑 vite.config.ts 添加对 Cesium 的特殊处理以便于正确加载其静态文件和其他资源。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': '/src',
'cesium': 'node_modules/cesium/Source' // 设置别名方便后续引入模块
}
},
build: {
rollupOptions: {
input: './index.html', // 输入入口HTML页面
output: {
assetFileNames: '[name].[ext]', // 输出资产命名规则
chunkFileNames: 'assets/js/[name]-[hash].js', // JS分片输出位置及名称模板
entryFileNames: 'assets/js/[name]-[hash].js', // 入口JS文件输出位置及名称模板
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0];
}
}
}
}
}
})
登录后复制
此部分设置使得构建过程能够识别并打包来自节点模块内的 Cesium 库及其关联资源到最终产物之中。
创建组件以初始化 Cesium Viewer 实例
新建名为 CesiumViewer.vue 组件用于承载 Cesium 场景视图容器，并在此处完成基础的地图实例化工作。
<template>
<div ref="viewerContainer"></div>
</template>

<script lang="ts">
import { onMounted, ref, Ref } from "vue";
import * as Cesium from "cesium";

// 导入样式表
import "cesium/Build/Cesium/Widgets/widgets.css";

export default {
setup() {

const viewerContainer: Ref<HTMLDivElement | null> = ref(null);

onMounted(() => {
if (!viewerContainer.value) return;

new Cesium.Viewer(viewerContainer.value.id || "", {
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url : "http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&amp;request=GetTile&amp;version=1.0.0&amp;LAYER=img&amp;tileMatrixSet=w&amp;TileMatrix={TileMatrix}&amp;TileRow={TileRow}&amp;TileCol={TileCol}&amp;style=default&amp;format=tiles&amp;tk=YOUR_API_KEY",
layer : "img",
style : "default",
format : "image/jpeg",
tileMatrixSetID : "w",
show : true,
}),
baseLayerPicker : false,
geocoder : false,
homeButton : false,
sceneModePicker : false,
navigationHelpButton : false,
animation : false,
timeline : false,
fullscreenButton : false,
vrButton : false,
});
});

return {
viewerContainer,
};
},
}
</script>

<style scoped>
#app div {
width: 100%;
height: calc(100vh - var(--header-height));
margin-top: var(--header-height);
border-width: 0;
}
</style>
登录后复制
上述代码片段展示了如何通过 Web Map Tile Service (WMTS) 接口指定天地图影像服务 URL 来替代默认在线提供商的方式实现自定义离线或特定服务商的数据源接入功能[^2]。注意需将 YOUR_API_KEY 替换成实际申请得到的有效 API Key 值才能正常显示地图图像数据[^3]。