Cesium Workshop

参考资料：
https://cesiumjs.org/tutorials/Cesium-Workshop/

https://github.com/geoadmin/workshop-cesium3d
https://github.com/AnalyticalGraphicsInc/cesium-workshop

概述

通过该教程，能够大致了解Cesium的功能，包括：

配置1个Cesium viewer
加载各种数据集
创建几何和设置样式
加载3D Tiles
控制相机
添加鼠标交互

1. 设置和准备工作

设置

确认你的浏览器支持Cesium
确认已安装Node.js
下载代码 $ git clone https://github.com/AnalyticalGraphicsInc/cesium-workshop
切换到cesium-workshop根目录
使用node.js服务运行web应用

$ npm install

$ npm start

Cesium development server running locally.  Connect to http://localhost:8080

也可以使用python简易HTTP服务程序运行该web应用:

// Python2

$ python -m SimpleHTTPServer 8080

// Python3

$ python -m http.server 8080

打开浏览器，输入地址： http://localhost:8080
app目录简介：

index.html - 主页面. 在本地web server中部署，打开该文件就可以运行示例程序.
Source - 包括index.html中引用的App.js, 这是app的代码所在位置.
ThirdParty - 第三方库，这里只有CesiumJS库.
server.js - 简单node.js 服务器程序，用于运行程序.
package.json - node.js 服务器的依赖库.
LICENSE - 授权信息，Apache 2.0.
.gitignore - git仓库中不包括的文件列表.

CesiumJS与现有JavaScript库和框架兼容，如:

Cesium + webpack - 给出了使用webpack打包web应用的教程.
Cesium + React
Cesium + ThreeJS

页面结构：

index.html: Cesium widget本身是1个div,关键代码包括：
包含CesiumJS，定义Cesium对象

<script src="ThirdParty/Cesium/Cesium.js"></script>

也可以在生产环境仅仅包含Cesium的某个模块 ThirdParty/Cesium/Source/ , 以便减少应用大小.
为Cesium Viewer widget创建1个div

<div id="cesiumContainer"></div>

添加app代码：

<script src="Source/App.js"></script>

在<head>标签中添加html元素样式（使用index.css文件）

<link rel="stylesheet" href="index.css" media="screen">

Cesium自带系列CSS，也可以引入

@import url(ThirdParty/Cesium/Widgets/widgets.css);

另外的样式可以用来覆盖Cesium的CSS.

流程

使用最喜欢的文本编辑器打开Source/App.js并删除内容.
复制 Source/AppSkeleton.js 为 Source/App.js.
确认 cesium-workshop 服务正在运行
线上web浏览器和切换到localhost:8080.
修改Source/App.js 并刷新页面

创建viewer

任何Cesium应用的基础都是Viewer, 一个交互的三维球，创建1个viewer并绑定到id 为"cesiumContainer" 的div上.

var viewer = new Cesium.Viewer('cesiumContainer');

默认情况下，场景能够处理鼠标和触控输入事件，如相机控制:

鼠标左键单击和拖动 - 在地球表面移动相机.
鼠标右键单击和拖动 - 放大、缩小(相机拉近或拉远)
鼠标中键滚轮 - 放大、缩小
鼠标中键单击和拖动 - 以地球表面某个点旋转相机

触控事件：

一个手指拖曳- 平移视图(One finger drag - Pan view)
两个手指捏放- 缩放视图(Two finger pinch - Zoom view)
两个手指拖曳，相同方向- 俯仰视图(Two finger drag, same direction - Tilt view)
两个手指拖曳，相反方向- 旋转视图(Two finger drag, opposite direction - Rotate view)

除球外，Viewer还默认提供了一些widget.

默认的Cesium Viewer

地名搜索 : 地名搜索工具，相机飞行到查询地点. 默认使用Bing Maps数据.
默认视图 : 视图复位，回到默认视图.
场景模式 : 切换模式3D, 2D 或2.5D (Columbus View).
基础图层 : 选择影像或地形图层.
帮助 : 帮助，提供默认相机控制方法.
动画 : 控制动画播放速度.
鸣谢 : 显示数据归属.
时间线 : 指示当前时间，允许用户跳到指定时间.
全屏 : 全屏.

这些widget的显示可以在创建Viewer时进行配置,详细参数见Viewer文档：

var viewer = new Cesium.Viewer('cesiumContainer', {

    scene3DOnly: true,

    selectionIndicator: false,

    baseLayerPicker: false

});

Cesium ion

Cesium ion是一个三维数据切片和存储的平台，这里使用ion平台上存储的Sentinal-2 影像和Cesium World Terrain.
需要访问https://cesium.com/ion/ 注册一个免费账户，并在Access Tokens页面创建访问令牌.
Cesium ion默认提供5GB存储空间.

在创建viewer之前设置访问令牌：

Cesium.Ion.defaultAccessToken = '<YOUR ACCESS TOKEN HERE>';

添加影像图层

Cesium支持影像图层的添加、删除、排序、调整.
每个图层的亮度(brightness)、对比度(contrast)、灰度(gamma)、色相(Hue)、饱和度(Saturation)都支持动态调整.

Cesium提供影像图层操作的很多方法，包括颜色调整(color adjustment)、图层混合(layer blending)等. 代码示例：

Cesium提供了多个影像图层提供者，包括：

WMS - OGC标准，WebMapServiceImageryProvider
TMS - 访问地图瓦片的REST接口，可以使用MapTiler or GDAL2Tiles. I
生成，参见createTileMapServiceImageryProvider
WMTS(with time dynamic imagery) -OGC标准， WebMapTileServiceImageryProvider
ArcGIS - ArcGIS Server REST API ，见 ArcGisMapServerImageryProvider
Bing Maps -Bing Maps REST Services
，需要Bing Maps key, BingMapsImageryProvider
Google Earth -Google Earth Enterprise server发布的数据，见GoogleEarthEnterpriseImageryProvider
Mapbox - 需要token, MapboxImageryProvider
Open Street Map -访问OSM或Slippy map tiles
，参见 createOpenStreetMapImageryProvider
Cesium Ion平台 - IonImageryProvider

其他内置影像图层提供者

GridImageryProvider
ImageryProvider
SingleTileImageryProvider - 从一张图片中创建瓦片
TileCoordinatesImageryProvider
UrlTemplateImageryProvider - 自定义瓦片切片方案，如//cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg.

当然，也可以通过实现[ImageryProvider接口定义新的影像接入方式。以 SingleTileImageryProvider 为例简要介绍：

url - 图片的url t. Like many imagery providers, this is the only required property. In other imagery providers this url points to the server or the root url of the service.
extent - An optional longitude-latitude rectangle that the image should cover. The default is to cover the entire globe.
credit - An optional string crediting the data source, which is displayed on the canvas. Some imagery providers, like BingMapsImageryProvider and ArcGIS Server REST API, get a credit logo or string directly from their service.
proxy - An optional proxy to use for requests to the service, which brings us to Cross-Origin Resource Sharing.

Tile coordinates - Shows how the globe is divided into tiles in a particular tiling scheme by drawing a border around each tile and labeling it with its level, X, and Y coordinates.

示例 - 使用Ion平台的Sentinel-2影像：

// Remove default base layer

viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

// Add Sentinel-2 imagery

viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));

示例 - 加载ArcGIS Rest影像,打开Hello_world，使用以下代码更换：

var viewer = new Cesium.Viewer('cesiumContainer', {

    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({

        url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'

    }),

    baseLayerPicker : false

});

示例 - 添加TMS影像

var layers = viewer.scene.imageryLayers;

var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({

    url : '//cesiumjs.org/tilesets/imagery/blackmarble',

    maximumLevel : 8,

    credit : 'Black Marble imagery courtesy NASA Earth Observatory'

}));

//调整影像图层透明度、亮度

blackMarble.alpha = 0.5; // 0.0 is transparent.  1.0 is opaque.

blackMarble.brightness = 2.0; // > 1.0 increases brightness.  < 1.0 decreases.

示例 - 添加单个图片(给定角点坐标)

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({

    url : '../images/Cesium_Logo_overlay.png',

    rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)

}));

完整代码：

var viewer = new Cesium.Viewer('cesiumContainer', {

    imageryProvider : new Cesium.ArcGisMapServerImageryProvider({

        url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'

    }),

    baseLayerPicker : false

});

var layers = viewer.scene.imageryLayers;

var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({

    url : '//cesiumjs.org/tilesets/imagery/blackmarble',

    maximumLevel : 8,

    credit : 'Black Marble imagery courtesy NASA Earth Observatory'

}));

blackMarble.alpha = 0.5; // 0.0 is transparent.  1.0 is opaque.

blackMarble.brightness = 2.0; // > 1.0 increases brightness.  < 1.0 decreases.

layers.addImageryProvider(new Cesium.SingleTileImageryProvider({

    url : '../images/Cesium_Logo_overlay.png',

    rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)

}));

添加地形图层

作者：布谷李
链接：https://www.jianshu.com/p/f66caf4cb43f
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

Cesium Workshop的更多相关文章

转：Cesium 和 Webpack
原文地址:https://www.jianshu.com/p/85917bcc023f 注意:webpack 和 webpack-cli 的安装参考 https://www.cnblogs.com/m ...
Cesium官方教程13--Cesium和Webpack
原文地址:https://cesiumjs.org/tutorials/cesium-and-webpack/ Cesium 和 Webpack Webpack是非常强大非常流行的JavaScript ...
Cesium参考资源
Reference resources cesium官网 cesium 下载 cesium官方文档 APIs cesium-workshop github cesium 官方示例 cesium git ...
Cesium中级教程10 - CesiumJS and webpack
Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ webpack是打包JavaScript模块流行且强大的工具.它 ...
Cesium中级教程4 - 空间数据可视化（二）
Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Viewer中的Entity功能让我们看看Viewer为操作e ...
Ceisum官方教程2 -- 项目实例（workshop）
原文地址:https://cesiumjs.org/tutorials/Cesium-Workshop/ 概述我们很高兴欢迎你加入Cesium社区!为了让你能基于Cesium开发自己的3d 地图项目 ...
cesium自定义气泡窗口infoWindow
一.自定义气泡窗口与cesium默认窗口效果对比: 1.cesium点击弹出气泡窗口显示的位置固定在地图的右上角,默认效果: 2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说 ...
cesium核心类Viewer简介
1.简单描述Viewer Viewer类是cesium的核心类,是地图可视化展示的主窗口,cesium程序应用的切入口,扮演必不可少的核心角色. 官网的英文解析如下: A base widget fo ...
Cesium简介以及离线部署运行
Cesium简介 cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎,一款开源3DGIS的js库.cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区 ...

随机推荐

Arc Engine二次开发——弹窗进行属性查询
在Arcmap中使用Sapefile格式的矢量数据时,经常会用到其属性查询的功能,弹出窗体然后用户鼠标点击或手动输入查询条件,进而查询到感兴趣的要素.在AE二次开发中也经常需要这个功能,于是在此记录整 ...
FreeRTOS 基础简介
为什么选择FreeRTOS UCOS资料多,尤其是中文资料.FreeRTOS资料少,而且大多数是英文的.原因如下: 1.FreeRTOS免费!UCOS收费.这是主要原因 2.很多半导体厂商,采用Fre ...
Python语言程序设计：Lab5
Programming Create a Class Student which should have the following information:Parameters passed to ...
科大讯飞语音识别Demo创建
1.下载官方SDK https://www.xfyun.cn/sdk/dispatcher 2.打开AS,选择import project 3.导入mscV5PlusDemo 4.解决ERROR: ...
Linux 本机/异机文件对比
一:提取异步机器文件 #ssh 192.168.1.2 "cat /etc/glance/glance-api.conf | grep -v '#' |grep -v ^$" 二: ...
Codeforces #496 E1. Median on Segments (Permutations Edition)
http://codeforces.com/contest/1005/problem/E1 题目 https://blog.csdn.net/haipai1998/article/details/80 ...
vue---父调子 $refs （把父组件的数据传给子组件）
ps:App.vue 父组件 Hello.vue 子组件 App.vue : <template> <div id="app"> <input t ...
jcmd命令实战
继续来根据之前的那篇infoq的文章的介绍熟悉工具,上一次咱们学习使用了: 接下来学习它里面提到的另一个工具: jcmd是一个非常之强大的命令行工具,能输出很多很多的信息,也是在处理JVM的一些问题经 ...
0014SpringBoot结合thymeleaf实现登录功能
该登录功能需要实现的需求如下: 1.输入用户名密码,如果验证通过,进入首页,并显示登录的用户名 2.如果验证不通过,则重新进入登录页面,并显示“用户名密码错误” 3.如果未经登录,不能直接访问首页等静 ...
BZOJ1101 [POI2007]Zap 和 CF451E Devu and Flowers
Zap FGD正在破解一段密码,他需要回答很多类似的问题:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d.作为FGD的同学,FGD希望得到 ...