首页 > 其他分享 >基于vue和vite的cesium、cesiumNavigation使用--(1)项目构建及引入

基于vue和vite的cesium、cesiumNavigation使用--(1)项目构建及引入

时间:2023-04-12 16:33:48浏览次数:51  
标签:cesiumNavigation vue false -- Cesium cesium import true

系统信息

windows10 LTSC 21H2

vscode:1.77.1

nodejs:18.15.0

npm:9.5.0

版本信息

vue:3.2.47

vite:4.1.4

cesium:1.104.0

vue-router:4.1.6

默认在以上的js相关版本下构建环境,并包括创建vue项目,创建vue-router文件并构建路由,创建vue视图等等,以上内容不再赘述。

如环境和版本不同,则项目中可能会出现低概率的不可遇见异常,请适配相关内容后再尝试。

plus:本文所述项目引用了element-ui。

构建及应用

本文默认应用者已下载cesiumjs文件包并申请获取到Cesium的AccessToken。

 

 

cesiumjs文件包下载路径:https://cesium.com/downloads/

本文参考的CesiumJS官方文档:CesiumJS Quickstart – Cesium

构建完成的vue项目后,安装cesium,具体步骤如下:

步骤1:npm引入cesium

npm install cesium

步骤2:在main.js中设定cesium的基础url路径,这里将基础路径设置为cesium,同时在public文件夹新建文件夹cesium,将下载得到的Cesium-1.104.zip文件包下的Build\Cesium文件夹内的所有文件拷贝到刚刚新建立的cesium文件夹。

 

 

 

 注意:一定不要在main.js文件中全局引用cesium,这种引用方式并不会生效。 

步骤3:构建测试用的TestView.vue,配置好路由,引入cesiumJS,具体代码:

<template>
    <div id="testCesium" class="ht10 wd10 cesiumBox"></div>
</template>
<script setup>
import { ref , onMounted } from 'vue'
import * as Cesium from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css";
const init = () => {
    Cesium.Ion.defaultAccessToken = '你申请的cesiumAccessToken'

    // Initialize the Cesium Viewer in the HTML element with the "你定义的元素id".
    const viewer = new Cesium.Viewer('testCesium', {});
}
onMounted(()=>{
    init()
})
</script>
<style lang="less" scoped>
.cesiumBox {}
</style>

编译运行,可见如下结果: 

 

 一些注意事项:

1)一定要在应用cesium组件元素的view中引入cesiumJS,不要在main.js中进行全局引用,cesium的全局引用不会生效。

2)代码复制时一定要注意使用申请的cesiumAccessToken,用它替换"你申请的cesiumAccessToken",同时注意不要弄丢两个英文引号。

3)cesium容器所在的dom元素(本例中为div)必须添加id同时明确指定height和width,示例中通过ht10和wd10的css类指定了具体值。

4)创建cesium时引用的容器id要和之前定义的dom元素id值一致,即本例中的testCesium,它可以修改,但要两处同时修改。

步骤4:添加cesium-navigation导航

npm install cesium-navigation-es6 --save

步骤5:配置cesium-navigation导航

在TestView中引入cesium-navigation,在cesium的引用代码后添加引用代码:

 

 在定义的cesium viewer控件后添加配置项目:

 

 最后启用导航:

 

 完整代码:

<template>
    <div id="testCesium" class="ht10 wd10 cesiumBox"></div>
</template>
<script setup>
import { ref , onMounted } from 'vue'
import * as Cesium from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css"
import CesiumNavigation from "cesium-navigation-es6"

const init = () => {
    Cesium.Ion.defaultAccessToken = '你申请的cesiumAccessToken'

    // Initialize the Cesium Viewer in the HTML element with the "你定义的元素id".
    const viewer = new Cesium.Viewer('testCesium', {})
    //定义对应的cesium-navigation的配置
    let options = {}
    // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
    options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
    //用于启用或禁用罗盘。true是启用罗盘,false是禁用罗盘。默认值为true。如果将选项设置为false,则罗盘将不会添加到地图中。
    options.enableCompass= true
    // 用于启用或禁用缩放控件。true是启用,false是禁用。默认值为true。如果将选项设置为false,则缩放控件将不会添加到地图中。
    options.enableZoomControls= false
    // 用于启用或禁用距离图例。true是启用,false是禁用。默认值为true。如果将选项设置为false,距离图例将不会添加到地图中。
    options.enableDistanceLegend= false
    // 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
    options.enableCompassOuterRing= true
    new CesiumNavigation(viewer,options)
}
onMounted(()=>{
    init()
})
</script>
<style lang="less" scoped>
.cesiumBox {}
</style>

以上就是基础的cesium项目构建及插件的使用,之后将介绍如何配置cesium并引入其他影像。

标签:cesiumNavigation,vue,false,--,Cesium,cesium,import,true
From: https://www.cnblogs.com/zjw1514/p/17310253.html

相关文章

  • 基于低代码开发平台打造新时代OA系统
    一场新冠疫情令协同办公成为全民热词,加上国家数字化经济建设的背景加持,加速协同办公的进一步发展,而OA作为最基础的行政办公管理系统,几乎成为企业必备,想要通过OA协同办公系统来建立无纸化、流程化及自动化办公环境的企业不计其数。然而通过传统开发的OA系统,整体管理模式相对陈旧,企......
  • 一个造软件的罢了
    因为每个人都有一个胃,所以大多数人都必须要工作来获得生活下去的资源。因为干好工作就要有相应的技术,所以你掌握的技术越多越珍贵你的竞争力就越强。所以,趁着没到自己必须独自讨生活的地步,就要尽可能地多掌握一些技术。这种技术,不是其他人强迫你学的或者你简简单单跟着某个人学......
  • python get请求抓取网页
    importrequestsurl='https://www.douban.com/search?'#req=requests.get(url)headers={"User-Agent":"Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/94.0.4606.81Safari/537.36......
  • 【VINKA原厂技术支持】电源供电系列高稳定性抗干扰VK36Q4 DFN10 封装更小厚度超薄的四
    1.概述VK36Q4具有4个触摸按键,可用来检测外部触摸按键上人手的触摸动作。该芯片具有较高的集成度,仅需极少的外部组件便可实现触摸按键的检测。提供了4路直接输出功能。芯片内部采用特殊的集成电路,具有高电源电压抑制比,可减少按键检测错误的发生,此特性保证在不利环境条件的应用......
  • Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
    Mat矩阵点乘——A*BOpencv重载了运算符“*”,姑且称之为Mat矩阵“点乘”,其中一个重载声明为:CV_EXPORTSMatExproperator*(constMat&a,constMat&b);点乘说明:1. A*B是以数学运算中矩阵相乘的方式实现的,即Mat矩阵A和B被当做纯粹的矩阵做乘法运算,这就要求A的列数等 ......
  • ChatGPT账号没封的看过来,与ChatGPT玩个超级创意游戏
    文/高扬 这几天ChatGPT账号批量封禁之事让大家人心惶惶,今天为大家散散心,用ChatGPT玩些花样。 ChatGPT在绘画上没天赋,但我很想让它画画,怎么办? 我想到了ASCII码可以作图,想到了早期的ASCII码校园论坛。    那么,ChatGPT是不是也可以通过ASCII码展示图形,咱们来试......
  • iOS16新特性 | 灵动岛适配开发与到家业务场景结合的探索实践
    作者:京东零售姜海灵动岛是苹果在iPhone14Pro和iPhone14ProMax上首次提出的全新UI交互形式,创新性的让虚拟软件和硬件的交互变得更为流畅。当有来电、短信等通知时,灵动岛会变化形态,以便让用户能够更直观地接收到这些信息。而在用户使用一些应用App,比如音乐,并将其切换到后台......
  • FART 脱壳机原理分析
    FART是一个基于Android源码修改的脱壳机可以脱整体壳和抽取壳FART脱壳的步骤主要分为三步:1.内存中DexFile结构体完整dex的dump2.主动调用类中的每一个方法,并实现对应CodeItem的dump3.通过主动调用dump下来的方法的CodeItem进行dex中被抽取的方法的修复1.整体壳脱壳分析......
  • 阳光开朗大社畜
    这是一个美妙的晨九,社畜我们挤着地铁社身畜地,早畜晚归;每个人拿着一部手机车长拉开车门,推动拉杆,‘我们社畜现在开始’‘每个人看着自己的周围,盼望这眼前那里的落脚位置’第一个乘客拐棍有些颤抖,像是随时的倒地第二个乘客是买菜大妈,她的任务是盯着第三个乘客漏着的长腿,她和我......
  • C语言二维数组
    #include<stdio.h>intmain(){/**inta[3][5];通常理解a为一个三行五列的矩阵*///二维数组的遍历inta[3][5];inti,j;for(i=0;i<3;i++){for(j=0;j<5;j++){a[i][j]=i*j;}}//二......