vue3项目中引入Cesium

已于 2024-09-29 08:05:34 修改
阅读量1.1k 收藏 21
点赞数 27
分类专栏： Cesium Vue 文章标签： Cesium Vue
于 2024-09-29 01:11:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62317155/article/details/142624698
版权
Vue 同时被 2 个专栏收录
21 篇文章 1 订阅
订阅专栏
Cesium
2 篇文章 0 订阅
订阅专栏

1、创建项目

本文章是我学习Cesium时记录下来的，是我用来学习使用的。
使用vite+vue3创建项目，组件库使用element plus，项目地址在我的gitee仓库中有，https://gitee.com/the-world-keeps-blooming/my-vite-vue-cesium。
在vite中有一个关于Cesium的插件：vite-plugin-cesium。下面介绍如何在项目中使用这个插件，插件的网址如下所示：https://github.com/nshen/vite-plugin-cesium，这个插件的官网中有如何使用的说明。

npm i cesium vite-plugin-cesium vite -D

安装好对应的依赖之后，找到项目的vite.config.js文件，进行大概如下的配置。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入Cesium插件
import cesium from 'vite-plugin-cesium';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()]
})

然后在某一个vue文件中，进行配置。如我这里是放在了项目的src\views\cesium\cesium_hello_world\index.vue中。具体的vue代码如下所示。

<template>
    <div style="width: 100%; height: 100%;">
      <div id="cesiumContainer"></div>
    </div>
  </template>
  
  <script setup>
  import { onMounted } from 'vue';
  import * as Cesium from 'cesium';
  onMounted(() => {
    const viewer = new Cesium.Viewer('cesiumContainer');
  })
  
  </script>
  
  <style scoped>
  #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  </style>

结果如下图所示，出现地球就可以了。至于UI什么的，不要介意这个，将就这个看就行了。
在这里插入图片描述

2、配置自己的token

插件中使用的关于Cesium的token是官网提供的默认token，如果想要控制访问Cesium的某些资源，我们就需要使用自己的token了。具体的token申请官网在这里https://ion.cesium.com/tokens?page=1，具体的token可以根据下面的图片中找到。
在这里插入图片描述

2.1、修改为自己token的代码

对应的vue文件

<template>
    <div style="width: 100%; height: 100%;">
        <div id="cesiumContainer"></div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
    // 对应的Cesium的token
    let token = '你的token'
    Cesium.Ion.defaultAccessToken = token
    const viewer = new Cesium.Viewer('cesiumContainer', {
        terrain: Cesium.Terrain.fromWorldTerrain(),
    });
})

</script>

<style scoped>
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
</style>

出现对应的地球就可以了，说明token配置成功了。
在这里插入图片描述

3、获得一个干净的地球

如上图所示的图片中，地球界面有很多对应的按钮，搜索框等内容。那么，我们该如何获取一个干净的地球呢？具体可以往后看。对应的vue文件的代码如下所示。

<template>
    <div style="width: 100%; height: 100%;">
        <div id="cesiumContainer"></div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
    // 对应的Cesium的token
    let token = '你的token'
    Cesium.Ion.defaultAccessToken = token
    const viewer = new Cesium.Viewer('cesiumContainer', {
        // 搜索框
        geocoder: false,
        // home键
        homeButton: false,
        // 全屏按钮
        fullscreenButton: false,
        // 动画控件
        animation: false,
        // 场景模式选择器,就是控制二三维的那个
        sceneModePicker: false,
        // 时间轴
        timeline: false,
        // 导航帮助提示按钮
        navigationHelpButton: false,
        // 地图选择器
        baseLayerPicker: false
    });
})

</script>

<style scoped>
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
/* 隐藏底部 */
:deep(.cesium-viewer-bottom) {
    display: none !important;
}

</style>

结果如下图所示：
在这里插入图片描述
从上图的结果中可以看出得到了一个纯净版的Cesium界面了。

4、加载Cesium官方提供的在线地形

具体vue的代码如下所示

<template>
    <div style="width: 100%; height: 100%;">
        <div id="cesiumContainer"></div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted(() => {
    // 对应的Cesium的token
    let token = '你的token'
    Cesium.Ion.defaultAccessToken = token
    const viewer = new Cesium.Viewer('cesiumContainer', {
        // 搜索框
        geocoder: false,
        // home键
        homeButton: false,
        // 全屏按钮
        fullscreenButton: false,
        // 动画控件
        animation: false,
        // 场景模式选择器,就是控制二三维的那个
        sceneModePicker: false,
        // 时间轴
        timeline: false,
        // 导航帮助提示按钮
        navigationHelpButton: false,
        // 地图选择器
        baseLayerPicker: false,
        // cesium 提供的官方地形
        terrain: Cesium.Terrain.fromWorldTerrain()
    });
    // 飞行到某个位置
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(102.90, 27.23, 5600),
        orientation: {
            heading: Cesium.Math.toRadians(0.0),
            pitch: Cesium.Math.toRadians(-15.0),
        }
    });

})

</script>

<style scoped>
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 隐藏底部 */
:deep(.cesium-viewer-bottom) {
    display: none !important;
}
</style>

结果如下所示，从图中可以看到有地形起伏了。
在这里插入图片描述

5、加载Cesium官方提供的在线建筑

具体vue的代码如下所示

<template>
    <div style="width: 100%; height: 100%;">
        <div id="cesiumContainer"></div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
onMounted( async () => {
    // 对应的Cesium的token
    let token = '你的token'
    Cesium.Ion.defaultAccessToken = token
    const viewer = new Cesium.Viewer('cesiumContainer', {
        // 搜索框
        geocoder: false,
        // home键
        homeButton: false,
        // 全屏按钮
        fullscreenButton: false,
        // 动画控件
        animation: false,
        // 场景模式选择器,就是控制二三维的那个
        sceneModePicker: false,
        // 时间轴
        timeline: false,
        // 导航帮助提示按钮
        navigationHelpButton: false,
        // 地图选择器
        baseLayerPicker: false,
        // cesium 提供的官方地形
        terrain: Cesium.Terrain.fromWorldTerrain()
    });
    // 飞行到某个位置
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(102.90, 27.23, 5600),
        orientation: {
            heading: Cesium.Math.toRadians(0.0),
            pitch: Cesium.Math.toRadians(-15.0),
        }
    });

    // 加载Cesium官方提供的建筑物，注意了，这里使用了await的语法
    const buildingTileset = await Cesium.createOsmBuildingsAsync();
    viewer.scene.primitives.add(buildingTileset);

})

</script>

<style scoped>
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 隐藏底部 */
:deep(.cesium-viewer-bottom) {
    display: none !important;
}
</style>

结果如下所示：
在这里插入图片描述

总结

因为加载地形和建筑物需要请求的网络资源挺多的，所以，项目中Cesium初始化的加载，只是加载出地球，得到一个纯净版的地球。如果需要地形和建筑物，直接复制文章中相关的代码到对应的vue组件中就可以了。

m0_62317155
关注
专栏目录
vue2.0项目集成Cesium的实现方法
12-09
安装cesium 在已有项目中执行, npm i cesium 修改配置 build/webpack.base.conf.js 1、定义 Cesium 源码路径 const cesiumSource = '../node_modules/cesium/Source' 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.con
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
Vue2创建项目并配置Cesium加载三维地图
03-05
1.基于Vue2 的Cesium三维地图框架; 2.已引入elementui组件 已完成对cesium的加载配置安装及测试; 3.可在该框架上开发、发布打包等; 4.该框架没有其它冗余依赖等，可以直接到项目使用，无版权控制。
在vue3中使用Cesium保姆篇
彭于晏的博客
01-05 6491
当然我们如果在项目中使用三位地图的话肯定不要左下角的的logo的，由于cesium的api没办法关闭，所以就只能用css样式来控制了，代码中用到了cesium的token,如果不知道token在哪取的话可以看这篇文章。在cesium中用到的坐标是笛卡尔坐标，所以我们的经纬度需要进行转换后才能使用。这样可以让logo隐藏掉但是，由于是在vue3中， v-deep已经废弃了，当然，这个是写在组件加载后的，自然还要引入onMounted。在里面引入刚才下载的插件并使用，代码如下。暂时更到这里，后续还会更新。
Vue3+cesium环境搭建
m0_58786911的博客
07-15 2027
Vue3+cesium环境搭建，首先确保电脑已经安装node.js,vue.js
cesium+vue3实体entity学习
最新发布
weixin_51983847的博客
09-14 1071
是 Cesium 中的标注（类似于标记图片），这里为该标注设置了图片路径和缩放比例。是一个椭圆，通过设置半长轴、半短轴以及高度来生成实体，并给它加上边界轮廓。语法来初始化并渲染各种几何实体，包括点、线、面、盒子、椭圆、矩形、墙等。是矩形，定义了左下和右上角的经纬度范围，并设置了半透明红色。设置了线的宽度和颜色。是一个蓝色的点，位置由经度 120 和纬度 30 确定，是整个场景的入口对象，所有的实体、相机操作都依赖于它。是一个盒子，指定位置、维度（长、宽、高）和颜色。生成的数组来绘制带有高度的墙。
创建vue3项目并集成cesium插件运行
nandao158的博客
03-23 4719
开发人员可以根据需要自定义 Git 钩子脚本，并将其放置在 .husky 文件夹中相应的钩子文件中，例如 pre-commit 钩子脚本会在提交代码前执行。配置 Husky 工具的方式通常是在项目的 package.json 文件中添加相应的配置项，例如指定钩子脚本的路径和需要执行的命令等。Source文件夹是Cesium整个项目工程的重中之重，涉及到的所有类的源码和自定义shader（渲染）源码都存储在此文件夹里，可以通过阅读源码研究每个类、属性、方法及事件的实现原理。大概是找不到cesium相关类。
vue3中使用cesium
bighead的博客
03-20 1839
Cesium是一个开源的JavaScript库，专门用于创建3D地球和2D地图的Web应用程序。它提供了丰富的功能和工具，使得开发人员能够轻松地构建出高质量的地理空间可视化应用。
vue3【vite】中使用cesium
11-27 3842
【代码】vue3【vite】中使用cesium。
vue2.X+Cesium
09-23
在"antd+vue2.X+Cesium加载三维球的示例"中，我们看到Ant Design被引入到项目中。Ant Design是阿里巴巴开发的一套优秀的前端UI组件库，提供了丰富的表格、按钮、表单、导航等组件，使得开发者可以快速构建出美观且...
vue3整合cesium（ts+vite构建器）
qq_35359474的博客
11-15 996
vue3 ts vite整合cesium
Vue3+Cesium实现地图标点画出点、线、面，并获取其坐标
小阮的笔记本
05-17 2197
cesium画点线面，点、线动画
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 420
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
cesium学习（一），在vue3项目中引入cesium
weixin_46561899的博客
04-30 653
参考文档：https://blog.csdn.net/weixin_47872719/article/details/136875619。中文网地址：http://cesium.xin/cesium/cn/Documentation1.62/Viewer.html。获取token地址：https://ion.cesium.com/stories。
vue3+cesium项目搭建
Rice_w的博客
07-10 4935
最近需要在一个Vue3的项目中使用到cesium，对于一个cesium没有太多了解的人来说，还是比较麻烦的，本篇博文就将自己在这个过程踩的坑记录下来，有需要的可以看一下。
vue引入cesium
song_song0927的博客
10-11 3232
vue-cli2引入cesium
vue3集成Cesium
Raccon_的博客
10-10 635
笔记
在vue项目中引入Cesium 并创建一个模型
05-19
要在Vue项目中引入Cesium，可以使用以下步骤： 1.安装cesium：使用npm或yarn安装Cesium库。 ```bash npm install cesium --save ``` 或者 ```bash yarn add cesium ``` 2.在Vue项目中引入Cesium： 在main.js中添加以下代码： ```javascript import Vue from 'vue' import Cesium from 'cesium/Cesium' import 'cesium/Widgets/widgets.css' Vue.prototype.Cesium = Cesium ``` 3.创建Cesium模型： 在Vue组件中，可以使用以下代码创建一个简单的Cesium模型： ```html <template> <div id="cesiumContainer"></div> </template> <script> export default { mounted() { // 创建cesium viewer const viewer = new this.Cesium.Viewer('cesiumContainer') // 加载模型 const entity = viewer.entities.add({ name: 'model', position: this.Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), model: { uri: './path/to/model.gltf' } }) } } </script> <style> #cesiumContainer { height: 500px; } </style> ``` 在mounted方法中，我们创建一个Cesium Viewer实例，并将其渲染到id为cesiumContainer的div中。然后，我们使用Cesium.entities.add方法添加一个实体，其中包含一个简单的gltf模型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值