vue3+vite搭建第一个cesium项目详细步骤及环境配置(附源码)

文章目录

  • 1.创建vue+vite项目
  • [2.安装 Cesium](#2.安装 Cesium)
    • [2.1 安装cesium](#2.1 安装cesium)
    • [2.2 安装vite-plugin-cesium插件(非必选)](#2.2 安装vite-plugin-cesium插件(非必选))
    • [2.3 新建组件页面map.vue](#2.3 新建组件页面map.vue)
    • [2.4 加载地图](#2.4 加载地图)
  • 3.完成效果图

1.创建vue+vite项目

打开cmd窗口执行以下命令:cesium-vue-app是你的项目名称

bash 复制代码
npm create vite@latest cesium-vue-app -- --template vue

创建完成后依次执行以下命令用于安装、启动项目:

bash 复制代码
cd cesium-vue-app
npm install
npm run dev

2.安装 Cesium

进入项目文件夹,打开cmd窗口执行:

2.1 安装cesium

bash 复制代码
npm install --save cesium

2.2 安装vite-plugin-cesium插件(非必选)

vite-plugin-cesium 是一个专门为 Vite 构建工具定制的插件,用于在 Vite 项目中轻松使用 Cesium 库。它简化了在 Vite 项目中集成 Cesium 的过程,并提供了一些额外的功能和配置选项。而直接安装 Cesium 库,你需要手动配置 Vite 项目以确保正确引入和使用 Cesium。这可能涉及到配置模块加载器、处理依赖关系、解决版本冲突等问题。相比之下,使用 vite-plugin-cesium 插件可以让这些步骤更加简单和方便;

  • cmd执行插件安装命令:
bash 复制代码
npm i vite-plugin-cesium vite -D
  • 配置vite.config.js
bash 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

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

2.3 新建组件页面map.vue

(1)引入cesium

html 复制代码
<script setup>
  import { ref } from 'vue'
  import * as Cesium from 'cesium'
</script>

(2)创建一个div作为地图容器,并设置其id为"cesiumContainer"

html 复制代码
  <div class="map-box" id="cesiumContainer">
  </div>

(3)设置地图容器样式的高度和宽度均为100%

  • 首先要将body的宽高设置为100vw和100vh;
css 复制代码
body {
  margin: 0;
  display: flex;
  place-items: center;
  min-height: 100%;
  height: 100vh;
  width: 100vw;
}
  • 其次设置vue项目dom容器的宽高为100%;
css 复制代码
#app {
  margin: 0 auto;
  text-align: center;
  height: 100%;
  width: 100%;
}
  • 最后设置地图容器的宽高
css 复制代码
<style scoped>
 .map-box {
    height: 100%;
    width: 100%;
  }
</style>

2.4 加载地图

(1)申请token

首先登录网址https://cesium.com/ion/signin/tokens,在注册后申请token,然后创建一个cesium对象,并使用我们创建的div容器承载地图。

(2)编写代码脚本加载容器。

js 复制代码
<script setup>
  import {
    ref,
    onMounted
  } from 'vue'
  import * as Cesium from 'cesium'
  onMounted(() => {
    Cesium.Ion.defaultAccessToken = "your cesium token"
    const viewer = new Cesium.Viewer('cesiumContainer', {
      geocoder: true, // 是否显示位置查找工具(true表示是,false表示否)
      homeButton: true, // 是否显示首页位置工具
      sceneModePicker: true, //是否显示视角模式切换工具
      baseLayerPicker: true, //是杏显示默认图层选择工具
      navigationHelpButton: true, //是否显示导航帮助工具
      animation: true, //是杏显示动画工具
      timeline: true, //是否显示时间轴工具
      fullscreenButton: true, //是否显示全屏按钮工具
    })
  });
</script>

3.完成效果图

相关推荐
华仔啊7 分钟前
别再纠结Pinia和Vuex了!一篇文章彻底搞懂区别与选择
前端·vue.js
徐同保35 分钟前
Redux和@reduxjs/toolkit同时在Next.js项目中使用
开发语言·前端·javascript
~无忧花开~39 分钟前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
渣哥40 分钟前
Spring Boot 本质揭秘:约定优于配置 + 自动装配
javascript·后端·面试
颜酱1 小时前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
海在掘金611271 小时前
从"鬼知道这对象有啥"到"一目了然" - TS接口的实战魔力
前端
spionbo1 小时前
Vue 模拟键盘组件封装方法与使用技巧详解
前端
泉城老铁1 小时前
springboot 对接发送钉钉消息,消息内容带图片
前端·spring boot·后端
顾青1 小时前
微信小程序 VisionKit 实战(二):静态图片人脸检测与人像区域提取
前端·微信小程序
hmfy1 小时前
那些前端老鸟才知道的秘密
前端