Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)

简介: Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。

简介:Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。




cesium1.jpg

Cesium ~ 第 1 篇    ——    Cesium.js具体使用过程详细




CesiumJS使用过程详细?

一. 首先,我们要想在项目中使用Cesium,需要在项目中安装Cesium.js,可以通过npm实现

npm install cesium    
//或    
npm install cesium --save
//两个执行命令,意思相同。
//安装依赖时,不带 -XX 时,默认安装在开发环境中,也就是dependencies下,上线后的依赖;

image.gif

1. --save、--save-dev、--global的区别和各自的含义


二. 下载完成后,可以在package.json中,dependencies依赖环境下,可以看到该依赖

image.gif

三. 然后在 node_modules文件中找到cesium文件(路径:node_modules > cesium > build > Cesium)这里需要用到build文件下cesium文件中的widgets.css和Cesium.js所以直接复制粘贴在public文件中

image.gif 编辑


四. 然后在public文件下的index.html文件中引入widgets.css和Cesium.js文件

image.gif 编辑


五. 这样就可以在vue页面直接使用了。(目前只找到这种引入方式,有其它引入方式的可以分享一下)

1. 直接打印查看

image.gif

2. 控制台输出

image.gif


六. 这里初始化一个cesium地球视图;新建一个cesium.js文件,然后再里面导出初始化地球视图函数(这里需要用到Access Tokens,就是cesium的访问令牌,每一个使用cesium的用户都需要自己注册创建,注册方法下面

1. 初始化Cesium

// 初始化cesium地图 JS文件
// 首先获取Cesium API
const Cesium = window.Cesium;
let viewer = null;
/**
 * 初始化地球视图函数
 */
function initCesiumMap(dom) {
  // 配置cesium专属Access Tokens,就是cesium的访问令牌,每一个使用cesium的用户都需要自己注册,然后获取自己的Access Tokens;
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZWFlYjAyYS0xN2JlLTQ0OTItOGNkOC05YWJlNGY0MjI2NmQiLCJpZCI6NDkyMjYsImlhdCI6MTYxNzM0NjA3N30.crkTg0Logk_JUA7BROy0r9RqTJWCi8NZpTyu4qI11Fo'
  viewer = new Cesium.Viewer(dom, {
    animation: false, // 是否显示动画控件
    baseLayerPicker: true, // 是否显示图层选择控件
    vrButton: false, // 是否显示VR控件
    geocoder: false, // 是否显示地名查找控件
    timeline: false, // 是否显示时间线控件
    sceneModePicker: false, // 是否显示投影方式控件
    navigationHelpButton: false, // 是否显示帮助信息控件
    navigationInstructionsInitiallyVisible: true, // 帮助按钮,初始化的时候是否展开
    infoBox: false, // 是否显示点击要素之后显示的信息
    fullscreenButton: true, // 是否显示全屏按钮
    selectionIndicator: true, // 是否显示选中指示框
    homeButton: false, // 是否显示返回主视角控件
    scene3DOnly: true, // 如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
    terrainProvider: Cesium.createWorldTerrain({
      // 光照阴影
      requestVertexNormals: true,
      // 水流效果
      requestWaterMask: true
    }), // 显示地形
    // terrainProvider: new Cesium.EllipsoidTerrainProvider({}) // 不显示地形
  })
  // 去掉logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
}
// 导出
export { Cesium, viewer, initCesiumMap };

image.gif

2. 在vue页面引入使用

import { initCesiumMap } from "../../../utils/cesium/cesium.js";
//在函数中调用initCesiumMap地图方法,并把id为cesium_map的html元素传递过去;
mounted() {
    initCesiumMap("cesium_map");
},
//当然,别忘了定义html元素
<div id="cesium_map"></div>
//并设置宽高
#cesium_map {
    width: 100%;
    height: 100%;
}

image.gif

3. 运行效果如下

image.gif 编辑


七. 在这里注册cesium,获取Access Tokens

1. 注册地址


2. 注册完成后,来到如下页面,在这里创建token

image.gif


更多操作


更多详见





创作不易,感觉有用,就一键三连,感谢(●'◡'●)

相关文章
|
5天前
|
数据采集 JavaScript 前端开发
理解并应用:JavaScript响应式编程与事件驱动编程的差异
了解JavaScript的响应式编程与事件驱动编程至关重要。事件驱动编程基于事件触发函数执行,如用户交互或系统事件。响应式编程则关注数据流变化,利用Observables自动响应更新。在爬虫代理IP的Web Scraping示例中,两者分别通过axios和rxjs显示了数据抓取的不同处理方式。掌握这两者能提升异步操作的效率和代码质量。
理解并应用:JavaScript响应式编程与事件驱动编程的差异
|
2天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
16天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
161 21
|
8天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的社区医疗服务可视化系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的社区医疗服务可视化系统附带文章源码部署视频讲解等
15 4
|
7天前
|
JavaScript 定位技术 API
Js地图路线规划以及点击获取经纬度
Js地图路线规划以及点击获取经纬度
|
10天前
|
前端开发 JavaScript 网络协议
深入探讨其在JavaScript中的应用
【6月更文挑战第12天】WebSockets是为解决HTTP协议在实时通信中的局限而生的一种全双工通信协议,基于TCP,适合在线聊天、游戏等场景。JavaScript中的WebSocket API使浏览器与服务器能建立持久连接,方便数据实时传输。通过创建WebSocket对象、监听事件(open、message、error、close)来管理连接、发送/接收数据及处理错误。相较于AJAX轮询和长轮询,WebSockets更高效实时,是现代Web实时应用的理想选择。
21 3
|
11天前
|
前端开发 JavaScript 开发者
函数式编程在JavaScript中的应用
【6月更文挑战第10天】本文探讨了函数式编程在JavaScript中的应用,介绍了函数式编程的基本概念,如纯函数和不可变数据。文中通过示例展示了高阶函数、不可变数据的使用,以及如何编写纯函数。此外,还讨论了函数组合和柯里化技术,它们能提升代码的灵活性和可重用性。掌握这些函数式编程技术能帮助开发者编写更简洁、可预测的JavaScript代码。
|
10天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的短视频流量数据分析与可视化附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的短视频流量数据分析与可视化附带文章和源代码部署视频讲解等
14 0
基于ssm+vue.js+uniapp小程序的短视频流量数据分析与可视化附带文章和源代码部署视频讲解等
|
16天前
|
存储 JavaScript 定位技术
|
18天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的服装品牌的推广及应用网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的服装品牌的推广及应用网站附带文章和源代码部署视频讲解等
26 4