一、cesium
基本介绍
cesium
是一款开源的3D地图框架,其基于JavaScript语言开发,可以在浏览器端运行的一个三维地图可视化框架。官网介绍:CesiumJS is a geospatial 3D mapping platform for creating virtual globes. Our mission is to create the leading web-based globe and map for visualizing dynamic data. We strive for the best possible performance, precision, visual quality, ease of use, platform support, and content.
二、cesium
相较于同类型开源库的优势
- 完全的开源,甚至可以进行商用的二次开发
- 支持2D,2.5D,3D 形式的地理(地图)数据展示
- 可以绘制各种几何图形、高亮区域,支持导入图片,甚至三维模型等多种数据可视化展示
- 可用于动态数据可视化并提供良好的触摸支持,支持绝大多数的浏览器和移动端浏览器
- 支持基于时间轴的动态流式数据展示,可以使得时空信息的展示得到很好的支持
三、基于Vue
初始化一个地球,让我们开始认识下cesium
cesium
地球的初始化,和传统的2D地图的创建大抵相同,第一步都是需要容器来承载地图实例,后面就是根据不同的库的API
特性进行需求开发了。
// cesium容器:初始化地图的时候的参数
<div id="cesiumContainer"></div>
如果项目中还没有安装
Cesium
,就先进行cesium
库的安装:
npm i cesium --save
安装完之后,如果是基于
vue2
开发,则需要进行webpack
的配置,才能够去使用cesium
,基于vue2
的cesium
的webpack
配置 见文章: vue2中配置Cesium的环境,配置完成后,就可以初始化cesium
地球啦,第一步先在需要使用cesium
的组件中去引入Cesium
和cesium
相关的样式文件:
// 引入cesium库
import * as Cesium from 'cesium'
// 样式文件引入,防止cesium内置的样式混乱
import "cesium/Build/Cesium/Widgets/widgets.css"
引入
cesium
库之后,在methods中编写地球初始化的函数
data(){
return {
viewer: null // 初始化地球后的viewer对象
}
}
initCesium() {
// 先配置下你在cesium官网上申请的token,如果不配置token的话,使用不了cesium的Ion上面的知产
Cesium.Ion.defaultAccessToken = '你申请的token'
// 底图资源加载
let layer = new Cesium.ArcGisMapServerImageryProvider({
// 这里使用的arcgis提供的公共底图服务
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
// Viewer()参数:1、cesium容器的id;2、地球初始化的配置项,配置项的一些控件的如下,可以逐个打开演示
this.viewer = new Cesium.Viewer('cesiumContainer',{
animation: false, // 是否显示动画控件
shouldAnimate: false, // 是否显示左下角的动画控件
homeButton: false, // 是否显示Home按钮
fullscreenButton: false, // 是否显示全屏按钮
baseLayerPicker: false, // 是否显示图层选择控件
geocoder: false, // 是否显示地名查找控件
timeline: false, // 是否显示时间线控件
sceneModePicker: false, // 是否显示投影方式控件
navigationHelpButton: false, // 是否显示帮助信息控件
infoBox: false, // 是否显示点击要素之后显示的信息
requestRenderMode: false, // 启用请求渲染模式
scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存
sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
terrainProvider: Cesium.createWorldTerrain(),
imageryProvider: layer // 底图配置,将前面请求来的底图资源对象放上
})
//去除版权信息,就是将cesium的版权logo信息隐藏
this.viewer._cesiumWidget._creditContainer.style.display = "none";
}
初始化函数编写好之后,至此,实际上就初始化好一个三维地球了,如果想要在浏览器中查看可以现在
mounted
中去调用初始化函数
mounted(){
this.initCesium()
}
// 终端上运行项目,根据自身的项目配置的脚本命令去启动,不一定是下面的通用的启动脚本命令
npm run serve
启动项目之后,根据启动后提示的服务地址去打开浏览器,就可以看到一个三维地球,明晃晃的显示在你的眼前啦。创造一个地球的目标达成,你可以继续深入的去学习cesium的知识,去开发出你的可视化地球的项目,只要敢想,敢尝试,你一定可以做成你想要的地理信息项目。
四、写在最后
自己也是刚刚接触
cesium
没有很久,文章中出现知识的认知错误和文字或者代码错误,大家多多包涵、指正,欢迎大家指正,共同进步。