17zwd一起做网站教学视频,企业网站维护服务,用电信固定IP做网站,重庆平台网站建设哪里有文章目录 1.创建vuevite项目2.安装 Cesium2.1 安装cesium2.2 安装vite-plugin-cesium插件#xff08;非必选#xff09;2.3 新建组件页面map.vue2.4 加载地图 3.完成效果图 1.创建vuevite项目
打开cmd窗口执行以下命令#xff1a;cesium-vue-app是你的项目名称
npm create… 文章目录 1.创建vuevite项目2.安装 Cesium2.1 安装cesium2.2 安装vite-plugin-cesium插件非必选2.3 新建组件页面map.vue2.4 加载地图 3.完成效果图 1.创建vuevite项目
打开cmd窗口执行以下命令cesium-vue-app是你的项目名称
npm create vitelatest cesium-vue-app -- --template vue创建完成后依次执行以下命令用于安装、启动项目
cd cesium-vue-app
npm install
npm run dev2.安装 Cesium
进入项目文件夹打开cmd窗口执行
2.1 安装cesium
npm install --save cesium2.2 安装vite-plugin-cesium插件非必选
vite-plugin-cesium 是一个专门为 Vite 构建工具定制的插件用于在 Vite 项目中轻松使用 Cesium 库。它简化了在 Vite 项目中集成 Cesium 的过程并提供了一些额外的功能和配置选项。而直接安装 Cesium 库你需要手动配置 Vite 项目以确保正确引入和使用 Cesium。这可能涉及到配置模块加载器、处理依赖关系、解决版本冲突等问题。相比之下使用 vite-plugin-cesium 插件可以让这些步骤更加简单和方便
cmd执行插件安装命令
npm i vite-plugin-cesium vite -D配置vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import cesium from vite-plugin-cesiumexport default defineConfig({plugins: [vue(),cesium()],
})2.3 新建组件页面map.vue
1引入cesium
script setupimport { ref } from vueimport * as Cesium from cesium
/script2创建一个div作为地图容器并设置其id为“cesiumContainer” div classmap-box idcesiumContainer/div3设置地图容器样式的高度和宽度均为100%
首先要将body的宽高设置为100vw和100vh
body {margin: 0;display: flex;place-items: center;min-height: 100%;height: 100vh;width: 100vw;
}其次设置vue项目dom容器的宽高为100%
#app {margin: 0 auto;text-align: center;height: 100%;width: 100%;
}最后设置地图容器的宽高
style scoped.map-box {height: 100%;width: 100%;}
/style2.4 加载地图
1申请token 首先登录网址https://cesium.com/ion/signin/tokens在注册后申请token然后创建一个cesium对象并使用我们创建的div容器承载地图。 2编写代码脚本加载容器。
script setupimport {ref,onMounted} from vueimport * as Cesium from cesiumonMounted(() {Cesium.Ion.defaultAccessToken your cesium tokenconst viewer new Cesium.Viewer(cesiumContainer, {geocoder: true, // 是否显示位置查找工具true表示是false表示否homeButton: true, // 是否显示首页位置工具sceneModePicker: true, //是否显示视角模式切换工具baseLayerPicker: true, //是杏显示默认图层选择工具navigationHelpButton: true, //是否显示导航帮助工具animation: true, //是杏显示动画工具timeline: true, //是否显示时间轴工具fullscreenButton: true, //是否显示全屏按钮工具})});
/script3.完成效果图
