当前位置:   article > 正文

【Cesium 编程第一篇】概述、环境搭建、界面介绍

cesium

年前年后一直在面试,发现一个奇怪的现象:很多互联网公司经受住三年的疫情冲击,反而在疫情放开的那一刻撑不住了,很多大厂都在批量的裁员:美国硅谷、北京字节、迪士尼中国等等。在北京的朋友也是年后到现在一直没有找到合适的工作,当然不是他技术不行找不到,而且薪资一泻千里,差距太大,甚至调侃说:不如买辆车去跑滴滴
我面试的是前端开发岗位,大家也都知道,这几年培训机构出来的人员多如牛毛,程序员早已经是烂大街的存在,加上疫情公司紧张,裁员,就业形势严峻。如果再只是一些基础的前端知识:如:小程序、Uniapp、Vue、React 等基础技能已经不能满足日益增长的需求,并且价值已经明显不存在。
现在国家大力推广数字化,很多高新科技开始迈入数字化大屏的门槛,面试过程中会发现诸如:水利、交通、智慧城市等等这些都已经开始往 3D 发展,要求的技术能力也是日新月异。这些可能在国外已经很成熟,但是国内的话相关资料文献又比较少,像 WebGL、Cesium、Openlayers 等。如果掌握了这些技术,无疑是为你面试道路上添砖加瓦,尤其最近几年,绝对是加薪利器。
本篇从 Cesium 开始,来一一揭开这些加薪利器的面纱。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客

一、什么是 cesium?

  • Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。
  • Cesium 使用 WebGL 来进行硬件加速图形,使用时不需要任何插件支持,但是浏览器必须支持WebGL;Cesium 是基于 Apache2.0 许可的开源程序。它可以免费的用于商业和非商业用途。
  • Cesium官网
  • Github
    在这里插入图片描述

二、cesium 能做什么?

  • 支持2D,2.5D,3D形式的地图展示
  • 可以绘制各种几何图形、高亮区域,支持导入图片,甚至 3D 模型等多种数据可视化展示。
  • 可用于动态数据可视化并提供良好的触摸支持,支持绝大多数的浏览器和 mobile。
  • Cesium 还支持基于时间轴的动态数据展示

三、安装

需要提前安装 node.js(自带 npm 包管理器),可根据需要是否配置淘宝镜像(cnpm)

# 安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 1
  • 2

如果项目搭建完成,可以通过以下命令安装 cesium

# 安装 cesium
npm install cesium
  • 1
  • 2

四、环境搭建

4.1 下载

如果没有搭建,只是想学习,可以通过如下的方式获取代码,并进行环境搭建:

  1. 通过 git 命令克隆 github上面的代码(部分功能可能分支才会有)
git clone https://github.com/AnalyticalGraphicsInc/cesium
  • 1

在这里插入图片描述

  1. 众所周知的原因,这里提供百度云地址(注意:不是最新代码)提取码: fgsh
  2. 如果你可以搞定网络问题,也可以去官网下载

4.2 运行

进入项目目录,执行如下命令加载依赖并运行服务

# 安装依赖
npm install

# 启动服务
node server
  • 1
  • 2
  • 3
  • 4
  • 5

打开浏览器,输入 http://localhost:8080,会看到如下界面

注:使用的浏览器必须支持 WebGL,这里推荐使用 Chrome 浏览器。

4.3 配置

如果想要使用网络 IP 访问,需要对 server.js 中的文件进行修改

var server = app.listen(argv.port, argv.public ? undefined : 'localhost', function() { 
	// ...
})
  • 1
  • 2
  • 3

改为

var server = app.listen(argv.port, argv.public ? undefined : '', function() { 
	// ...
})
  • 1
  • 2
  • 3

推荐使用编辑器 VSCode + glTF Tools 插件进行开发。

五、如何学习 Cesium?

类似于 ECharts、G2 Plot 这些可视化图表库,首先我们要知道它都能做成什么东西。

  1. 浏览一遍沙盒中的所有示例,都有什么效果,做到心中有数
  2. 项目定制化功能时,去查找相关的示例代码(最好弄懂),通过相关的 API 修改相应的模块代码
  3. 最好对 WebGL 做深层次的学习
  4. 开始你的 Cesium 项目之旅吧,相信会越来越熟练(磨刀不误砍柴工)

六、搭建 HelloWorld

  1. 合适的盘符目录下,创建一个新的文件夹并命名,作为项目目录。
  2. 将 cesium 源码中的 Build 文件夹,拷入到这个项目目录下
  3. 项目目录下创建 HelloWorld.html 文件,将 cesium 源码 Apps 目录下的 HelloWord.html 源码复制到当前文件中并修改引入的 css 和 js 路径为当前项目 Build 目录下的文件。
  4. 通过 VSCode 相关插件开启服务(推荐 Live Server,当然也可以选择诸如:PHP、Node、IIS 等工具开启服务),运行 HelloWorld.html 文件,就能看到熟悉的地球页面了。

七、界面控件

7.1 控件介绍

在这里插入图片描述
1.Geocoder :查找位置工具,查找到之后会将镜头对准找到的地址,默认使用bing地图
2.Home Button :视角返回初始位置
3.Scene Mode Picker:选择视角的模式,有三种:3D,2D,哥伦布视图(CV)
4.Base Layer Picker:图层选择器,选择要显示的地图服务和地形服务
5.Navigation Help Button:导航帮助按钮,显示默认的地图控制帮助
6.Animation:动画器件,控制视图动画的播放速度
7.Timeline:时间线,指示当前时间,并允许用户跳到特定的时间
8.Credits Display:版权显示,显示数据归属,必选
9.Fullscreen Button:全屏按钮

7.2 隐藏界面中的元素

在开发自己的项目时,有时候需要对界面做一定的定制,这就需要隐藏—部分界面中的元素,下面我们来看看各个元素的描述
在这里插入图片描述
你需要创建一个新的工程,然后通过 JS 或者 CSS 进行工具显示隐藏控制

  1. 通过 CSS 控制
 /* 不占据空间,无法点击 */
/* 右上角按钮组 */
.cesium-viewer-toolbar,
/* 左下角动画控件 */
.cesium-viewer-animationContainer,
/* 时间线 */
.cesium-viewer-timelineContainer,
/* logo信息 */
.cesium-viewer-bottom {
        display: none;
}

/* 全屏按钮 */
.cesium-viewer-fullscreenContainer{
	position: absolute; top: -999em;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

注:全屏按钮不能通过display:none的方式来达到隐藏的目的,这是因为生成的按钮控件的行内样式设置了display属性,会覆盖引入的css属性。<div class="cesium-viewer-fullscreenContainer" style="display: block;">...</div>

  1. 通过 JS 控制
    界面上默认的小控件可以通过在初始化Viewer的时候设置相应的属性来关闭,一下列出了界面默认的小控件的关闭方法,还有很多额外的属性,可以查看帮助文档。
<div id="credit"></div>
var viewer = new Cesium.Viewer('cesiumContainer',{
    geocoder:false,
    homeButton:false,
    sceneModePicker:false,
    baseLayerPicker:false,
    navigationHelpButton:false,
    animation:false,
    creditContainer:"credit",
    timeline:false,
    fullscreenButton:false,
    vrButton:false,
    // skyBox : new Cesium.SkyBox({
    //     sources : {
    //     positiveX : 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
    //     negativeX : 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
    //     positiveY : 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
    //     negativeY : 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
    //     positiveZ : 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
    //     negativeZ : 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg'
    //     }
    // })
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/137660
推荐阅读
相关标签
  

闽ICP备14008679号