使用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可以调用: WebMapTileServiceImageryProviderUrlTemplateImageryProvider

改写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知识,敬请关注。

相关推荐
初遇你时动了情13 分钟前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由
前端·javascript·react.js
乔峰不是张无忌33032 分钟前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树
鸿蒙自习室40 分钟前
鸿蒙UI开发——组件滤镜效果
开发语言·前端·javascript
m0_748250741 小时前
高性能Web网关:OpenResty 基础讲解
前端·openresty
前端没钱1 小时前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js
NoneCoder1 小时前
CSS系列(29)-- Scroll Snap详解
前端·css
无言非影1 小时前
vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)
前端·css
我曾经是个程序员2 小时前
鸿蒙学习记录
开发语言·前端·javascript
羊小猪~~2 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5
摸鱼了2 小时前
🚀 从零开始搭建 Vue 3+Vite+TypeScript+Pinia+Vue Router+SCSS+StyleLint+CommitLint+...项目
前端·vue.js