使用Vite快速搭建Cesium三维地图应用项目

文章同步更新于我的个人博客：松果猿的博客，欢迎访问获取更多技术分享。

同时，您也可以关注我的微信公众号：松果猿的代码工坊，获取最新文章推送和编程技巧。
记录本人的cesium学习之路

首先初始化一个vite项目：Vite初始化Vue3+Typescrpt项目 | 松果猿的博客

创建好后，安装cesium:

复制代码

npm install cesium

这里强烈建议看一下岭南灯火大佬的这篇文章：教程 - 在 Vue3+Ts 中引入 CesiumJS 的最佳实践@2023 - 岭南灯火 - 博客园，文章说的非常深入浅出，官网也有使用vite和webpack进行配置的文章：为 CesiumJS 配置 Vite 或 Webpack -- Cesium --- Configuring Vite or Webpack for CesiumJS -- Cesium，不过这些配置方法对我这个小白来说有点麻烦，可以安装别人做的插件简化过程：

安装vite-plugin-cesium:

这个插件是Nshen大佬做的，简化了繁琐的配置操作，github地址：github.com/nshen/vite-...

css 复制代码

npm i vite-plugin-cesium vite -D

vite.config.ts中写入：

typescript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

export default defineConfig({
    plugins: [vue(),cesium()],
})

新建src/components/Map.vue

vue 复制代码

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
const initalize = async () => {
  const viewer = new Cesium.Viewer("cesiumContainer");
};
onMounted(() => {
  initalize();
});
</script>

<style lang="scss" scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

App.vue:

vue 复制代码

<script setup lang="ts">
import Map from "./components/Map.vue";
</script>

<template>
  <div id="app">
    <Map></Map>
  </div>
</template>

<style scoped>
#app {
  margin: 0 auto;
  height: 100%;
  width: 100%;
}
</style>

地球已经显示出来了：

可以看到初始界面有许多控件，下面我们来隐藏这些控件：

组件名称	描述
Geocoder	查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图
Home Button	视角返回初始位置
Scene Mode Picker	选择视角的模式，有三种：3D，2D，哥伦布视图(CV)
Base Layer Picker	图层选择器，选择要显示的地图服务和地形服务
Navigation Help Button	导航帮助按钮，显示默认的地图控制帮助
Animation	动画组件，控制视图动画的播放速度
Timeline	时间线指示当前时间，并允许用户跳转到特定的时间
Credits Display	版权显示，显示数据归属
Fullscreen Button	全屏按钮

改动一下Map.vue中代码：

vue 复制代码

<script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
const initalize = async () => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
  });
  Viewer._cesiumWidget._creditContainer.style.display = "none"//取消版权信息
};
onMounted(() => {
  initalize();
});
</script>

界面如下，这样看起来是不是整洁一点：

我们来改一下底图，这里默认是bing地图，但我个人还是比较喜欢国产的天地图：

天地图服务cesium中有两种API可以调用： WebMapTileServiceImageryProvider和 UrlTemplateImageryProvider

改写Map.vue方法：

javascript 复制代码

const initalize = async () => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
  });
  viewer._cesiumWidget._creditContainer.style.display = "none"//取消版权信息
  const imageLayers = viewer.scene.imageryLayers
  imageLayers.remove(imageLayers.get(0))//移除默认影像图层
  const TDTTK=""//填入你自己的天地图Key
  // 天地图影像
  const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
    layer: "tdt",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "w",
    maximumLevel: 18,
    show: false,
  });
  viewer.imageryLayers.addImageryProvider(tdtLayer);
  // 天地图注记
  const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
    layer: "tdtAnno",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "w",
    maximumLevel: 18,
    show: false,
  });
  viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);
}

ok，一个基本的cesium项目就创建好了，后面我还会更新更多关于cesium知识，敬请关注。