创建vite项目

        

直接在地址栏输入cmd进入命令行（vite项目默认为vue3）

# yarn
yarn create vite 项目名称 --template vue

创建成功后依次执行

yarn install
yarn dev

安装cesium和vite-plugin-cesium

没有加版本号默认为最新版本 加版本号如cesium@1.18

不装vite-plugin-cesium可能会导致样式问题

yarn add cesium vite-plugin-cesium

修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
import { resolve } from "path";
import cesium from 'vite-plugin-cesium'
// 路径查找
const pathResolve = (dir) => {return resolve(__dirname, ".", dir);
};
export default defineConfig({plugins: [vue(), cesium()],resolve: {alias: {// 设置别名"@": pathResolve("./src/"),},// https://cn.vitejs.dev/config/#resolve-extensionsextensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],},server: {host: '0.0.0.0'}
})

获取CesiumToken

进入cesium官网CesiumJS – Cesium，注册账号后登录。

初始化地球

在src下创建一个文件夹utils，在utils中创建mapEvent.js文件

import * as Cesium from "cesium";
export { viewer, initMap };
var viewer;
const CESIUMTOKEN ="你的cesiumToken";
const initMap = () => {Cesium.Ion.defaultAccessToken = CESIUMTOKEN;viewer = new Cesium.Viewer("cesiumMap", {  // cesiumMap为地图div的idgeocoder: false, // 是否显示位置查找工具（true表示是，false表示否）homeButton: false, // 是否显示首页位置工具sceneModePicker: false, //是否显示视角模式切换工具baseLayerPicker: false, //是杏显示默认图层选择工具navigationHelpButton: false, //是否显示导航帮助工具animation: false, //是杏显示动画工具timeline: false, //是否显示时间轴工具fullscreenButton: false, //是否显示全屏按钮工具});viewer._cesiumWidget._creditContainer.style.display = "none"; // 去掉左下角图标

在vue页面中引用

// Map.vue
<script setup>
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'
import { initMap } from '@/utils/mapEvent.js'
onMounted(() => {initMap()
})
</script><template><div id="cesiumMap"></div>
</template><style scoped>
#cesiumMap {width: 100%;height: 100%;
}
</style>

加载天地图

加载影像地图和影像注释图层

// 影像图层viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url:"http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +"天地图秘钥",layer: "tdtBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",show: false,}));// 影像注释图层viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url:"http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=" +"天地图秘钥",layer: "tdtAnnoLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",}));// 跳转中国viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),orientation: {heading: Cesium.Math.toRadians(348.4202942851978),pitch: Cesium.Math.toRadians(-89.74026687972041),roll: Cesium.Math.toRadians(10),},});

天地图请求地址

类型：矢量地图 vec_w 矢量注释地图 cva_w 影像地图 img_w 影像注释地图 cia_w

如何更改：

http://t0.tianditu.com/类型(如vec_w)/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=类型去掉_之后的（如vec）&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=天地图秘钥