cesium01-vue中创建一个三维地球和相关的控件属性注释

一、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容器：初始化地图的时候的参数
 
1
2

如果项目中还没有安装Cesium，就先进行cesium库的安装：

npm i cesium --save 
1

安装完之后，如果是基于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" 
1
2
3
4

引入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";
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

初始化函数编写好之后，至此，实际上就初始化好一个三维地球了，如果想要在浏览器中查看可以现在mounted中去调用初始化函数

mounted(){this.initCesium()
}
// 终端上运行项目,根据自身的项目配置的脚本命令去启动，不一定是下面的通用的启动脚本命令
npm run serve 
1
2
3
4

启动项目之后，根据启动后提示的服务地址去打开浏览器，就可以看到一个三维地球，明晃晃的显示在你的眼前啦。创造一个地球的目标达成，你可以继续深入的去学习cesium的知识，去开发出你的可视化地球的项目，只要敢想，敢尝试，你一定可以做成你想要的地理信息项目。

四、写在最后

自己也是刚刚接触cesium没有很久,文章中出现知识的认知错误和文字或者代码错误，大家多多包涵、指正，欢迎大家指正，共同进步。