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容器:初始化地图的时候的参数
<div id="cesiumContainer"></div>

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

npm i cesium --save

安装完之后,如果是基于vue2开发,则需要进行webpack的配置,才能够去使用cesium基于vue2cesiumwebpack配置 见文章: vue2中配置Cesium的环境,配置完成后,就可以初始化cesium地球啦,第一步先在需要使用cesium的组件中去引入Cesiumcesium相关的样式文件:

// 引入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没有很久,文章中出现知识的认知错误和文字或者代码错误,大家多多包涵、指正,欢迎大家指正,共同进步。

猜你喜欢

转载自juejin.im/post/7112267837833478151