Cesiumjs on Coinidea的博客

[cesiumjs]分享一个学习cesiumjs的中文社区

Thu, 28 Jun 2018 07:23:08 +0000

在cesiumjs中文社区的时间线中我写到：

**2021年06月09日 * **QQ群807482793，群成员已满3000人，日均uv600+，Cesium中文网2群：811457177

**2020年11月05日 * **QQ群807482793，群成员超过2000人，微信群已满500人，创建微信2群。

**2019年11月26日 * ** 注册人数破400，QQ群807482793，群成员超过1000人，日均uv300+

**2019年05月13日 * **微信群2小时人数破100，若想进群，请添加Cesium中文网个人账号：

2019年05月09日 * 注册用户数破200，QQ群807482793，群成员超过450人

2018年12月20日 * 注册用户数破100，QQ群807482793，群成员超过170人

2018年11月06日 * 注册用户数65，QQ群807482793，群成员超过100人

2018年10月10日 * 注册用户数51，日uv破100 http://blog.coinidea.com/cesiumjs-1332.html

2018年06月22日 * 上线测试

2018年06月19日 * 获得cesiumcn.org域名，也可以访问网址cesium.coinidea.com

2018年05月06日 * 开始cesiumjs的二次开发

2015年04月21日 * 梳理C#版本WorldWind的代码 * 简单实现基于C#版本WorldWind的数据可视化插件

2012年09月01日 * 接触基于C++的OSSIM的源码

2009年04月01日 * 开始接触Web开发的各个方面，从HTML、CSS、JavaScript到JSP、ASP.NET、PHP、jQuery、LAMP到SSH、ThinkPHP、Yii、LNMP到SSM、nodejs、VUE… 其实可以看出，我本人有一些Web开发的经验，同时又断断续续的接触了很多GIS相关的开原系统。在前端特别是nodejs越来越成熟的尽快，浏览器对H5新特性的支持也越来越好。我认为cesiumjs在工业级或者大部分B/S架构下，会得到一个较为广泛的应用，我也开始使用、熟悉、学习它的相关API。

作为一个开发工程师，始终有一些所谓的情怀，始终有一些盈利之外的更加技术向的东西，所以，注册了org域名，http://cesiumcn.org，并且创建了一个开源Web GIS的社区cesium中文网，希望大家多多支持。可以再社区中提问题，也可以在本博客中进行浏览。

使用Cesium将CDB转换为3D Tiles

Sat, 13 Feb 2021 16:02:38 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

在Cesium，我们每天都致力于通过围绕3D Tiles扩展生态系统来推进3D地理空间技术，3D Tiles是我们创建的开放地理空间联盟（OGC）社区标准，用于传输大量异构3D数据集。今天，我们很高兴地宣布，用户现在可以使用CDB to 3D Tiles管道将OGC CDB数据集转换为3D Tiles。

CDB通常在美国政府内部用于三维合成环境建模和仿真，它定义了一个标准化的模型和结构，用于存储、更新和归档地球的单个“版本化”的虚拟表示。CDB数据集可以存储自然环境和人造结构及其属性和关系。

通过将CDB转换为3D Tiles，数据可以高效地在支持3D Tiles的所有平台（包括ATAK和即将推出的Cesium for Unreal）之间传输，也可以在在线和离线设备之间传输，同时保留原始CDB的精度和细节。管道Pipeline保留了功能属性，支持运行时查询、样式设置和分析，以获得对数据更深入的了解。支持所有版本的CDB。

要了解更多关于联邦和国防内部解决方案的信息，请给我写信drop me a line.。

_圣地亚哥市中心的景观，包括地形、图像、固定的建筑模型、实例化的树和远处的科罗纳多桥，在CesiumJS中加载为3D Tiles。观看现场演示_See the* live demo*

原文链接：https://cesium.com/blog/2020/11/25/cdb-to-3dtiles/

作者：Brady Moore

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

用Cesium ion和Bentley的iModel.js创建数字孪生

Sat, 13 Feb 2021 16:01:40 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

iTwin服务，Bentley System系统平台，用于构建数字孪生基础设施，现在支持加载Cesium ion的3D Tiles。

金门大桥，用Cesium ion拼接成3D Tiles，用iModel.js可视化，iTwin的开源可视化组件。

这使得iTwin成为与ion集成的最新平台，越来越多的用户加入到Cesium ion中（growing number of places](https://cesium.com/integrations/)），用户可以将自己的3D数据集与ion的全球层相结合，包括Cesium OSM建筑和Cesium World Terrain。

Cesium World Terrain已经是默认的基础层，工程师在创建宾利的Context Capture数字孪生时依赖它。这种最新的集成使得从ion到iTwins的海量3D tilesets成为可能，这样工程师就随心使用他们喜欢的工具，由ion的高分辨率地理空间上下文和3D拼接器支持。

您还可以按照我们的教程（our tutorial）学习如何建立自己的数字孪生，以创建一个基于Cesium的互动的建筑企划。

原文链接：https://cesium.com/blog/2020/11/02/imodeljs-supports-cesium-ion-assets/

作者：Sarah Chow

评语：英特尔，美国联邦政府…Cesium已经逐渐从一个开源产品向企业级产品迈进。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium与Intel Geospatial合作，为企业提供地理空间解决方案

Sat, 13 Feb 2021 16:00:55 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium很高兴地宣布与Intel Geospatial建立合作关系，为各行业的企业客户提供专业的3D地理空间解决方案。

Intel Geospatial深刻理解从3D地理空间数据收集到的人工智能支持的商业洞察的价值。Cesium很荣幸与Intel Geospatial合作，为Intel用户社区提供一流的3D地理空间技术。

Intel Geospatial结合了数据管理、可视化、分析和基于Cesium支持的3D tiling，为能源行业的数据传输和分配、资产管理和远程安全检查等用例提供解决方案。该平台旨在通过设计易于任何人使用的解决方案，将地理空间洞察的范围扩大到数据科学家之外。

利用英特尔地理空间平台中的激光雷达点云识别电线杆周围的植被侵蚀情况。

有了Intel Geospatial的平台，客户可以将多个数据集（包括Cesium World Terrain）与Cesium提供的所有灵活性和精确性结合起来。

Intel Geospatial构建定制的企业解决方案，允许客户将其所有数据与Cesium World Terrain一起纳入一个单独的可视化场景中。

使用Intel Geospatial的人工智能算法对数据集进行处理和分类，以及Cesium的GPU加速分析工具进行测量和分析，客户可以分析单层或组合数据集，以获得所需的洞察力，无论是用于对基础设施进行远程检查，以安全目的进行目视检查，或管理电线以获得更好的适应力。

访问“英特尔地理空间”（Intel Geospatial），了解更多有关行业客户如何利用地理空间技术最大化其3D数据的信息。

原文链接：https://cesium.com/blog/2020/10/27/intel-using-cesium-for-geovisual-solution/

作者：Patrick Cozzi

评语：Cesium一直专注企业级的解决方案，这也导致了2020的社区功能稍微的开发缓慢。毕竟要挣钱吃饭。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

可供政府用户使用的喀布尔(Kabul )数据

Sat, 13 Feb 2021 15:59:13 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

我们（Cesium）支持美国联邦政府雇员在流感大流行期间在家工作，通过与Maxar公司Vricon的合作提供免费访问世界各地高分辨率模型的机会。

喀布尔，阿富汗。

我们现在为美国联邦政府工作人员感兴趣的近30个领域添加了喀布尔的三维表面模型。这些数据集已经被拼接成3D Tiles，因此它们可以以全分辨率流式传输，允许政府工作人员无论在哪里工作都可以快速访问。

如果您有有效的.gov或.mil电子邮件地址，请按照本教程访问这些数据集（follow this tutorial）。

如果你有兴趣了解更多关于Cesium是如何支持美国联邦政府的，请告诉我。我很乐意和你谈谈（let me know）。

原文链接：https://cesium.com/blog/2020/10/13/maxar-vricon-kabul-data-in-cesium-ion/

作者：Brady Moore

评语：Cesium的政企化做得越来越好了。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Reality Capture新增内置Cesium ion共享3D模型的支持

Sat, 13 Feb 2021 15:58:21 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

RealityCapture也加入了不断增长的直接支持Cesium ion的项目名单中，这一名单还包裹了包括Safe FME、Blender和3ds Max在内的近十几个平台，它们最近都添加了对Cesium ion的集成（https://cesium.com/integrations/）。凭借其精心策划的全球数据集、安全的云托管和强大的3D拼接管道，ion是连接数据提供商、开发人员与用户的核心。

RealityCapture的最新版本（https://www.capturingreality.com/realitycapture-supports-upload-to-cesium）中加入了与Cesium ion的集成，用户只需单击一下即可在web上共享自己的3D模型。

它的工作原理是将模型上传到您的Cesium ion帐户，在那里它被转换成3D Tiles。这使用户可以将摄影测量模型嵌入到web上或在移动设备上可视化，即使它们有数百万个三角面片，因为在场景中导航时，更高级别的细节会以流式显示。

诺里奇城堡，由RealityCapture生成，并以Cesium可视化。数据由©Jasper Mink，©Terradrone Europe捕获。

我们对这种集成支持感到振奋，因为它创建了一个从无人机照片到地理空间环境中，基于web的可视化的端到端工作流。保留原始细节的事实使其成为可视化的理想选择，因为用户可以通过电子邮件向所有参与人员发送链接，并确信他们看到的模型基于采集的最高保真度。

如果您有RealityCapture的文件，本教程（ this tutorial）将指导您如何在自己的模型上尝试此功能。

查看我们的集成指南（Check out our integration guide），了解如何将您的工具与Cesium ion连接起来，为您的用户提供一种简单的方式来共享他们的大型三维模型或激光雷达数据，或在地理空间环境中显示这些数据。

基于Cesium，就可以在网上分享摄影测量模型，而不必简化它：用户甚至可以在诺里奇城堡模型的门上看到标志！

原文链接：https://cesium.com/blog/2020/09/18/realitycapture-and-cesium-ion/

作者：Omar Shehata

评语：各类平台都在争相支持对Cesium的支持，3D Tiles是一种了不起的模型格式。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium 2020回顾

Sat, 13 Feb 2021 15:53:23 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

虽然它遇到了一些挑战，2020年仍然一个令人难以置信的Cesium年，我们感恩Cesium作为一个团队共同取得的进展。下面是今年取得一些突出成绩：

– 与市场领先公司Komatsu Construction公司建立了智能建筑数字孪生伙伴关系（https://cesium.com/blog/2020/03/10/smart-construction/）。

Cesium CEO Patrick Cozzi在拉斯维加斯工程机械展览会Las Vegas ConExpo 3月的演讲.

– 宣布与Epic Games合作，为Unreal制作Cesium（https://cesium.com/blog/2020/06/04/cesium-for-unreal-engine/）。

– 与Epic、Microsoft和NVIDIA构建Project Anywhere（https://cesium.com/blog/2020/11/30/project-anywhere/），以显示支持云/GPU/模拟游戏的能力。

– 与史密森学会（The Smithsonian）合作开展开放获取计划（https://cesium.com/blog/2020/02/28/smithsonian/）。

– 与Intel Geospatial建立了合作关系。

（https://cesium.com/blog/2020/10/27/intel-using-cesium-for-geovisual-solution/）

– 与宾利系统公司合作进行Cesium ion/iTwin集成。

（https://cesium.com/blog/2020/11/02/imodeljs-supports-cesium-ion-assets/）

– 将Cesium Stories、Cesium OSM Buildings和CDB to 3D Tiles。

（https://cesium.com/blog/2020/11/25/cdb-to-3dtiles/）

Cesium OSM Buildings

– 获得PACT颁发的技术创业奖、Geospatial Media&Communications颁发的年度地理空间创业奖，以及美国地理空间情报基金会（USGIF）和开放地理空间联盟（OGC）举办的GEOINT创新贸易手工艺大赛大奖。

（https://cesium.com/blog/2020/08/04/usgif-tradecraft-competition-winners/）

奖杯放在Cesium Demo室

– 团队中增加了17名优秀的员工，同时我们继续招聘，以尽可能快的速度填补空缺职位。

在新泽西战舰的一次团队实地考察中戴上口罩并保持社交距离。

– 我们为Cesium开发者社区介绍了一个新家，并庆祝CesiumJS的一个重要里程碑——100万次下载。（https://cesium.com/blog/2020/05/21/one-million-cesiumjs-downloads/）

– 基于Cesium的NORAD Tracks Santa 连续8年招待了全球2000多万人。（https://cesium.com/blog/2020/12/10/cesium-santa-iss/）

感谢所有今年支持Cesium的人。为2021年做好准备！我们期待着与您合作。

2021干杯！

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium 赢得2020年PACT技术创业企业奖

Sat, 13 Feb 2021 15:50:25 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium 是2020年PACT技术创业企业奖的获得者！

该奖项由费城资本与技术联盟（PACT）每年颁发，旨在庆祝费城地区的科技创新。

作为一家技术初创企业，Cesium源于其创新平台、领导团队、增长潜力而受到认可，并在市场上取得了成功。

“丰富的创新历史，强健的技术生态系统，以及庞大的人才库，使费城成为Cesium的理想之地，”Cesium的首席执行官帕特里克·科齐在获奖感言中说。“在我们筹款期间的一次西海岸之旅中，我被告知雄心勃勃的科技企业家应该搬到硅谷。但我们对费城有着深厚的信念，我们非常自豪和感激能成为这个社区的一员。”

今年的活动由于COVID-19流感大流行而在线上举行的，我们在屋顶平台上举行了一个小规模保持社交距离的聚会，与团队成员一起在家里在线观看。

Cesium是PACT的骄傲支持者，PACT通过将我们这样的成长型公司与辅导、资金和人才等资源联系起来，推动创业。我们要感谢该组织并授予赞助商Troutman Pepper，并祝贺技术初创企业入围者ForMotiv和ZeroEyes。

作者：Andie Tursi

原文链接：https://cesium.com/blog/2020/09/10/cesium-enterprise-award/

评语：恭喜Cesium，它们的办公地在费城不在硅谷。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用Flightradar24’s CesiumJS App追踪世界商用航线

Sat, 05 Sep 2020 15:24:34 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

每天，超过10万架商业航班在世界各地运送乘客。在任何特定时刻，您都可以看到几乎所有这些航班的实时位置，更不用说大量的货运和私人航班，Flightradar24是一流的航班跟踪服务。

Flightradar24为观看头顶天空的飞机爱好者、追踪空中交通事件的新闻媒体以及跟踪朋友和家人飞行的普通人提供了丰富的数据。

Flightradar24的3D视图可以在浏览器和移动应用程序中使用，它是用CesiumJS构建的。该应用程序显示了从地面和卫星ADS-B转发器、雷达，more等收集到的航班实时位置。

Flightradar24中的3D视图。

飞机由一个三维模型表示，观众可以用驾驶舱视图浏览，也可以从飞机外部进行平移和缩放，从任何角度观察飞行。当飞机在500米以下时，它也会对下面的地形投下阴影，这是根据当时太阳的实际位置来计算的。

三维视图中的一架飞机在向机场降落时投下阴影。

用户可以单击航班查看详细信息，如航班号、速度、目的地、高度、到达时间以及数据源。观众可以看到机场和其他交通，甚至可以切换飞行路线。

除了选定的航班，用户还可以看到附近的飞机。

Flightradar24的实时数据每月为数百万用户提供重要信息，Cesium是专门为支持该情况而设计。要开始用Cesium来可视化你自己的时间动态数据，请按照我们的简单教程(simple tutoria)在Cesium Stories中创建无人机飞行。

原文链接：https://cesium.com/blog/2020/08/13/flightradar24/

作者：Sarah Chow

评语：CesiumJS应用越来越广泛。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium和Kaarta用高分辨率激光雷达可视化室内和地下环境

Sat, 05 Sep 2020 15:21:33 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium使急救人员和军事操作人员更容易快速评估和了解密集和不断变化的城市环境。

Cesium支持任何尺度的可视化，从全球到亚厘米。我们最近改进了对地下可视化的支持，探索地下环境可以直观地与地上数据无缝集成。

最近，我们将这些能力用于密集城市在线挑战的测试，该挑战由国防部的国家安全创新网络（NSI）组织Dense Urban Online Challenge，旨在解决第一响应者和军事运营商在高密度和复杂地下结构城市工作时遇到的问题。

针对这一挑战，我们与Kaarta合作，展示了Cesium如何通过汇集所有数据并将其可视化，为决策者提供所需的信息和洞察力，从而为众多应用程序解决这些操作问题提供动力。

Kaarta捕获的，纽约市东侧通道的一部分

在Hackathon上，我们展示了由Kaarta的移动3D扫描仪收集的纽约市隧道。这些点云是用他们的手持式设备捕捉到的，只要带着这个设备穿过隧道，激光精度就在3厘米以内。它生成的点云是用Cesium ion拼接和定位的。

这里的价值在于，可以快速捕捉到这些精确的三维扫描，并且可以经常这样做，这样你就可以得到一张永远是最新的地图，即使是那些正在积极开发的项目，比如纽约市东区的交通隧道。对于第一反应人员和军事操作人员来说，这些密集环境的最新地图对于决策至关重要。

由于像这样的设备使接近实时的高分辨率扫描成为可能，有了Cesium，可以将这些扫描组合起来，看看任何给定领域的所有项目是如何同时开发的。通过与其他数据集相结合，很容易计划潜在的entire，例如，通过覆盖下水道系统的地图来确保它不会变得太近。使用Cesium的测量工具，这些分析是如此简单和完整。

上图：纽约市地面视图，隧道位置用红色标出。下图：隧道内部视图。

在参加了“NSIN Dense Urban Online Challenge”的31支队伍中，我们是5支被选中参加当面黑客竞赛的队伍之一。我们很高兴能提供一个平台，让其他人能够解决这些复杂的挑战。如果你在做地下工作，或者你对Cesium用于国防感兴趣，请联系我brady@cesium.com。

原文链接：https://cesium.com/blog/2020/08/25/national-security-hackathon/

作者：Brady Moore

评语：挺牛的。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium中文网——如何开发一款地图下载工具[一]

Mon, 27 Jul 2020 00:43:49 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium中文网的朋友们的其中一个主题是：自己独立开发一款地图（瓦片图）下载工具。

这个主题会以拆分若干期以博客文章[所有用户]+视频[付费用户]的形式介绍给大家。其中源码会不断的提交与更新，Github地址：https://github.com/hujiulin/MapDownloader。源代码对所有用户开放，如果大家觉得有益，请轻轻地给一个star进行鼓励。

重剑无锋，大巧不工。

工具最重将以C#和JavaScript的形式呈现。编程语言只是形式，如何理解内部的逻辑和流程，也可以用Java，Python，PHP或其他开发语言进行实现。

目前开源的工具非常的简单（简陋），但是我会定期更新和维护代码，大家有什么问题可以在Github上提交issue也可以在公众号：Cesium中文网；QQ群：807482793；论坛：http://cesium.coinidea.com/进行留言和提问。

准备工作

找到自己熟悉的一门开发语言，它支持：

文件网络下载。
文件IO，本地文件夹及文件的读写。
多线程。
桌面窗体，最好具有浏览器控件。

一般来说，现代的开发语言都支持上述大部分功能。本文选择的是C#。在整个主题的中部，会引入JavaScript。

瓦片图服务器

本文选择的是百度地图，其实大部分的瓦片图服务器都会有x, y, z（level）三个参数，百度地图的URL Pattern是：http://online{0}.map.bdimg.com/onlinelabel/?qt=tile&x={1}&y={2}&z={3}&styles=pl&udt=20200727&scaler=1&p=0

如果我们把x=1, y=1, z=3，在浏览器打开上述URL

http://online0.map.bdimg.com/onlinelabel/?qt=tile&x=1&y=1&z=3&styles=pl&udt=20200727&scaler=1&p=0

样例瓦片图

瓦片图下载

既然我们已经知道了瓦片图的生成规则，那我们只要指定具体的下载链接我们就可以下载对应的图片了，C#的核心下载代码是，这儿代码可以轻易地在网络上搜索到：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


 private static WebClient wc = null;
 private static void initWebClientInstance()
 {
 if (null == wc)
 {
 wc = new System.Net.WebClient();
 }
 }
 private static void download(string url, string filename)
 {
 // Check filename exist or not
 if (File.Exists(filename))
 {
 return;
 }

 // Create directory
 string dir = Path.GetDirectoryName(filename);
 if (!Directory.Exists(dir))
 {
 Directory.CreateDirectory(dir);
 }

 initWebClientInstance();
 wc.DownloadFile(url, filename);
 }

瓦片图批量下载

接下来我们要做的是：

批量地生成下载URL
循环下载每张瓦片图

之前提到过地图的核心思想是四叉树，所以我们可以再次简单的处理，认为瓦片图也是四叉树构成的，一共分为18级（网上可查）左右。那么

level	minX~maxX	minY~maxY
1	1~1	1~1
2	1~2	1~2
3	1~4	1~4
…
n	1~2^(n-1)	1~2^(n-1)

四叉树

批量下载的核心代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


 public static void downloadBatch(string urlPattern, string targetFoler, int level)
 {
 int maxX = (int)Math.Pow(2, level - 1);
 int maxY = (int)Math.Pow(2, level - 1);
 for (int x = 0; x <= maxX; x++)
 {
 for (int y = 0; y <= maxY; y++)
 {
 string url = String.Format(urlPattern, 1, x, y, level);
 string filename = Path.Combine(targetFoler, level.ToString(), x.ToString()) + "\\" + y.ToString() + ".png";
 download(url, filename);
 }
 }
 }

上述的运行代码肯定能下载，但是有很多问题。将在下一步中进行讨论。

当前软件界面

下载结果

下一步

当前代码只适合下载层级较小的情况，一旦层级较大，需要下载的图片非常多。此处需要使用多线程，甚至多台机器。
可以看到下载下来的图片和很多纯黑图片，这可能是我们的生成规则不太好。
目前浏览器控件和软件还未做到联动，不能实时勾选区域进行下载。
后续可能涉及图片拼接的处理。
当加载进具体的平台的时候，可能需要进行坐标系变化处理。
下载间隔的自动控制，IP的动态切换。

上面的这些问题将在后续的文章中进行介绍。

声明

一般来说，地图服务器需要很大的存储资源和带宽资源，本文仅从学术角度和大家探讨现在的下载软件内部原理，如有错误欢迎大家指正。

Again: Github地址：https://github.com/hujiulin/MapDownloader。源代码对所有用户开放，如果大家觉得有益，请轻轻地给一个star进行鼓励。

本文和软件仅做学术交流，严禁用于商业用途。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用Cesium的地下渲染技术可视化瑞士的地质资源

Tue, 14 Jul 2020 06:43:17 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Camptocamp为瑞士拓扑的孪生数字增加了地下可视化功能。

免费向公众提供瑞士3D地图

基于3D Tiles, 瑞士联邦Geoportal 3D Viewer提供免费访问全国的交互式地图，包括地形、桥梁、建筑，甚至树木——超过7000万个物体。

Camptocamp已经在swissgeol中实现了这些新功能，swisstopo Web端的3D地质数据浏览器。

瑞士拓扑3D门户网站是一个交互式的瑞士地图，包括自然环境和建筑环境。

虽然这张3D地图让人们印象深刻，但它并没有提供一幅完整的国家图景：地下水、矿层、地下室、停车场、地铁和其他建筑的地下部分都不见了。

看地底世界

瑞士拓扑学联邦办公室不仅想展示瑞士的地上部分，还想展示地下部分。因此，与Camptocamp合作，我们在CesiumJS 1.70版本中添加了对地下可视化的支持[ added support for underground visualization]。

瑞士地理汇集了大量地下数据集，包括钻孔、地震数据和基岩图。这些数据以前是单独分开的和二维的，但通过将它们结合在一起，瑞士地理为用户提供了一个更完整的地下情况的视图。

瑞士地理的地下钻孔，以及地面上的建筑物、地形和图像数据。

所有这些数据流顺利地传输到浏览器，感谢3D Tiles与Cesium ion的三维pipelines。Camptocamp使用FME、地质三维建模包和Python预处理数据。

用户可以调整每个层的透明度，包括表面图像，还可以查看横截面。

瑞士地理中具有透明地形和地面图像的横断面数据。

工作中的地质数据

观众可免费向公众开放，并将满足地质领域的众多需求。地质工程师将能够分析潜在的项目，如运输隧道，并进行风险分析，如岩石滑坡。决策者将有更好的基础数据用于教育或选择合适的项目地点。

例如，虽然目前斯威特兰大约75%的能源来自进口化石燃料，但他们的新能源政策“2050年能源战略”旨在增加对当地浅层地热能的依赖。

在瑞士地理可视化的地热数据集。

到目前为止，创建地热项目提案需要收集所有不同的数据集，例如地质图、钻孔、横截面、三维模型、地震数据等。每个数据集必须单独复制和存储，或者必须使用GIS或3D建模软件建立数据库连接。而数据集只能在二维可视化或基于模型的三维可视化，瑞士地理极大地简化了这一过程，将所有数据集汇集到一个可以即时共享的门户网站中。

深部地热井与复杂断层模式和地震位置的可视化。

未来展望

瑞士地理(swissgeol )目前处于测试阶段。未来，swisstopo和Camptocamp计划增加一些功能，包括增加拾取和样式，以便可以查询、过滤、分析和下载数据的相关属性。需要额外功能的注册用户，包括swisstopo的用户，也将能够访问其他功能，如上传/下载用户生成的数据，以及创建封闭用户组，以便与有限数量的用户共享敏感数据。

如果你有地下数据，可以通过 by uploading it to Cesium ion上传到Cesium ion上，把它和其他所有的二维和三维数据一起可视化。

作者：Sarah Chow

原文链接：https://cesium.com/blog/2020/07/06/camptocamp-underground-visualization-with-cesium/

评语：大家希望的基于Cesium的地底可视化，越来越完善了。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

用Cesium可视化地下设施、矿山和地质层

Sun, 21 Jun 2020 06:55:52 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

本月的CesiumJS 1.70发布引入的一项关键改进是地下数据可视化。这允许用户无缝地从整个城市的地面功能过渡到同一场景中的地下功能，无论是水管和电缆之类的实用数据，还是洞穴和矿井之类的三维结构。

用不同的地面材料根据深度可视化钻孔。来自明尼苏达大学钻孔地球物理数据库的数据。Borehole Geophysical Database

将地下数据与三维地形和CesiumJS中的其他图层融合，这意味着可以在一个地方可视化所有相关信息，而无需在专用工具之间不断切换。例如，可以通过在场景中添加Cesium OSM建筑（Cesium OSM Buildings）来可视化地震随时间的变化，并测量它们与城市重要基础设施的距离。

2020年4，5月，在爱达荷州中部的锯齿山上观察地震。每个球体都包含地震中心震级和深度的元数据，以及这些记录的误差范围

您可以使用CesiumJS API控制地下数据的可视化方式。下面，将对隧道进行可视化摄影测量。通过保持地面大部分不透明，我们可以准确地看到哪些部分位于地面之上（只是入口），以及结构延伸了多远。我们还可以配置camera，在近距离放大时隐藏地面，这样我们就可以在隧道内行走而不受干扰。

新西兰奥克兰北头旧军事隧道摄影测量。左图：保持地面大部分不透明，以查看模型的哪些部分高于地面。右图：将地面藏在靠近camera的地方，让用户可以在隧道内行走。截图由 b_nealie提供。

试一试

上传您的地下模型数据到Cesium ion（Upload your underground data to Cesium ion）或查看下列示例代码以学习如何在Cesium app中使用地下功能。

激活地球透明。[Enable globe transparency](https://sandcastle.cesium.com/index.html?src=Globe Translucency.html)
激活地表某部分透明[Enable transparency only on a section of the ground](https://sandcastle.cesium.com/index.html?src=Globe Interior.html)
自定义地下场景显示[Customize the look of underground scenes](https://sandcastle.cesium.com/index.html?src=Underground Color.html)

如何您有任何问题或者想分享您正在做的工作，请访问let us know on the forum。

大家也可以访问Cesium中文网：http://cesium.coinidea.com/

作者：Omar Shehata

原文链接：https://cesium.com/blog/2020/06/16/visualizing-underground/

评语：这是Cesium1.70三大功能的最后一项，一两年前好多人提问如何让地球透明，或者地下模型怎么办，现在都能有解决办法。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

CesiumJS新增官方TypeScript类型定义

Sat, 13 Jun 2020 15:37:36 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

在当前的1.70版本中，CesiumJS现在附带了正式的TypeScript类型定义！

TypeScript定义是一个长期以来被要求的特性。虽然社区已经完成了一项支持各种手动方式的工作，其中最受欢迎的是@types/cesium，但是cesium代码库的庞大规模和不断发展的特性使得手工维护成为一项永无止境的任务。官方定义文件Cesium.d.ts的数据量超过42000行，达1.9MB。

即使您不是TypeScript用户，此工作的性质也提高了CesiumJS API参考文档的正确性和完整性，并在IDE中实现了更好的intellisense支持，可以将TypeScript定义应用于推断类型，从而使整个CesiumJS社区获得了巨大的成功。

更新CesiumJS到1.70将自动利用TypeScript应用程序中的类型检查。我们使用package.json中的_types_字段，在大多数情况下不需要额外的配置。但是，如果直接导入单个Cesium源文件，则需要将“types”：[“cesium”]添加到tsconfig.json配置以便获取定义。如果您以前使用过@types/cesium，则可以将其移除。

来自CesiumJS团队的官方支持意味着最新和正确的定义文件将随每个版本一起发布。这也意味着TypeScript支持将作为CesiumJS GitHub存储库的一部分进行正式跟踪。如果您在使用带有TypeScript的CesiumJS时发现一个bug，请打开一个问题（issue）或更好的方法，一个pull request请求来解决它。如果您对CesiumJS/TypeScript有疑问，或者需要帮助调试您的项目，请在社区论坛（community forum）上提问。

如果您正在使用自定义的或@types/cesium，但尚未准备好切换，则可以在安装后删除Source/cesium.d.ts。然后，TypeScript工具将返回到它找到的下一组CesiumJS类型定义。

官方的类型定义文件，Cesium.d.ts记录了超过42000行的声明和文档，其大小达1.9MB。

深入了解

虽然我们很高兴终于正式支持TypeScript，但要做到这一点还需要一些努力。最初，我们探讨了3种选择：

手动维护定义文件

我们可以手动管理和维护自己的TypeScript定义文件，作为CesiumJS代码库的一部分，很可能是每个JavaScript文件都有一个单独的定义文件，使其易于管理，比如Cartesian3.js对应Cartesian3.d.ts。在技术层面这样易于实现，但对文件同步和维护性上来说，会造成较大伤害。

另外，我们不想只包含声明接口，也不想包含内联文档，这样用户就可以充分利用intellisense。这是我们最后的选择，但如果结果证明这是唯一可行的选择，那就是我们最终的选择。

移植CesiumJS到TypeScript

您可能会惊讶地听说我们实际上评估过用TypeScript重写所有CesiumJS。对于TypeScript开发人员来说，这将是一个巨大的改进，对于CesiumJS维护人员和代码库来说，这也是一个真正的胜利。除了强类型检查之外，它还将使我们快速使用现代约定，如template literals、arrow functions和async/await，由于兼容性和工具的原因，我们目前不允许在CesiumJS代码库中使用这些约定。

不幸的是，所需的努力程度和所工作量使它在短期内不会成为一个有吸引力的选择。这个选项仍然摆在桌面上，但正如我们去年所做的大规模ES6迁移一样，它需要大量仔细的规划、研究和基础设施工作才能正常进行。

使用TypeScript编译器生成定义文件

从TypeScript 3.7开始，编译器可以编译带有JSDoc注释的JavaScript代码，并为我们生成对应的类型定义文件。这种方法完全不需要手动维护.d.ts文件，而且还具有验证和改进我们自己的JSDoc注释的额外好处，因为它们需要准确才能生成正确的类型定义。不用说，这个选项对我们非常有吸引力，我们决定在一些初步的原型设计实验表明它可以工作后运行它。

实际上，我们花了几个星期的时间来研究这种方法Marco Hutter参与了大量的文档修复和源代码调整工作，以使编译器满意。早期的工作很有希望。正如预期的那样，它暴露了JSDoc注释中的错误和不一致，并在较小程度上暴露了我们修复的CesiumJS API。不幸的是，我们很快就碰壁了。

依赖TypeScript编译器意味着当它做了一些错误或意外的事情时，我们缺乏选择。虽然编译器在某些情况下使用JSDoc注释，但在许多情况下，它依赖于自己的类型推断，并且没有为我们提供重写它的方法。它还完全忽略了大部分JSDoc，比如在对象定义属性，并将所有私有下划线变量作为定义的一部分公开。这导致我们开始以我们不习惯的方式弯曲CesiumJS基础代码，只是为了让TypeScript编译器满意。我们提出了尝试修改TypeScript编译器本身的想法，但是我们必须深入研究编译器代码，我们甚至不确定维护人员会接受什么，也不知道这个过程需要多长时间。最终，我们最喜欢的解决方案变成了一场旷日持久的赌博，我们对这种方法失去了信心。

_左图：UrlTemplateImageryProvider_的JSDoc, 意外地添加了属性到BingMapsImageryProvider；右图：生成的BingMapsImageryProvider定义，包含了重复定义，导致编译失败。

绘图板

结果，我们对TypeScript拥有官方JSDoc支持非常兴奋，以至于完全忽略了类似的选项 tsd-jsdoc。tsd jsdoc是jsdoc的插件，它从jsdoc输出生成类型脚本定义。这使得它非常类似于TypeScript编译器方法，但提供了对生成的类型定义有了更大的自由度。

tsd-jsdoc不直接解析JavaScript，而是依赖于jsdoc生成的抽象语法树（AST）。这意味着它不受类型推断问题或缺乏JSDoc完整性的影响，这使得TypeScript编译器接近失败。如果我们可以使用JSDoc注释来表示类型，那么它就是我们希望它出现在类型定义文件中的类型。

我们已经从以前的TypeScript编译器方法的失败中学到了很多，所以我们能够相当快地完成一个可行性评估，并且我们现有的JSDoc不正确的所有问题仍然适用。事情的进展比我们想象的要快，我们知道我们找到了解决办法。

作为开发人员，有时我们过于专注于某项技术，以至于忽略了其他选择。在这种情况下，社区成员 @bampakoa去年甚至向CesiumJS和tsd-jsdoc提交了pull请求，以使它们更加兼容。我们已经知道tsd jsdoc存在，但是我们在最初的评估中忽略了它，因为我们假定了TypeScript编译器选项会更好，并且我们意外地选择性地忽视了tsd-jsdoc。

Post-processing和验证

虽然tsd-jsdoc输出是相当高质量的开箱即用，但是我们做了一些额外的后处理来进一步改进它。这包括简单的字符串操作、正则表达式查找和替换，甚至使用TypeScript编译器重写部分文件。所有这些都是作为新构建ts gulp任务的一部分发生的。如果你好奇，可以获得这些代码check out the code.。最终的结果是一个单独的Cesium.d.ts，与生成的Cesium.js模块的入口点。

除了生成输出，build-ts任务还通过使用TypeScript编译文件来验证文件。如果开发人员在JSDoc中犯了错误，比如拼错类名或引用私有或不存在的类型，那么构建过程将失败。虽然这个验证过程非常有用，但它只捕获某些类型的错误。例如，如果有人实现了一个新的ImageryProvider，但不符合正确的接口，则定义文件将编译而不出错，但TypeScript将在尝试将新类用作ImageryProvider的应用程序中发出编译错误。

我们仍在探索添加额外验证的想法，例如用TypeScript编写一些单元测试，以识别开发过程中潜在的问题区域。

JSDoc错误

我已经多次提到，基于JSDoc的方法的一个特别令人兴奋的地方是，它为我们的文档添加了另一个级别的检验和验证，使每个人都受益，而不仅仅是TypeScript开发人员。我们的文档审查过程的一大部分现在已经自动化了。我们在代码库中发现的问题可以分为以下几类：

不正确或不完整的类型- 在许多情况下，我们对类型使用了非正式或不正确的名称，例如，Image实际上是HTMLImageElement，Canvas是htmlCanvaseElement。一个有趣的例子是TypedArray，它甚至不存在于规范级别，而是完整类型列表的通用术语，例如Int8Array、Float32Array等等……我们还有不完整的泛型，例如Promise而不是Promise。
@exports – 我们使用JSDoc的@exports标签作为最终的支撑。如果开发人员无法在生成的HTML中显示某些内容，他们可能会添加@exports，这将“正常工作”。我们将@exports用于枚举、命名空间和函数，而不是@enum、@namespace和@function标记。这导致了不正确的类型生成。实践证明我们根本不需要在代码中的任何地方使用@exports。
私有类型泄露 – 公共API中引用了很多私有类型。这些私有类型不存在于HTML输出中，对于我们的文档构建步骤来说只是无声的失败。在大多数情况下，只公开私有类型是有意义的。谢天谢地，我们也有在CesiumJS中记录私有类型的习惯，因此不必编写新的JSDoc。
复制粘贴错误 – 最后一种JSDoc错误是与复制和粘贴相关的重复参数条目，例如，让ImageryProvider A，声明它正在记录ImageryProvider B上的属性，等等…

下一步

一旦社区开始使用这些定义，我们希望在接下来的几个CesiumJS版本中会出现一些小问题。我们还开始开发一个我们想要探索的想法列表，比如为实体API使用的属性接口利用泛型。最终，我们依靠社区告诉我们对开发者最重要的是什么，这样我们就可以用TypeScript路线图来塑造我们的CesiumJS 。

我们还想找出一种在CesiumJS基础代码中使用TypeScript定义的方法。我们相信VSCode有一些机制可以实现这一点，但是我们还没有探索它们。如果这被证明是可行的，那么这将是一个重大的胜利，并允许通过普通JavaScript进行另一个级别的验证，更不用说让开发CesiumJS成为比现在更好的体验了。

我敢肯定，当我说我们评估用TypeScript重写CesiumJS时，很多人都振作起来了。我绝对赞成延长时间。作为评估过程的一部分，我实际使用TypeScript编译器构建了现有的JavaScript代码库，甚至将一些基本文件（如Cartesian3.js）移植到TypeScript，以了解如何进行TS/js混合开发，而不是“一次完成”迁移策略。很像ES6，移植代码是最简单的部分。预计很快就会出现GitHub issue，它将打破所有必须发生的事情，使CesiumJS的TypeScript版本成为现实；但目前还没有承诺。

致谢

我只想再次感谢社区在过去几年中帮助产生了关于TypeScript的想法和讨论，特别向@thw0rted致谢，他是第一个改进初始TypeScript类型定义的外部贡献者，在最初的pull request中提供了很多很好的反馈。最后，非常感谢我的伙伴和维护人员 Kevin Ring，他不仅提供了大量的专家知识和反馈，还让自己投入到这项工作中，并最终对代码进行了一系列改进。

作者：Matthew Amato

原文链接：https://cesium.com/blog/2020/06/01/cesiumjs-tsd/

评语：TypeScript的引入，使得CesiumJS成为更加专业的库，同时使其更易于维护。当然移植是一个痛苦的过程。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium1.70-介绍CesiumOSM建筑新特性

Sat, 13 Jun 2020 14:11:38 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

我们很高兴宣布Cesium OSM建筑，一个覆盖整个世界的3D建筑层，基于OpenStreetMap建筑数据。这是Cesium全球基础层套件的最新补充，包括全球地形图、航空图像和Cesium ion上已有的街景地图。

Cesium OSM建筑中的纽约市，西雅图，华盛顿特区和迪拜哈利法塔。

参观Cesium Stories – Take a tour in Cesium Stories

Cesium OSM建筑是一个很好的基础，在此基础上聚焦高分辨率数据，以提供城市环境和更加沉浸式的体验。人群来源和定期更新，该基础层数据将提供永无止境的用例：从需要城市规划、税收评估或交通管理等方面的可共享3D解决方案的城市，到想要在现实世界中把项目中的BIM模型可视化的开发商，需要创新工具进行培训和模拟的政府机构。

Cesium OSM建筑包含在从_today_开始的每一个Cesium ion订阅中，并且默认情况下包含在创建的任何新Cesium层中。您还可以使用一些简单的代码将其添加到CesiumJS应用程序中：

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.scene.primitives.add(Cesium.createOsmBuildings());

Cesium OSM 建筑物由3.5亿多座建筑物组成。虽然完整的数据集的大小为数百GB，但通过3D Tiles的魔法，它可以在web上高效地流式传输和可视化。3D Tiles是一个开放的标准，所以Cesium OSM建筑可以在任何兼容它的查看器中使用，不仅仅是开源的Cesium。

OpenStreetMap在大多数城市中意味着丰富的元数据，比如建筑名称、地址和开放时间。

Cesium OSM建筑稳固地坐落在Cesium世界的地形上，边缘轮廓清晰，可单独选择和设计。在大多数城市中，与每栋建筑相关联的丰富元数据，甚至是建筑的各个部分，都可以使用动态样式设计。例如，我们可以突出显示所有的商业和住宅建筑，以查看整个城市不同社区的模式。

使用Cesium Stories以绿色高亮所有办公室和商业建筑。

CesiumOSM建筑源于著名的社区驱动地图项目OpenStreetMap。这意味着任何人都可以改进数据集！如果你曾经贡献过，衷心感谢！

请试用一下数据[ try out the data ]，让我们知道你的想法。期待您的建筑！

作者：Kevin Ring 原文链接：https://cesium.com/blog/2020/06/01/cesium-osm-buildings/ 评语：挺强大的，搞起来。但是需要联网。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

宣布与Epic Games合作，为虚幻引擎创造Cesium

Sun, 07 Jun 2020 05:27:05 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

没有什么能比支持史诗游戏和史诗巨无霸计划（Epic MegaGrants program）为虚拟引擎构建Cesium更能体现Cesium对结合地理空间和三维计算机图形的信念了。

这标志着第一次将一个全尺寸、高精度的3D数字地球接入一个领先的游戏引擎，为Unreal的用户打开了一个充满可能性的世界。我们将共同推进培训与仿真、建筑、游戏、AR/VR、自动驾驶和其他行业，使3D Tile进虚幻世界，以精确可视化卫星和无人机捕捉到的真实世界位置——使用与CesiumJS近十年来相同的3D地理空间知识。

高分辨率摄影测量3D Tileset，由无人机拍摄，在AGI总部，Cesium孵化的地方。

“我们的愿景是允许仿真社区将不真实的引擎集成到他们的软件架构中，而不必改变他们的工作方式。与Cesium团队一起定义这个3D Tiles插件是一个非常令人兴奋的体验，因为它将允许GeoInt社区简化它们的管道。这项活动与我们对虚拟引擎的所有用户的大开放世界的愿景非常契合。——Sébastien Lozé，Epic Games仿真行业经理

当我在1994年开始图形编程时，Epic或Epic Megames在当时是一个灵感来源。他们发布的DOS游戏的图形和游戏性比我所见过的任何东西都要超前几光年。

今天，Epic的视觉质量继续受到鼓舞，特别是随着宣布的Unreal Engine 5接近电影CG的质量，Nanite虚拟化微多边形管道和Lumen动态全局照明引擎。将Unreal的优势与Cesium的全球规模、精度、性能和互操作性的优势结合起来，是推进3D地理空间的一个难道的机会。

我们的重点是使用3D Tiles格式来发展3D地理空间生态系统：OGC社区标准，用于高效地流式处理大量异构的真实世界3D数据集，以便进行可视化和分析。

3D Tiles被政府和商业实体广泛用于全球范围的地形、城市范围的摄影测量和来自激光雷达的大量点云。3D Tiles支持大量几何和纹理的流，以及由AI算法计算的语义，以便在运行时用于过滤、样式设置和分析。例如，点云中的点分类可用于过滤树叶，或摄影测量模型中建筑物侧面的材料特性可用于通信网络，因此射频传播考虑混凝土或玻璃。

Cesium for Unreal将是开源的，在Unreal Marketplace上免费提供。

Cesium for Unreal将默认连接到Cesium ion SaaS平台，以便随时使用地形和三维建筑的3D Tiles，以及一流的内容管道，以便从地形、图像和摄影测量模型等源数据生成高效的3D Tiles。Cesium for Unreal还将能够在内部私有网络上用Cesium ion传输3D Tiles。

在我们取得进展的同时，请保持关注。请随意联系，讨论合作或分享您的Cesium for Unreal用例。

作者：Patrick Cozzi 原文链接：https://cesium.com/blog/2020/06/04/cesium-for-unreal-engine/ 评语：Epic, Unreal虚幻引擎，玩游戏的朋友都应该知道，Cesium发展势头确实很好。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

地底，TypeScript和全球3D建筑发布于CesiumJS 1.70

Sun, 07 Jun 2020 04:40:14 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

2020年6月1日Cesium JS发布1.70 release，带来了3个重要更新。

Cesium OSM建筑

Cesium OSM建筑是一个覆盖整个世界的3D建筑层，使用OpenStreetMap数据构建。它可以作为一个3D Tileset为所有Cesium ion用户提供，并带有丰富的功能数据，如建筑名称，地址，开放时间等等。

Cesium OSM建筑中的纽约市，西雅图，华盛顿特区和迪拜哈利法塔。

阅读更多关于这个新的地球图层的信息（Read more about this new global layer）以及如何在应用程序中使用它的信息。

地下支持

Cesium现在对可视化地下场景有了更好的支持，从地下的大地质层到矿山、洞穴和公用事业。CesiumJS 1.70增加了使地球半透明的功能，使数据能够在地底可视化，并允许相机自由地进入地下。

使地面变得半透明，以能够看到地下物体。在Sandcastle中探索这个例子（[Explore this example in Sandcastle ](https://sandcastle.cesium.com/index.html?src=Globe Translucency.html)）。这是爱德华·艾伦·洛克哈特博士在北威尔士的一个Parc铅矿。

这些对CesiumJS的改进是与Camptocamp的朋友合作的一部分。他们的工作支持瑞士联邦地形办公室swisstopo，该办公室利用Cesium（using Cesium）制作了一个交互式的全国三维地图。

Camptocamp正在swissgeol中使用这些新的地下特征，swissgeol是一个三维的网络地质数据查看器。它的目标是在一个场景中可视化许多不同的数据集，如钻孔、地震数据和查看地面横截面的能力。Camptocamp 在谈到这个新的基于Cesium的viewer时说：

三维地下查看器swissgeol将是swisstopo未来获取地质数据的主要入口，它可能成为瑞士及周边地区整个地球科学界必不可少的协作工具

在Camptocamp的三维地下viewer中可视化地形下的基岩。

这些实时代码示例展示了如何使用新的globe透明度功能：

如何激活透明度功能。[How to enable globe transparency](https://sandcastle.cesium.com/index.html?src=Globe Translucency.html&label=New in 1.69)
仅在地表的一部分激活透明度功能。[Enable transparency only on a section of the ground](https://sandcastle.cesium.com/index.html?src=Globe Interior.html)
自定义地下可见性。[Customize what’s visible underground](https://sandcastle.cesium.com/index.html?src=Underground Color.html&label=New in 1.69)

TypeScript

最后，在1.70版本中，CesiumJS现在附带了正式的TypeScript类型定义！最新和正确的定义文件现在将随每个新版本一起发布，TypeScript支持将作为CesiumJS GitHub库的一部分进行正式跟踪。

即使您不是TypeScript用户，这项工作的性质也提高了CesiumJS API参考文档的正确性和完整性，使它成为整个CesiumJS社区的一大胜利。

阅读更多关于这是如何工作的，以及在马特深入的建筑探索中（Matt’s deep architectural dive）所做的一切。

试用 CesiumJS 1.70

更新到最新的CesiumJS，让我们知道你的想法！你可以在这个论坛帖子[官方英文论坛：forum thread|Cesium中文社区：http://cesium.coinidea.com/]中发表任何关于这个版本的反馈和问题。

下载地址：

作者：Omar Shehata

原文链接：https://cesium.com/blog/2020/06/01/cesium-june-release/

评语：TypeScript使框架的构建更加鲁棒专业。Cesium OSM确实很好，但是需要Cesium ion，可以看出Cesium官方推Cesium ion的决心。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

CesiumJS下载量超过1百万次

Sun, 07 Jun 2020 02:55:12 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

CesiumJS的下载总量已经超过100万。这一里程碑对我们（Cesium官方）和CesiumJS社区意义重大。

自从2012年4月CesiumJS作为开源项目发布以来，它已经被下载了超过1百万次。

100万次下载是200多个贡献者齐心协力的结果

自从2012年4月Cesium作为开源项目发布，已有200多个开发者为该项目做出了贡献。我们感谢社区所做的一切，从功能Features到错误修复到文档。想加入贡献者社区吗？试试其中一个“初学者”问题（“beginner” issues）。

Cesium的贡献者。前10贡献者之间的平均提交次数为1618次，以较大的尺寸显示。

100万次下载意味着数千个3D地理空间应用程序

CesiumJS开发者社区已经用CesiumJS在几十个行业中构建了数千个应用程序（thousands of applications with CesiumJS），从无人机到历史到极限运动。他们将商业地产空间、主要飓风、游艇比赛和火星探测器的探险活动可视化。

100万次下载意味着数百万行代码

CesiumJS是最广泛的JavaScript库之一，它提供了一个交互式的3D数字地球、星图、地形、图像、动态照明和交互式时间轴。自CesiumJS开发以来，我们每个月都会发布CesiumJS的更新和改进，随着我们不断提高在线传输海量数据的效率，CesiumJS累计添加了900多万行代码，删除了700多万行。

2013年Cesium中的珠穆朗玛峰

2020年Cesium中珠穆朗玛峰

100万次下载意味着刚刚开始

Cesium起源于Analytical Graphics，Inc.的几位工程师的工作。去年，我们成立为自己的公司，并以一种开放核心的商业模式剥离出来，确保了CesiumJS的长期可持续性。

2013年Cesium 开发者, 2013。从左到右: Hannah Pinkos, Dan Bagnell, Patrick Cozzi, Matt Amato, and Scott Hunter.

_2014年2月从事Cesium工作。当办公室停电威胁到开发速度时，研究小组前往Kevin Ring的地下室，在发电机电源上研究Cesium。围绕桌子，从左到右是：_Greg Beatty, Scott Hunter, The Captain, Patrick Cozzi, Richard Page, Matt Amato**

2020年Cesium Team……成长中

没有”你“我们做不到。感谢您使用和分享CesiumJS，感谢您参与我们的论坛（our forum），感谢您与我们分享您的工作（sharing your work with us），感谢您构建的令人难以置信的应用程序。我们期待着更多的人！

Cesium正越来越好

作者：Sarah Chow 原文链接：https://cesium.com/blog/2020/05/21/one-million-cesiumjs-downloads/ 评语：Cesium正越来越好。冉冉升起。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium官方英文论坛

Sun, 17 May 2020 13:48:11 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium官方刚刚完成了将Google Groups论坛转移到Discourse的工作，Discourse是一个面向在线社区的现代开源平台。这是Cesium社区论坛成立以来最大的一次更新。论坛汇集了近十年的相关GIS的智慧结晶，从基本的故障排除到讨论世界可视化的最佳方式，共有30000多篇文章。

大多数人来到Cesium社区时，他们有自己想了解的真实世界的数据。通常这是他们第一次涉足3D地图。和许多人一样，通过搜索论坛了解到了为什么精度在许多应用中都很重要，或者当不考虑地球的曲率时会发生什么。

如果你曾经在Cesium论坛上问过一个问题，我想感谢您为这个独特的计算机图形学和地理空间知识档案作出贡献！

新的Cesium英文官方论坛的首页以及新的讨论分类

Cesium官方开始使用Discourse，使发现和分享Cesium和三维地理空间的知识更加容易。使用Discourse带来了更好的搜索和格式化工具；更好的布局，尤其是在移动设备上；更快的页面加载；以及更多的新功能。

关于新论坛的一切都是可定制的，所以希望它能随着我们不断增长的社区而发展。例如，刚刚启用了直接在论坛帖子中嵌入Cesium Stories：

现在可以把Cesium Stories直接嵌入进论坛帖子！上述是为美国地理学家协会会议所作的丹佛虚拟之旅。

请浏览一下论坛，告诉我们您对论坛的看法。如果您以前在旧论坛上发表过文章，请参阅此处说明，了解如何在新论坛上收回你的帐户。

新的论坛不仅使用户更容易找到需要的答案，而且是一个用户可以和更广泛的Cesium生态系统分享工作的合作场所。到时候见！

请访问：community.cesium.com

作者：Omar Shehata

原文链接：https://cesium.com/blog/2020/05/04/new-community-forum/

评语：Cesium官方的英文论坛，大家可以去搜索答案，提出问题。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

i-Urban Renovation使用3D Tiles可视化鸟取县Munakata建筑状态

Thu, 23 Apr 2020 08:00:16 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

日本的鸟取县，使用i-Urban Renovation application built on Cesium帮助居民在线访问建筑物数据。

日本，鸟取县

日本各地方政府收集有关建筑物的数据，包括建筑物的用途、层数、建筑材料和建筑年份。位于福冈县北部的鸟取县责成它们的Urban Structure Visualization Promotion Organization以一种易于理解的方式向公众提供这些数据。

鸟取县建筑物的分布。建筑物的数量被聚合到一个区域网格（1km网格）中，并使用Cesium中显示的网格代码(mesh code)创建三维网格图。由于网格与所在地的信息和建筑物的数量相关联，因此在向居民解释当地风土人情时，可以方便地演示。

i-Urban Renovation app是基于CesiumJS构建的，用于可视化和分享数据。即时鸟取县覆盖了大约120平方米充满各种各样的建筑，app使用3D Tiles依然可以高效地流式化建筑数据。

基于用途对建筑物进行分类, 并对土地利用需求进行比较. 用户也可以基于Cesium Stories实现类似的功能。 supports 3D Tiles styling.

基于Cesium app，用户可以看到任何建筑物的当前状态。建筑物可以根据各种指标参数进行着色，包括：

用途，如住宅、商业、商业、政府、农业等，
层数，易于区分高层和低层建筑的分布，
建筑材料，如木材或钢筋混凝土，
建筑年份，显示新老建筑的分布情况。

此外，用户还可以通过将建筑数据集与土地利用分区数据集相结合来检查建筑使用与土地利用法规之间的关系。当用户单击建筑物时，将显示详细的建筑物属性。

查看建筑使用情况。点击各个建筑物查看详细数据。我们最近在Cesium Stories中新增了功能added feature picking to Cesium Stories 基于Cesium Stories实现你自己的需求.

请前往 i-Urban Renovation 或 data encoding specification.查看或者将您自己的数据上传到 Cesium ion 来轻松的生成自己的Cesium Stream 3D Tiles.

作者：Sarah Chow

原文链接：https://cesium.com/blog/2020/03/31/i-urban-renovation-visualizes-munakata/

评语：虽然依然是在苦劝大家用Cesium ion, 但是我们可以看到Cesium在大场景中的应用也不错。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

将Cesium ion上的3D Tiles和Bing imagery应用到osgEarth

Sun, 19 Apr 2020 14:44:51 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Pelican Mapping 激动的宣布支持加载Cesium ion上的3D Tiles和Bing图层到他们的osgEarth数字地球渲染工具上。

添加3D Tiles支持

osgEarth 绘制来自Cesium ion中的数据Melbourne, Australia

在过去的一年中，我们一直在开发对osgEarth中3D Tiles的支持，事实证明这是一种令人兴奋和高效的运行格式。我们首先开发了一个基于TinyGLTF的OpenSceneGraph的glTF读写器。在此基础上，我们为osgEarth构建了一个3D Tiles Layer的插件，用于处理流式Tiles。osgEarth根据Cesium使用的相同屏幕空间误差指标来决定何时加载和显示tiles，因此3D Tiles layer在osgEarth中的外观应该与在Cesium中相同。开发了3D Tiles loader之后，我们可以通过添加基于授权的ion token到3D Tiles layer以快速添加对Cesium ion的支持。

Bing Maps

osgEarth通过Cesium ion渲染带标记的Bing imagery

我们还增加了对Bing地图的支持，从Cesium ion到osgEarth。osgEarth已经有了一个Bing图像driver，所以我们可以使用Cesium ion的API来获取Bing的密钥和映射样式，然后在driver基础上创建一个osgEarth Bing图像层，证书由Cesium ion提供。我们希望在将来添加对更多外部图像类型的支持。

编码整合（Putting it all together）

下列是一个Earch文件的示例，用于表示如何从Cesium ion上加载内容到osgEarth。

<map name="Cesium ion">
<CesiumIonImage name="Bing Maps Aerial With Labels">
<asset_id>3</asset_id>
</CesiumIonImage>
<CesiumIon3DTiles name="Melbourne">
<asset_id>69380</asset_id>
</CesiumIon3DTiles>
</map>

可以将Cesium ion token设置为环境变量，然后使用任何基于osgEarth的应用程序加载earth文件。

export OSGEARTH_CESIUMION_KEY=YOUR_API_KEY
osgearth_viewer cesiumion.earth

作者：Jason Beverage

原文链接：https://cesium.com/blog/2020/04/02/osgearth-supports-cesium-ion-assets/

评语：osgEarch宣布支持Cesium ion。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

从带Per-Building数据的KML/COLLADA中创建3D Tiles

Fri, 10 Apr 2020 07:13:20 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

许多Cesium的使用者经常需要将整个城市的数十万个三维建筑可视化，用于房地产、城市规划或土木工程项目。为了更便捷地为这些行业创建有用的虚拟数据（digital twins），我们刚刚添加了在将KML/COLLADA上传到Cesium ion时嵌入特征数据的支持。

这意味着您现在可以从建模工具（如CityEngine、Rhino和3DCityDB）导出您的三维建筑，并在Cesium ion web上共享数据时包含每个建筑的属性。

Philadelphia 的3D建筑与Cesium World Terrain相结合。可以单击每个建筑以显示其名称name、地址address和地块编号parcel number。

Cesium ion将你的建筑转换为3D Tiles，以优化它的网络，同时仍然允许你检查每一栋建筑。上述示例的源3D Data来自宾夕法尼亚州空间数据访问( Pennsylvania Spatial Data Access)，地址、名称、地块编号和城市所有的属性来自费城开放数据（Open Data Philly）。

为了深入了解这种可视化，我们可以使用3D Tiles Styling来突出显示Philadelphia拥有的所有属性，并单击它们以获取其包裹编号。然后，可以使用地块编号从城市数据库中查找有关每个建筑的更多信息。

您可以使用3D Tiles Styling来突出显示Philadelphia城市拥有的所有建筑物，如博物馆和历史遗迹。

要为城市创建这样的场景，源数据应该是一个或多个KML文件，用于定义每个三维模型的位置。这是一个来自KML文件的片段，用于费城建筑物。

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


<Placemark>
 <name>Independence Hall</name>
 <Model>
 <Link><href>building.dae</href></Link>
 <!-- Model properties like longitude, latitude, etc... -->
 </Model>
 <ExtendedData>
 <Data name="Address">
 <value>500-36 CHESTNUT ST</value>
 </Data>
 <Data name="Parcel_ID">
 <value>313762</value>
 </Data>
 <Data name="Is_City_Owned">
 <value>True</value>
 </Data>
 </ExtendedData>
</Placemark>

Placemark的名称用作建筑物的名称。任何附加数据都可以添加到标记中。

一旦你把建筑上传到Cesium ion，你就可以用Cesium Stories来设计和检查它。您还可以将它与其他类型的内容（如CityGML或点云）组合，这些内容也可以具有嵌入特征数据。

请尝试创建Cesium ion账户并上传你的建筑creating a Cesium ion account and uploading your 3D buildings。

作者：Omar Shehata

原文链接：https://cesium.com/blog/2020/04/09/kml-collada-metadata/

评语：Cesium官方不遗余力的推动Cesium ion和Cesium Stories，大家也可以关注一下，但是我本人对online的东西不是那么信奉，毕竟大家都喜欢搞离线。数据安全也日益重要。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

将Cesium Tools用于更好的构建管理

Thu, 02 Apr 2020 08:41:50 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium技术正在给建筑业带来革命性的变化。我们与 partnership with Komatsu合作开发的智能建筑仪表盘使我们能够比以往更快地可视化、测量和分析建筑工地的进度。下面将介绍它的工作原理。

聚集不同的数据集来评估进度

为了保持跟踪，现场管理人员必须不断地将在CAD设计中提供的计划与现场实际发生的情况进行比较，这些情况由传统调查（Traditional survey）、无人机调查（Drone survey）和智能施工车辆（Smart vehicles）的数据（包括竣工数据和车辆遥测数据）采集。

Cesium Tools应用程序将设计模型与现实世界中的时间标记数据结合，以进行测量和跟踪进度。Cesium将这些数据源作为输入，将它们融合在一起以创建工作站点的最新3D表示，并将它们处理为3D平铺，以便它们可以轻松共享和流式传输。

一种DSM和正射影像，转换成三维平铺，覆盖使用CAD软件包创建的线条文件中的矢量数据

收集数据

生成智能构建应用程序需要我们准备接收各种数据类型，以不同的方式和完整度收集。

传统调查

传统测量场地的方法是使用探测车在整个工作场地的位置网格上进行GPS测量。以这种方式收集数据需要一天或更长的时间，而且收集的数据比较少。这些数据可以编译成LandXML、DXF或其他三角形网格格式的三维网格。

无人机调查

调查也可以由无人机或UAV进行。大约一周一次，一次最多一天，一架无人机飞过现场，在工作现场的多个地点拍照。摄影测量软件将这些照片转换成地形的整体三维模型。常见的输出包括点云、DTM/DSM地形数据和正射影像。

日本大阪一个工地的点云，由无人机收集，转化成网格，再由Cesium ion平铺成3D Tiles。

无人机调查比传统调查快得多。对于英国的一家公司来说，采用基于无人机的数据采集方法，再加上Cesium的3D拼接功能，将从采集到可视化的时间从3天缩短到30分钟。每种方法的测量结果误差不到2%。

智能施工车辆

建筑业的最新趋势之一是机器跟踪，要么在建筑设备中嵌入GPS传感器，要么在设备上附加售后传感器。这些传感器跟踪每台机器在工地周围移动时的情况，提供“竣工”数据部分地形数据，当与现有地面合并时，这些数据可以提供工地地形的近乎实时的图片，通常是按小时采集的。

图中的黄色部分，最近从安装传感器的工程机械收集的“竣工”数据，与之前对整个工地进行的无人机调查相融合。Cesium可以让你在任何时候组合和可视化不同的表面。

超乎想象

尽管能够看到正发生的事情很有价值，但Cesium Tool应用程序的真正价值在于分析功能。

一个用热力图突出显示的切割和填充分析，显示需要移动多少废土和已经移动了多少废土。

例如，如果项目经理需要将结果发送给客户进行计费，他们可以理解已移动的废土的总百分比，以及仍然需要工作的区域。确定库存中剩余材料的数量非常简单，只需点击创建一个测量：程序将计算材料的体积、重量和价值。

测量库存。

项目经理还可以通过单击路径并检查坡度（作为热力图或使用二维横截面工具的纵断面图）在行进之前查看路线。

地形坡度热图。

这只是智能构建应用程序（Smart Construction app）中Cesium赋能的众多功能的概述。进入我们的construction industry，观看视频并了解更多信息。

原文链接：https://cesium.com/blog/2020/03/30/construction-with-cesium/

作者：Gabby Getz

评语：Cesium团队提供的工具和功能越来越强大，令人惊叹。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用Cesium Stories在3D Tilesets中检查Features

Fri, 27 Mar 2020 14:50:31 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

我们创建了3D Tiles用以流式化、可视化和分析大量的三维内容，如整个城市或复杂的建筑模型。基于当前的Cesium Stories的更新，我们可以通过点击来检查3D Tiles中的feature数据。

现在，可以单击Cesium Stories中的任何3D Tiles feature，例如New York City tileset，以审查其数据。

假设想了解纽约市医疗设施的分布情况。你可以使用using styling来突出显示3D Tileset中的所有建筑，然后点击来查看设施容量，，是否有紧急事件以及它们的官网和联系电话。

你也可以分享自己的Cesium Story，让其他用户以同样的方式检查它，无论他们是在办公室做一个彻底的分析，还是在外地。在移动设备上，可以折叠或展开信息框，以便在三维场景的完整视图和要素数据之间轻松切换。

Cesium Stories适用于任何现代网络浏览器。在移动设备上，可以折叠或展开信息框，以便在三维场景的完整视图和要素数据之间轻松切换。

Cesium Stories中的feature拾取可在任何具有feature数据的3D Tileset上工作，且不限制feature的物理尺寸，因此这非常适合于BIM/CAD等行业，在这些行业中，需要检查非常大的管道，直至最小的阀门或螺钉。

Cesium Stories中的feature提取可以在任何包含feature数据的3D Tileset上工作，比如电厂BIM模型中的管道和阀门。

Feature拾取也适用于向量数据，比如GeoJSON、KML和CZML。向量层提供了一种简单的方式来添加或更新特征数据，即使3D Tileset本身不包含任何已定义的特征。

在下面的例子中，我们从没有feature数据的Cesium Ion Asset仓库中提取了华盛顿特区的Vricon摄影测量tileset，并将其与华盛顿特区开放数据平台的建筑能源使用CZML相结合。

结合能源使用的CZML和华盛顿特区的摄影测量，让我们可以点击任何建筑物，查看其能源得分。该CZML是自定义的，可以添加建筑物的图片。

允许用户可以点击任何一个建筑，查看它的名称，年能耗，和能源之星得分。KML和CZML支持HTML描述，因此可以添加图像、链接，或者通常自定义它的样式。

我们非常激动你将用它来构建您要的东西。学习如何在the Cesium Stories styling tutoral中使用拾取和样式化造型。

原文链接：https://cesium.com/blog/2020/03/25/explore-data-with-picking/

作者：Omar Shehata

评语：Cesium Stories功能强大，非常值得一试。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用Cesium Stories来可视化时序数据

Mon, 23 Mar 2020 09:07:26 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium可以用来可视化随时间变化的数据，无论是跨越数百年的地质变化，还是需要追踪到几分之一秒的卫星轨道。作为正式发布的Cesium Stories（ launch of Cesium Stories）一部分，我们很高兴地宣布改进了对动态时序数据的支持，因此您可以拖拽动态KML或CZML来创建可视化变化数据的交互式故事。

这是一个伟大的方式来回顾收集的无人机飞行和遥测数据随着时间的推移，因为你可以看到无人机的路径——遍布全世界。

使用Cesium Stories，我们可以回顾无人机与周围景观的飞行数据，并查看收集的时序的遥测数据

或者，如果您在STK （tools like STK）等工具中进行离线分析，可以将您的工作导出为CZML并使用链接轻松共享。

卫星覆盖率由STK（System Tool Kit系统工具包）计算，并作为CZML文件导出到Cesium Stories。

时序动态数据不必是随时间移动的对象。我们的用户还绘制了房价、疾病爆发和不断变化的地形图。

Cesium Stories也支持动态KML文件。这幅图显示了1979年到2007年格陵兰岛每年的冰面融化情况。来自国家冰雪数据中心的数据。（National Snow and Ice Data Center）

Cesium Stories使你很容易看到和分享你的时序动态数据，让你控制播放速度、相机如何移动。尝试一下我们新的时序动态数据教程( with our new time-dynamic data tutorial)。或者看看你还能用Cesium Stories做些什么( you can do with Stories)。

原文链接：https://cesium.com/blog/2020/03/04/time-dynamic-stories/

作者：Omar Shehata

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用3D Tiles Overview学习3D Tiles

Sat, 21 Mar 2020 07:38:56 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

3D Tiles的创建是为了在web上传输大量的3D数据集。作为一个开放的规范，我们打算在许多不同的运行时引擎中使用它作为可视化和分析大量3D数据的事实规范。如今，许多引擎，包括CesiumJS、AGI的STK和Uber的loaders.gl，都支持3D Tiles来传输海量的3D地理空间数据集。

我们激动地宣布发布3D Tiles Overview，这是一个学习3D Tiles主要概念的简易指南，旨在助于将3D Tiles集成支持到运行时引擎中，以便可视化和分析大量异构的3D地理空间内容。

3D Tiles Overview的封面页突出显示了所涵盖的所有概念。

本指南对关键概念的简洁覆盖来补充详细全面的3D Tiles specification，以帮助开发人员快速使用3D Tiles。

我们很高兴与马可·赫特（Marco Hutter）合作，他是glTF的长期撰稿人，也是glTF reference的创造者，正是这个reference card激发了我们的灵感。

我们很想了解3D Tiles概述如何帮助开发者使用3D Tiles，以及如何是否又改进的建议。如果你正在寻找一个地方学习3D Tiles，前往Cesium ion策划自己的3D Tilesets，或上传您自己的数据切片，托管，转为3D Tiles流。

作者：Shehzan Mohammed

原文链接：https://cesium.com/blog/2020/03/12/3d-tiles-overview/

说明：3D Tiles Overview是Cesium官方出品的3D Tiles入门指南，非常值得大家学习。

GitHub地址是：3D Tiles Overview

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

使用EdgyGeo Cesium工具查询下载数据集

Thu, 19 Mar 2020 02:31:00 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

EdgyGeo, Inc. 带来了一件非常棒的工作支撑架构、工程和构建（AEC）工业。这次让我们来看它们的下载工具，它允许架构师、工程师、开发者和城市规划者快速地获取指定区域的海量数据集。

一个场景中的三维建筑物和路线。数据集来自Los Angeles。

有了Cesium-based viewer，EdgyGeo允许用户探索整个城市。他们数据的亮点是高分辨率的CyberCity 3D建筑，摄影测量自动建模生成。它们的高分辨率建筑库覆盖了美国近100个城市和世界其他几十个主要城市，另外还提供其他地点使用的挤压式建筑。

但EdgyGeo提供的还不止这些建筑。它们拥有来自州和地方政府（特别是城市）、公用事业、机场、商业房地产公司、市中心开发协会和第三方实体的数据集。这些数据集包括地形、环境数据、联邦应急管理局洪水数据和其他地理信息系统数据。订阅者还可以添加自己的数据资产并构建数据清单。

EdgyGeo收集并整理这些数据。利用Cesium的3D tiling pipeline，它们将这些数据集拼接成3D Tiles，并将它们融合在Cesium ion中，这样无论收集到的数据有多大，都可以高效地流式传输，并在具有三维地形和图像的地图中轻松地进行探索。

Cesium的3D tiling pipeline允许EdgyGeo同时在线共享大量数据集。

不仅场景易于浏览，用户还可以下载数据用于自己的项目。用户只需选择场景的一部分并下载该区域中的数据。他们可以一次下载多个地理信息系统数据集，包括CyberCity 3D建筑模型、3D地形、航拍图像、中心线、路缘等，上述所有数据都是精确地理定位的。

很容易找到和选择特定区域的相关数据集，如选取Cambridge, MA。

下载以Collada（DAE）和KML/KMZ格式提供，用户可以随时上传到自己Cesium ion帐户或在其他应用程序（如Rhino、SketchUp和Revit）中进行可视化。KML格式也将很快成为可用的格式。

EdgyGeo导出的三维几何图形在SketchUp中可视化。

有了这个可定制的下载选项，订阅者可以获取特定项目中所需的本地数据集，在一个简单的数据下载和传输过程中链接GIS、AEC、BIM和构建工具。

可以通过联系EdgyGeo首席执行官Kevin DeVito来试用该工具。

作者：Sarah Chow

原文链接：https://cesium.com/blog/2020/03/03/edgygeo-3d-tiles-download/

评论：Cesium ion似乎是Cesium官方主推的数据存储及管理工具。从未来发展来看，建议大家可以使用本文中的下载工具和Cesium ion。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

探索新冠肺炎（COVID-19）对全球航班的影响

Mon, 16 Mar 2020 15:27:10 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

随着今天从欧洲到美国的旅行限制生效，以及为了减缓新冠病毒的传播更加劝导群众留在家中，我们很好奇这些措施何影响全旅行。显而易见，我们使用Cesium进行探索。

我们开始收集过去几个月每隔一天的航班数据。下列是进出北京主要国际机场的所有航班：

[随着时间的推移，北京首都国际机场（PEK）的预定航班数量已可视化出来。起飞显示为红色，到达显示为绿色。]

一月底，航班数量急剧下降，从大约900架次迅速下降到不足300架次。这与世界卫生组织（WHO）宣布全球卫生紧急状况、美国和其他国家限制从中国出发的旅行相吻合。

继中国之后，意大利受到了冠状病毒的严重影响。第一例报告病例发生在2月22日，病例迅速激增，意大利政府于3月8日实施隔离。我们可以看到那里的航班流量在下降，尽管没有那么迅速：

[进出意大利罗马da Vinci–Fiumicino机场（FCO）的航班。]

截至发稿时，伦敦的航班还没有受到任何官方限制，但3月剩余时间的定期航班仍有大幅下降。我们把所有美国航班都标记为红色。

[进出伦敦Heathrow机场的航班。]

最后，这是纽约市的肯尼迪机场，美国最大的空中交通枢纽之一。到目前为止似乎没有任何明显的变化：

[进出纽约John F. Kennedy国际机场的航班。]

如何创造上述可视化效果

飞行数据是从AeroDataBox获得的。它们的API读取一个机场代码参数，并返回在给定时间段内进出该机场的所有航班。

一旦我们有了这些预定的航线，我们就使用OpenFlights的开放数据来获取每个机场的位置。

最后，我们创建了一个CZML，它用一个时间戳为每个路线绘制一条线，并用Cesium Stories可视化了随时间变化的路线。

如果读者想创建类似的东西，我们建议你从Cesium Stories的动态时序数据教程开始。

原文作者：Omar Shehata

链接：https://cesium.com/blog/2020/03/13/covid-19-flight-impact/

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium近期更新及国内源码下载地址

Mon, 09 Dec 2019 01:31:00 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

有一段时间没有更新公众号和知识星球了。最近3个月做了很多人生岔路口的选择，本来已经入职一家国企，完全从事智慧城市的引擎开发。后来，阴差阳错又入职微软（亚洲）互联网工程院（STCA）从事大数据相关研发。造化弄人。没有对错，只有选择，如果大家在技术岗位上有求职、简历、面试、招聘的交流需求，可以联系我。

但是请大家放心，数据可视化方向和Cesium我会一直跟下去，目前来说，我也很看好Cesium项目，也很看好物联网和智慧城市。

接下来的一段时间会争取公众号做到周更。知识星球恢复到月更。内容尽可能做到不拖沓，有干货，希望对大家有一些帮助。如果大家对Cesium中文网有什么建议和意见也欢迎给我留言。

Cesium近期的更新：

目前Cesium依旧保持每个月月初的一次发布的频率，但是在2019年11月应该有一次失误导致，2019年11月有两次发布。截至到目前（2019年12月9日），Cesium已经更新到了Cesium-1.64。下面是更新的清单：

1.64 – 2019-12-02：Cesium-1.64.zip 引入大量内部优化。

1.63.1 – 2019-11-06：Cesium-1.63.1.zip 修复1.63中，当设置window.devicePixelRadio大于1.0时，地表和labels渲染不正确的问题。

修复1.63中，一些primitives将通过globe显示，当log depth被禁用。

1.63 – 2019-11-01：Cesium-1.63.zip Cesium迁移到ES6 modules。这可能会对您的Cesium程序造成影响，基于您如何使用Cesium。

我们将ceiumjs.org和cesium.com所有网站内容整合进cesium.com。

新增labels的UTF-8支持，极大提升了对非拉丁字母和emoji的支持。

10倍压缩Web Workers bundle大小，从8384KB(2624KB压缩后)到863KB(225KB压缩后)。提高了Cesium加载速度，尤其在低性能设备和高延迟网络中。

国内源代码下载地址（200KB/S）

考虑到GitHub上Released版本的网速十分不稳定（虽然GitHub已经被微软收购），所以，Cesium中文网提供Cesium最近版本的镜像下载地址，但是考虑到服务器和带宽的费用，不能保证所有历史版本都可以下载，也不能保证下载速度多好。实际测试100~200KB/S

下载地址：

http://cesium.coinidea.com/site/download.html

Cesium中文网交流QQ群：807482793 Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[一]Cesium利其器——Visual Studio Code

Tue, 22 Oct 2019 15:01:55 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

IDE

Web前端刚入门的朋友，常常想选择一个快速、好用、流行（其实我也不知道为什么要流行，或许是在技术的路上，工程师希望自己走在主流的路上？）的IDE（Integrated Development Environment：集成开发环境）。IDE重要么？重要也不重要。不重要是因为：它只是一个工具，我们更应该关注的是需求、逻辑、算法、知识等。重要是因为：它是一个工具，工欲善其事必先利其器，工具选好了常常能够达到事半功倍的效果。

CesiumJS官方并没有特别推荐IDE，但在入门教程Cesium入门2 - Cesium环境搭建及第一个示例程序有这么一段话：

If you’re already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you’re just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

可以看到Cesium团队主要使用开源的Eclipse或者推荐使用Notepad++。

根据笔者自身的使用情况简单列了一些使用过的IDE：

Notepad（Windows自带）或TextEdit（Mac自带）

价格：免费

下载地址：系统自带

开启速度：极快

操作系统：Windows/Mac

Notepad即记事本，工程师（Note:以后笔者会将程序员称为工程师，尊重自己赢得尊重）的终极梦想摆脱IDE用纯文本编辑器编程是一种很酷的事，但是特别困难，如果单纯的阅读一些简单的HTML、JavaScript或CSS可以用记事本打开，但是非常不建议用来开发。

如果读者系统的学习过计算机科学，那么对编译、链接、生成、测试等一定不陌生（虽然前端基本不会用到编译链接），一个好的IDE一定能够对项目有很好的组织。记事本做不到这一点。
Notepad++（For Windows only）

价格：免费

下载地址：https://notepad-plus-plus.org/downloads/

开启速度：极快

操作系统：Windows

非常优秀的超轻量级编辑器，除了能够阅读和编写HTML、JavaScript或CSS之后，支持打开文件夹，这在一定程度上对项目进行了一些组织。有大量插件可以使用。目前，就读者所了解到的，它仅支持Windows环境。
Sublime Text (For Windows and Mac)

价格：收费闭源

下载地址：www.sublimetext.com/ (官网) | http://www.sublimetext.cn/ （国内社区）

开启速度：快速

操作系统：Windows

非常优秀的轻量级编辑器。几乎涵盖Notepadd++的所有功能。同时支持Windows和Mac。海量插件。

新特性包括：GOTO ANYTHING、GOTO DEFINITION、多重选择、命令面板、自定义、分割编辑、即时项目开关等。当然不付费，也能够使用unregistered版本。
Eclipse/MyEclipse（For Windows and Mac）

价格：免费/收费

下载地址：https://www.eclipse.org/downloads/

开启速递：中速/慢速

操作系统：Windows/Mac

MyEclipse实际上是Eclipse的一个付费版本，最开始是以插件的形式存在。Eclipse主要是作为一个Java的IDE，能够非常好的集成Java相关的插件。如果读者开发Cesium的过程中，后端选型是Java并且喜欢使用免费的IDE，没有那么关注前后端分离，那么Eclipse是一个非常好的选择。
PHPStorm/IntelliJ IDEA/WebStorm（For Windows and Mac）

价格：收费

下载地址：http://www.jetbrains.com/phpstorm/ | http://www.jetbrains.com/idea/ | http://www.jetbrains.com/webstorm/

开启速度：慢速

操作系统：Windows/Mac

从域名可以看出来，这三个IDE出自一家公司之手。它们是非常优秀的IDE，但是它们都价格不菲，并且是按年购买license。如果您有一定的资金，可以购买它们。它们真的非常优秀。其中，如果读者开发Cesium的过程中，后端选型是PHP，那么可以使用PHPStrom；如果后端选型是Java，那么可以使用IntelliJ IDEA；如果只是需要开发Web前端的代码，有一个比较好配置电脑，可以接受付费，那么可以使用WebStorm。有句老话叫：“便宜没好货，好货不便宜”，卖这么贵，是因为它们真的很好用。
Visual Studio Code （VSCode）(For Windows and Mac)

价格：免费

下载地址：https://code.visualstudio.com/

GitHub地址：https://github.com/Microsoft/vscode

开启速度：快速

操作系统：Windows/Mac

便宜真的没好货么？并不是，向大家隆重介绍，宇宙最强IDE VSCode。在MSRA实习的时候，就一直在想Visual Studio可以做得那么优秀，那么有没有能在前端使用的类似于Visual Studio的优秀的IDE。有的，Microsoft的亲儿子，免费开源跨平台的Visual Studio Code来了。不得不说，Microsoft这几年在拥抱开源方面确实做了很多。
```
Free. Built on open source. Runs everywhere.
```
VScode 不仅可以用来开发前端，也可以用来开发Java、PHP、C++、Python…

插件官网：https://marketplace.visualstudio.com

VScode在各个方面并不比WebStorm逊色。VSCode拥有非常好的插件生态。具有一个优秀IDE应该有的各种功能特性：智能提示、前端支持、自动修复（插件）、Git/GitHub集成（GitLens）、历史记录（Local History）、代码检查（Code Spell Checker）、主题配色等。

Visual Studio Code 入门

1. 命令面板

可以通过F1或Ctrl（Cmd for MAC）+Shift+P打开

在框中输入：>Extensions: Show Installed Extensions 即可查看已安装的插件，也可以输入其它命令。

2. 如何安装插件

安装live server插件

点击左侧工具栏中的Extensions，在框中输入live server也可以是别的插件吗，然后可以看到第一个插件名为：

Live Server。点击Install，即安装该插件。

该插件的用处：内置一个Web服务器（Live Server）,可以在开发代码的过程中，随时预览自己的修改是否正确，而无需过于关注Web服务器。

右击“Open With Live Server”即可在浏览器中打开对应Cesium页面：

3. 常用插件列表

Settings Sync：同步VSCode配置

Debugger for Chrome：VS Code调试在Google Chrome中运行的JavaScript代码

beautify: 格式化代码

Auto Rename Tag: 自动完成头部和尾部闭合标签的同步修改

guides：代码对齐辅助线

filesize：显示当前文件大小、创建修改时间

Todo Tree：快速搜索TODO等注释标记

vetur/VueHelper： VUE插件

HTML Snippets：提示初级的h5代码片段，标签等

HTML CSS Support：让html标签写上class，智能提示当前项目所支持的样式。

vscode-icon：让vscode的文件夹目录添加上对应的图标。（如果不生效，在【文件-首选项-文件图标主题】重新选择设置）

path intellisense：文件路径自动补齐。

npm intellisense：require引用包的补齐

bracket pair colorizer：让括号有独立的颜色

tortoiseSvn：svn插件

auto close tag：自动添加html、xml关闭标签

change-case：修改文本的更多明明格式，驼峰命名，下划线分割命名等等

color info：在颜色上悬停光标，就可以预览色块中色彩模型的详细信息、

css peek：追踪至样式表中css类和id定义的地方。在html文件右键菜单，单击选择器时，选择“go to definition ”，会跳转到css样式代码段

eslint：检查js编程中的语法错误

html boilerplate：html模板插件，一键创建html文件

htmlHint：html代码格式检测

intelliSense for CSS class names in HTML：把项目中css文件里的名称，智能提示在html中

JavaScript (ES6) code snippets ：es6代码片段提示

上述插件直接搜索安装即可。

4. 中文语言包

chinese(Simplified)Language Pack for Visual Studio，看不习惯英文的读者，可以下载安装这个，中文简体语言包。

安装完成之后，重启VSCode：

网络上有非常多的博主详细的介绍了如何使用Visual Studio Code工具。大家可以打开搜索引擎进行搜索。也可以在Cesium中文网（http://cesium.coinidea.com/）上留言。

Cesium中文网交流QQ群：807482793 Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium中文网的朋友们

Mon, 15 Jul 2019 07:28:08 +0000

目前已开通知识星球-Cesium中文网的朋友们

注意：仔细思量好再进来，一旦付费，概不退费。下述内容均尽力而为。 1. 每月一次技术交流（Cesium为主），提供源码。
2. 每人5次/周免费提问（Cesium，数据可视化及其他技术问题）。
3. 简历修改，工作推荐。
4. 额外付费职业规划。

暂定的交流内容如下：[授人以鱼不如授人以渔。重点还是希望大家能够具备自己独立自主研发相关框架的能力]；希望能对您有所帮助。

考虑大家的实际情况，可能会稍微涉及：操作系统、计算机网络、HTML/CSS/JavaScript、面向对象、基本的三位数字地球原理的知识。
自己能够具备操作简单Git命令，从开源社区下载代码，并运行Cesium。
Cesium的图片、地形以及模型的加载及操作。
自己能否爬取自己的瓦片图数据；如何编写轻量级的爬取工具。
如何通过GeoServer构建自己的GIS数据服务器，已经二维的Openlayer数据展示。
跨终端Web，Cesium中的人机交互事件，如何实现局域网下跨浏览器或跨设备的同步。
可能涉及的其他内容：Cesium与Echarts和VUE、其他GIS系统、一些数据可视化的内容。

[CesiumJS]Cesium中级教程10 – CesiumJS and webpack

Sun, 02 Jun 2019 15:25:46 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

webpack是打包JavaScript模块流行且强大的工具。它允许开发人员以直观的方式构造代码和assets，并使用简单的require语句根据需要加载不同类型的文件。构建时，它将跟踪代码依赖关系，并将这些模块打包到浏览器加载的一个或多个包中。

在本教程的前半部分，我们从头开始建立了简单的Web应用程序使用webpack，然后覆盖后续步骤集成Cesium npm module。如果你喜欢使用cesiumjs开发Web应用,那么webpack是一个好的选择。如果您是刚接触Cesium并且想要寻找学习构建您的第一个样例应用，请查看Getting Started Turtorial。

在第二部分，我们将探索更高级的Webpack配置，以优化使用CesiumJS的应用程序。

在官方的cesium-webpack-example中可以找到优化CesiumJS webpack应用程序的完整代码和提示。

Prerequisites 先决条件

基本了解命令行、JavaScript和Web开发。
一个IDE或代码编辑器。Cesium团队的开发人员使用Visual Studio Code，但是一个最小的代码编辑器（如Sublime文本）也完全没有问题。
已安装Node.js。我们建议使用最新的LTS版本。

Create a basic webpack app 创建基础webpack应用

在本节中，我们将介绍如何使用webpack和开发服务器设置基本的Web应用程序。如果您已经设置了一个应用程序，并且只想添加cesiumjs，请跳过Add CesiumJS to a webpack app。

Initialize an app with npm 使用npm初始化应用

为您的应用创建一个新的cesium-webpack。打开控制台，导航到新目录，然后运行以下命令：

1

npm init

按照提示操作并填充有关应用程序的所有详细信息。按enter键使用默认值。这将创建package.json。

Create the app code 创建应用代码

为我们的应用程序代码创建一个src目录。当我们构建应用程序时，webpack将在dist目录中生成分发文件。

创建src/index.html然后为样板HTML页添加代码。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport"
 content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <title>Hello World!</title>
 </head>
 <body>
 <p>Hello World!</p>
 </body>
</html>

接下来，为应用程序创建一个入口点。这是webpack查找包的所有javascript源代码和依赖项的entry point起点。

创建src/index.js然后添加下列代码：

1

console.log('Hello World!');

Install and configure webpack 安装和配置webpack

开始安装webpack：

1

npm install --save-dev webpack

Configuration 配置

创建webpack.config.js以定义webpack配置对象。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const path = require('path');

const webpack = require('webpack');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 }
};

context指定文件的基本路径。entry用于指定包。在这种情况下，app包的入口点是src/index.js。webpack将把打包后的app.js输出到dist文件夹。

Loaders 加载

Webpack像模块一样加载所有内容。使用loaders加载CSS和其他资产文件。安装style-loader、css-loader和url-loader。

1

npm install --save-dev style-loader css-loader url-loader

在webpack.config.js中添加两个module.rules：一个用于css文件，另一个用于其他静态文件。对于每个，test定义要加载的文件类型，use指定加载程序的列表。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


const path = require('path');

const webpack = require('webpack');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
 }, {
 test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
 use: [ 'url-loader' ]
 }]
 }
};

Plugins 插件

定义index.html并使用一个名为html-webpack-plugin的webpack plugin将包注入该页面。

1

npm install --save-dev html-webpack-plugin

在webpack.config.js中引用该插件，然后将它注入到plugins。将src/index.html传入作为我们的template。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 context: __dirname,
 entry: {
 app: './src/index.js'
 },
 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
 }, {
 test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
 use: [ 'url-loader' ]
 }]
 },
 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 })
 ]
};

配置文件是一个javascript文件，因此我们可以引入其他节点模块并执行操作。

Bundle the app 捆绑应用

使用package.json定义可以使用npm调用的脚本。添加build命令。

1
2
3


 "scripts": {
 "build": "node_modules/.bin/webpack --config webpack.config.js"
 }

此脚本调用Webpack并传递进webpack.config.js配置文件。

我们在这些脚本中使用webpack和webpack-dev-server的本地安装。这允许每个项目使用自己的单独版本，这是webpack文档推荐的版本。如果您希望使用全局版本，请使用npm install–global webpack全局安装它，并使用命令webpack–config webpack.config.js运行它。

当运行build命令时： npm run build

您应该看到webpack的一些输出，从以下内容开始：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


npm run build

> test-app@1.0.0 build C:\workspace\test-app
> node_modules/.bin/webpack --config webpack.config.js

Hash: 2b42bff7a022b5d956a9
Version: webpack 3.6.0
Time: 2002ms
 Asset Size Chunks Chunk Names
 Assets/Textures/NaturalEarthII/2/0/3.jpg 10.3 kB [emitted]
 app.js 162 kB 0 [emitted] app

app.js包和index.html文件将被输出到dist文件夹中。

Run the development server 运行开发服务器

使用webpack-dev-server服务于开发构建然后可以在行动中看到我们的应用：

1

npm install --save-dev webpack-dev-server

在package.json中添加一个start脚本以运行开发服务器。通过*–config标志设置配置文件。执行命令时，使用–open*标志在浏览器中打开应用程序。

1
2
3
4


 "scripts": {
 "build": "node_modules/.bin/webpack --config webpack.config.js",
 "start": "node_modules/.bin/webpack-dev-server --config webpack.config.js --open"
 }

告诉开发服务器为dist文件夹提供文件。将其添加到webpack.config.js的底部。

1
2
3
4


 // development server options
 devServer: {
 contentBase: path.join(__dirname, "dist")
 }

最终，我们运行app

1

npm start

你应该看到你的内容在localhost:8080上呈现，看到“Hello World！“打开浏览器控制台时，显示消息。

Add CesiumJS to a webpack app 将CesiumJS加入到webpack应用

Install CesiumJS 安装CesiumJS

从npmg上安装cesium模块，并将其加入到package.json。

Configure CesiumJS in webpack 在webpack中配置CesiumJS

CesiumJS是一个庞大而复杂的库。除了javascript模块之外，它还包括静态资产，如css、image和json文件。它包括Web worker文件，以便在单独的线程中执行密集计算。与传统的npm模块不同，CesiumJS没有定义入口点，因为库的使用方式多种多样。我们需要配置一些附加选项，以便与webpack一起使用。

首先，定义CesiumJS的位置。本教程基于源代码，因此webpack可以包含单个模型并跟踪依赖项。或者，也可以使用CesiumJS的内置（简化或未简化）版本。然而，这些模块已经被组合和优化，这给了我们更少的灵活性。

将下列代码加入到webpack.config.js的顶部：

1
2
3


// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

本教程使用npm模块以便于安装，但您也可以克隆Github仓库或下载解压使用release版本。

将以下选项添加到配置对象，以解决webpack如何编译CesiumJS的一些问题。

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


 output: {
 filename: '[name].js',
 path: path.resolve(__dirname, 'dist'),

 // Needed to compile multiline strings in Cesium
 sourcePrefix: ''
 },
 amd: {
 // Enable webpack-friendly use of require in Cesium
 toUrlUndefined: true
 },
 node: {
 // Resolve node module use of fs
 fs: 'empty'
 },

output.sourcePrefix: 在每行之前添加\t制表符，以便覆盖webpack默认值。CesiumJS有一些多行字符串，因此我们需要用空前缀’’*覆盖此默认值。
amd.toUrlUndefined: true 告诉CesiumJS AMD webpack使用不符合标准toUrl函数的评估require语句的版本。
node.fs: ’empty’ 解决fs模块的某些第三方使用问题，该模块的目标是在节点环境中使用，而不是在浏览器中使用。

添加cesium alias，以便我们可以在应用程序代码中引用它。

1
2
3
4
5
6


 resolve: {
 alias: {
 // CesiumJS module name
 cesium: path.resolve(__dirname, cesiumSource)
 }
 },

Manage CesiumJS static files 管理CesiumJS中的静态文件

最后，确保静态CesiumJS资产、小部件和web worker文件得到正确的服务和加载。

作为构建过程的一部分，使用copy-webpack-plugin将静态文件复制到dist目录。

1

npm install --save-dev copy-webpack-plugin

在* webpack.config.js*文件中的上部引入：

1

const CopywebpackPlugin = require('copy-webpack-plugin');

并将其加入到plugins数组中：

1
2
3
4
5
6
7
8
9


 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 }),
 // Copy Cesium Assets, Widgets, and Workers to a static directory
 new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ])
 ],

这将复制Assets和Widgets目录以及built的web worker脚本。

如果您使用的是CesiumJS仓库的fork，那么Build文件夹将不存在。运行npm run release生成输出文件夹。有关详细信息，请参阅《Cesium生成指南》。

定义一个环境变量，该变量告诉CesiumJS使用webpackDefinePlugin加载静态文件的基本URL。plugins数组现在将如下所示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


 plugins: [
 new HtmlWebpackPlugin({
 template: 'src/index.html'
 }),
 // Copy Cesium Assets, Widgets, and Workers to a static directory
 new CopywebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ]),
 new CopywebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ]),
 new webpack.DefinePlugin({
 // Define relative base path in cesium for loading assets
 CESIUM_BASE_URL: JSON.stringify('')
 })
 ],

Require CesiumJS modules in our app 在应用中引用CesiumJS模块

在我们的应用程序中，有几种方法可以引用CesiumJS模块。您可以使用CommonJS语法或ES6import语句。

您可以导入整个CesiumJS库，或者只需要引入您需要的特定模块。引入模块将导致webpack只编译包中的那些模块及其依赖项，而不是整个库。

CommonJS style require

引入所有的CesiumJS：

1
2


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

引入独立模块

1
2


var Color = require('cesium/Core/Color');
var color = Color.fromRandom();

ES6风格导入

引入所有的CesiumJS：

1
2


import Cesium from 'cesium/Cesium';
var viewer = new Cesium.Viewer('cesiumContainer');

引入独立模块

1
2


import Color from 'cesium/core/Color';
var color = Color.fromRandom();

Requiring asset files 引用asset文件

webpack背后的原理是，每个文件都被视为一个模块。这使得导入资产与包括javascript相同。我们告诉Webpack如何使用加载器加载配置中的每种类型的文件，所以我们只需要调用require。

1

require('cesium/Widgets/widgets.css');

Hello World!

创建一个新的文件，src/css/main.css，为了样式化我们的应用：

1
2
3
4
5
6
7


html, body, #cesiumContainer {
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

创建一个div用于index.html body中的CesiumJS Viewer。替换*

Hello World!

*使用下面的div：

1

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

删除index.js中的内容并包含Cesium和我们的CSS文件：

1
2
3


var Cesium = require('cesium/Cesium');
require('./css/main.css');
require('cesium/Widgets/widgets.css');

为创建Viewer添加一行代码：

1

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

使用npm start运行应用用于在浏览器中查看Viewer。

复制并粘贴你最喜欢的Sandcastle例子。例如，粒子系统实例可以得出一个很好的结论。

Advanced webpack configurations 高级webpack配置

webpack可以通过更多方式提高性能、减小包大小以及执行其他或复杂的构建步骤。在这里，我们将讨论一些与使用CesiumJS库相关的配置选项。

在webpack.release.config.js的仓库示例中可以找到优化生产Cesium webpack构建的配置。

Code splitting 代码分割

默认情况下，webpack将CesiumJS打包在与我们的应用程序相同的块中，从而生成一个大文件。我们可以将CesiumJS拆分成自己的包，并使用CommonChunksPlugin提高我们的应用程序性能。如果你最终为你的应用程序创建了多个块，它们都可以引用一个常见的cesium块。

将插件添加到webpack.config.js文件中，并指定分解CesiumJS模块的规则：

1
2
3
4
5
6


 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: 'cesium',
 minChunks: module => module.context && module.context.indexOf('cesium') !== -1
 })
 ]

Enable source maps 启用源映射

源映射允许Webpack将错误跟踪回原始内容。它们提供或多或少详细的调试信息，以换取编译速度。我们建议使用*’eval’*选项。

1

 devtool: 'eval'

在生产产品中，不推荐使用源映射。

Remove pragmas 移除编译指令

CesiumJS源代码中存在开发人员错误和警告，这些错误和警告已从我们的小型发布版本中删除。由于没有内置的Webpack方法来删除这些警告，因此我们将使用strip-pragma-loader。

安装包：

1

npm install strip-pragma-loader --save-dev

在module.rules中将debug设为false，引入加载器：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


 rules: [{
 // Strip cesium pragmas
 test: /\.js$/,
 enforce: 'pre',
 include: path.resolve(__dirname, cesiumSource),
 use: [{
 loader: 'strip-pragma-loader',
 options: {
 pragmas: {
 debug: false
 }
 }
 }]
 }]

Uglify and minify 混淆与压缩

增删和缩小代码允许在生产中使用较小的文件大小。对于一个发布版本，CesumJS会修改JavaScript文件并缩小CSS文件。

使用uglifyjs-webpack-plugin用于混淆CesiumJS源代码。

1

npm install uglifyjs-webpack-plugin --save-dev

在配置文件中引入他：

1

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

在插件列表中包含他：

1
2
3


 plugins: [
 new webpack.optimize.UglifyJsPlugin()
 ]

在css-loader上使用minimize选项用于优化CSS。

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


 module: {
 rules: [{
 test: /\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 // minify loaded css
 minimize: true
 }
 }
 ]
 }]
 }

Resources 资源

官方的cesium-webpack-example仓库包含最小webpack配置、本教程中介绍的Hello World代码以及可选代码配置的说明。

有关要包含在新应用程序中的CesiumJS功能的教程，请参阅Cesium Workshop教程。

在[Sandcastle]中探索实例，并查看CesiumJS文档

要了解有关webpack的更多信息，请查看webpack概念，或深入阅读文档。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程9 – Advanced Particle System Effects 高级粒子系统效应

Sun, 02 Jun 2019 12:58:56 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

要了解粒子系统的基础知识，请参见粒子系统入门教程。

Weather 天气

Setup 设置

若要生成雪效果，请首先为每个粒子添加雪花图像，然后在updateParticle函数中定义粒子的移动行为和其他动态元素。

The images 图像

本教程中使用了以下三个图像。左边是雨粒子；中间的图像是雪粒子；右边的图像用于火效果。

The update function 更新函数

更新函数用于定义粒子的移动、排列和可视化。修改粒子的color颜色、imageSize图像大小和particleLife粒子生命周期。我们甚至可以基于到相机距离定义粒子（如下所述）、导入模型或到地球本身的距离来修改它们。

下面是我们针对雪的更新函数：

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


// snow
var snowGravityVector = new Cesium.Cartesian3();
var snowUpdate = function(particle, dt) {
 Cesium.Cartesian3.normalize(particle.position, snowGravityVector);
 Cesium.Cartesian3.multiplyByScalar(snowGravityVector,
 Cesium.Math.randomBetween(-30.0, -300.0),
 snowGravityVector);
 particle.velocity = Cesium.Cartesian3.add(particle.velocity, snowGravityVector, particle.velocity);

 var distance = Cesium.Cartesian3.distance(scene.camera.position, particle.position);
 if (distance > (snowRadius)) {
 particle.endColor.alpha = 0.0;
 } else {
 particle.endColor.alpha = snowSystem.endColor.alpha / (distance / snowRadius + 0.1);
 }
};

函数的第一部分使粒子像重力一样下落。更新函数还包含一个距离检查，以便粒子在远离相机时消失。

额外的天气效应

使用雾和大气效果来增强可视化效果，并匹配我们试图复制的天气类型。

hueshift沿着颜色光谱改变颜色，saturationShift改变了视觉实际需要的颜色与黑白的对比程度，brightnessShift改变了颜色的生动程度。

雾密度改变了地球上覆盖物与雾的颜色之间的不透明程度。雾的minimumBrightness用来使雾变暗。

1
2
3
4
5
6
7


// snow
scene.skyAtmosphere.hueShift = -0.8;
scene.skyAtmosphere.saturationShift = -0.7;
scene.skyAtmosphere.brightnessShift = -0.33;

scene.fog.density = 0.001;
scene.fog.minimumBrightness = 0.8;

The systems 系统

Snow 雪

雪花系统使用snowflake_particle图像，并使用minimumImageSize和maximumImageSize，在该范围内随机创建雪花。

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


var snowParticleSize = scene.drawingBufferWidth / 100.0;
var snowRadius = 100000.0;

var snowSystem = new Cesium.ParticleSystem({
 modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
 minimumSpeed : -1.0,
 maximumSpeed : 0.0,
 lifetime : 15.0,
 emitter : new Cesium.SphereEmitter(snowRadius),
 startScale : 0.5,
 endScale : 1.0,
 image : "../../SampleData/snowflake_particle.png",
 emissionRate : 7000.0,
 startColor : Cesium.Color.WHITE.withAlpha(0.0),
 endColor : Cesium.Color.WHITE.withAlpha(1.0),
 minimumImageSize : new Cartesian2(snowParticleSize, snowParticleSize),
 maximumImageSize : new Cartesian2(snowParticleSize * 2.0, snowParticleSize * 2.0),
 updateCallback : snowUpdate
});
scene.primitives.add(snowSystem);

Rain 雨

雨滴系统使用circular_particle.png用于雨滴。imageSize用于垂直拉伸图像，使雨水呈现细长的外观。

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


rainSystem = new Cesium.ParticleSystem({
 modelMatrix : new Cesium.Matrix4.fromTranslation(scene.camera.position),
 speed : -1.0,
 lifetime : 15.0,
 emitter : new Cesium.SphereEmitter(rainRadius),
 startScale : 1.0,
 endScale : 0.0,
 image : "../../SampleData/circular_particle.png",
 emissionRate : 9000.0,
 startColor :new Cesium.Color(0.27, 0.5, 0.70, 0.0),
 endColor : new Cesium.Color(0.27, 0.5, 0.70, 0.98),
 imageSize : new Cesium.Cartesian2(rainParticleSize, rainParticleSize * 2),
 updateCallback : rainUpdate
});
scene.primitives.add(rainSystem);

雨水更新函数略有不同，因为降雨比降雪快得多。

1
2
3
4
5
6
7


// rain
rainGravityScratch = Cesium.Cartesian3.normalize(particle.position, rainGravityScratch);
rainGravityScratch = Cesium.Cartesian3.multiplyByScalar(rainGravityScratch,
 -1050.0,
 rainGravityScratch);

particle.position = Cesium.Cartesian3.add(particle.position, rainGravityScratch, particle.position);

要使环境与场景的气氛匹配，请修改大气和雾以匹配雨水。下面的代码使一个深蓝色的天空被薄雾覆盖。

1
2
3
4
5
6
7


// rain
scene.skyAtmosphere.hueShift = -0.97;
scene.skyAtmosphere.saturationShift = 0.25;
scene.skyAtmosphere.brightnessShift = -0.4;

scene.fog.density = 0.00025;
scene.fog.minimumBrightness = 0.01;

获取额外的帮助，请访问Sandcastle example for both snow and rain

Comet and rocket tails 彗星和火箭尾部

Using multiple particle systems 使用多重粒子系统

要创建彗星和火箭尾部，我们需要多个粒子系统。该示例创建的粒子环上的每个位置都是完全独立的粒子系统。这使我们能够更均匀地控制系统的运动方向。可视化此效果的一个简单方法是将cometOptions.numberOfSystems限制为2，且cometOptions.colorOptions仅包括两种颜色，如下图所示。

为了简化不同的系统集合，创建数组来携带与彗星相关联的独立系统和与火箭例子相关联的独立系统。

1
2


var rocketSystems = [];
var cometSystems = [];

为对象创建两个不同的选项：一个用于彗星Comet版本，另一个用于火箭Rocket版本。这使得两个系统的初始系统数、偏移值等不同，看起来也不同。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


var cometOptions = {
 numberOfSystems : 100.0,
 iterationOffset : 0.003,
 cartographicStep : 0.0000001,
 baseRadius : 0.0005,

 colorOptions : [{
 red : 0.6,
 green : 0.6,
 blue : 0.6,
 alpha : 1.0
 }, {
 red : 0.6,
 green : 0.6,
 blue : 0.9,
 alpha : 0.9
 }, {
 red : 0.5,
 green : 0.5,
 blue : 0.7,
 alpha : 0.5
 }]
};

var rocketOptions = {
 numberOfSystems : 50.0,
 iterationOffset : 0.1,
 cartographicStep : 0.000001,
 baseRadius : 0.0005,

 colorOptions : [{
 minimumRed : 1.0,
 green : 0.5,
 minimumBlue : 0.05,
 alpha : 1.0
 }, {
 red : 0.9,
 minimumGreen : 0.6,
 minimumBlue : 0.01,
 alpha : 1.0
 }, {
 red : 0.8,
 green : 0.05,
 minimumBlue : 0.09,
 alpha : 1.0
 }, {
 minimumRed : 1,
 minimumGreen : 0.05,
 blue : 0.09,
 alpha : 1.0
 }]
};

colorOptions是用于随机视觉的颜色数组。每个系统从一个特定的颜色开始，而不是有一组颜色几何，这取决于当前正在创建的系统。在下面的示例中，i表示当前迭代轮数。

1

var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);

Setup 设置

使用下面的函数作为每个系统的初始化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


function createParticleSystems(options, systemsArray) {
 var length = options.numberOfSystems;
 for (var i = 0; i < length; ++i) {
 scratchAngleForOffset = Math.PI * 2.0 * i / options.numberOfSystems;
 scratchOffset.x += options.baseRadius * Math.cos(scratchAngleForOffset);
 scratchOffset.y += options.baseRadius * Math.sin(scratchAngleForOffset);

 var emitterModelMatrix = Cesium.Matrix4.fromTranslation(scratchOffset, matrix4Scratch);
 var color = Cesium.Color.fromRandom(options.colorOptions[i % options.colorOptions.length]);
 var force = forceFunction(options, i);

 var item = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : getImage(),
 startColor : color,
 endColor : color.withAlpha(0.0),
 particleLife : 3.5,
 speed : 0.00005,
 imageSize : new Cesium.Cartesian2(15.0, 15.0),
 emissionRate : 30.0,
 emitter : new Cesium.CircleEmitter(0.1),
 bursts : [ ],
 lifetime : 0.1,
 forces : force,
 modelMatrix : particlesModelMatrix,
 emitterModelMatrix : emitterModelMatrix
 }));
 systemsArray.push(item);
 }
}

由于两个尾部版本都相似，因此可以使用相同的createParticleSystems函数来创建其中一个。传入CometOptions或RocketOptions选项参数以创建不同的效果。

Create the particle image from scratch 从头开始创建粒子图像

不是从URL加载图像，getImage函数是使用HTML画布创建图像。这使得图像创建更加灵活。

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


var particleCanvas;
function getImage() {
 if (!Cesium.defined(particleCanvas)) {
 particleCanvas = document.createElement('canvas');
 particleCanvas.width = 20;
 particleCanvas.height = 20;
 var context2D = particleCanvas.getContext('2d');
 context2D.beginPath();
 context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
 context2D.closePath();
 context2D.fillStyle = 'rgb(255, 255, 255)';
 context2D.fill();
 }
 return particleCanvas;
}

The force function 强制函数

下面使我们的updateCallback函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


var scratchCartesian3 = new Cesium.Cartesian3();
var scratchCartographic = new Cesium.Cartographic();
var forceFunction = function(options, iteration) {
 var iterationOffset = iteration;
 var func = function(particle) {
 scratchCartesian3 = Cesium.Cartesian3.normalize(particle.position, new Cesium.Cartesian3());
 scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(scratchCartesian3, -1.0, scratchCartesian3);

 particle.position = Cesium.Cartesian3.add(particle.position, scratchCartesian3, particle.position);

 scratchCartographic = Cesium.Cartographic.fromCartesian(particle.position,
 Cesium.Ellipsoid.WGS84,
 scratchCartographic);

 var angle = Cesium.Math.PI * 2.0 * iterationOffset / options.numberOfSystems;
 iterationOffset += options.iterationOffset;
 scratchCartographic.longitude += Math.cos(angle) * options.cartographicStep;
 scratchCartographic.latitude += Math.sin(angle) * options.cartographicStep;

 particle.position = Cesium.Cartographic.toCartesian(scratchCartographic);
 };
 return func;
};

注意forceFunction正在返回函数。返回的func是实际的updateCallback函数。对于每次迭代，update函数根据angle和iterationOffset创建不同的旋转偏移量。较小的迭代偏移只会稍微调整角度，允许半径随着系统的继续稳步增大，如彗星示例所示。较大的迭代偏移将更快地改变角度；这将使更紧密、更不稳定的圆柱形输出，如火箭例子中所示。

本教程使用正弦和余弦函数进行循环效果。对于其他的效果，试着做一些形状，比如Lissajous curve，Gibbs phenomenon，或者square wave。

Relative position 相对位置

使用modelMatrix将粒子系统定位在平面后面的适当位置。因为这些系统是垂直的，所以我们需要使用particleOffset值进行轻微的偏移。如createParticleSystems函数所示，根据迭代，计算每个系统的emitterModelMatrix偏移量。

1
2
3
4
5
6
7
8


// positioning the plane
var planePosition = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 800.0);
var particlesOffset = new Cesium.Cartesian3(-8.950115473940969, 34.852766731753945, -30.235411095432937);

// creating the particles model matrix
var transl = Cesium.Matrix4.fromTranslation(particlesOffset, new Cesium.Matrix4());
var translPosition = Cesium.Matrix4.fromTranslation(planePosition, new Cesium.Matrix4());
var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(translPosition, transl, new Cesium.Matrix4());

Resources 资源

额外的帮助请访问Sandcastle example for both tails examples 更多示例代码：

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程8 – Introduction to Particle Systems 粒子系统入门

Sun, 02 Jun 2019 09:41:38 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

What is a particle system? 什么是粒子系统？

粒子系统是一种图形技术，可以模拟复杂的物理效果。粒子系统是小图像的集合，当它们一起观看时，会形成一个更复杂的“模糊”物体，如火、烟、天气或烟花fireworkds。通过使用诸如初始位置、速度和寿命等属性指定单个粒子的行为，可以控制这些复杂的效果。

粒子系统效应在电影和电子游戏中很常见。例如，为了表示飞机的损坏，技术艺术家可以使用粒子系统来表示飞机引擎上的爆炸，然后渲染不同的粒子系统，表示飞机坠毁时的烟雾轨迹。

Particle system basics 粒子系统基础

请看下面基础粒子系统的代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 imageSize : new Cesium.Cartesian2(20, 20),
 startScale : 1.0,
 endScale : 4.0,
 particleLife : 1.0,
 speed : 5.0,
 emitter : new Cesium.CircleEmitter(0.5),
 emissionRate : 5.0,
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

上面的代码创建了一个ParticleSystem，一个参数化的对象，用于控制单个粒子对象Particle随时间的外观和行为。粒子由粒子发射器产生，有一个位置和类型，存活一段时间，然后消亡。

其中一些属性是动态的。请注意，这里没有使用可用的单色属性scale，而是有一个startScale和endScale。这些允许您指定在粒子的寿命过程中，粒子大小在开始和结束比例之间的转换。startColor和endColor的工作原理相似。

影响视觉输出的其他方法包括最大和最小属性。对于具有最大和最小输入的每个变量，粒子上该变量的实际值将随机分配到最大和最小输入之间，并在粒子的整个生命周期内静态保持该值。例如，使用最小速度和最大速度作为每个粒子随机选择的速度的界限。允许像这样更改的属性包括imageSize、speed、life和particleLife。

Emitters 发射器

当粒子诞生时，其初始位置和速度矢量由ParticleEmitter控制。发射器将每秒生成一些粒子，由emissionRate参数指定，根据发射器类型用随机速度初始化。

Cesium有各种各样的粒子发射器，你可以开箱即用。

BoxEmitter 盒形发射器

BoxEmitter在一个盒子内随机取样的位置初始化粒子，并将它们从六个盒子表面中的一个引导出来。它接受Cartesian3参数，该参数指定框的宽度、高度和深度尺寸。

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.BoxEmitter(new Cesium.Cartesian3(5.0, 5.0, 5.0)),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

CircleEmitter 圆形发射器

CircleEmitter在发射器上轴线方向上的圆形内的随机采样位置初始化粒子。它接受一个指定圆半径的浮点参数。

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.CircleEmitter(5.0),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

如果发射器未指定，CircleEmitter将作为默认发射器。

ConeEmitter 锥形发射器

ConeEmitter在圆锥体的顶端初始化粒子，并以随机的角度引导它们离开圆锥体。它使用一个指定圆锥体角度的浮点参数。圆锥体沿发射器的上轴定向。

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(30.0)),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

SphereEmitter 球形发射器

SphereEmitter在球体内随机取样的位置初始化粒子，并将它们从球体中心向外引导。它使用一个指定球体半径的浮点参数。

1
2
3
4
5
6
7
8
9


var particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',
 color: Cesium.Color.MAGENTA,
 emissionRate: 5.0,
 emitter: new Cesium.SphereEmitter(5.0),
 imageSize : new Cesium.Cartesian2(25.0, 25.0),
 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4()),
 lifetime : 16.0
}));

Configuring particle systems 配置粒子系统

Particle emission rate 粒子发射率

emissionRate控制每秒发射多少粒子，这会改变系统中粒子的密度。指定一组突burst以在指定时间发射粒子burst（如上面的动画所示）。这会增加粒子系统的多样性或爆炸性。

将该属性添加到您的particleSystem

1
2
3
4
5


bursts : [
 new Cesium.ParticleBurst({time : 5.0, minimum : 300, maximum : 500}),
 new Cesium.ParticleBurst({time : 10.0, minimum : 50, maximum : 100}),
 new Cesium.ParticleBurst({time : 15.0, minimum : 200, maximum : 300})
]

在给定的时间，这些爆发将在最小和最大粒子之间发射。

Life of the particle and life of the system 粒子寿命和系统寿命

默认情况下，粒子系统将永远运行。要使粒子系统以设定的持续时间运行，请使用lifetime以秒为单位指定持续时间，并将loop设置为false。

1
2


lifetime : 16.0,
loop: false

将particleLife设置为5.0将使系统中的每个粒子都具有该particleLife值。要随机化每个粒子的输出，请使用变量minimumParticleLife和maximumArticleLife。

1
2


minimumParticleLife: 5.0,
maximumParticleLife: 10.0

Styling particles 样式化粒子

Color 颜色

粒子的样式是使用image和color指定的纹理，这些纹理可以在粒子的生命周期中更改以创建动态效果。下面的代码使烟雾粒子从绿色过渡到白色。

1
2


startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
endColor : Cesium.Color.WHITE.withAlpha(0.0),

Size 大小

粒子的大小由imageSize控制。要随机化大小，请使用minimumImageSize.x和maximumImageSize.x控制宽度（以像素为单位），并使用minimumImageSize.y和maximumImageSize.y控制高度（以像素为单位）。下列代码创建方形粒子在30到60像素之间：

1
2


minimumImageSize : new Cesium.Cartesian2(30.0, 30.0),
maximumImageSize : new Cesium.Cartesian2(60.0, 60.0)

粒子的大小可以通过startScale和endscale属性在其生命周期中进行调整，以使粒子随时间增长或收缩。

1
2


startScale: 1.0,
endScale: 4.0

Speed 速度

速度由speed或minimumSpeed和maximumSpeed控制。

1
2


minimumSpeed: 5.0,
maximumSpeed: 10.0

UpdateCallback 更新回调

通过应用更新函数，可以进一步自定义粒子系统。对于重力、风或颜色更改等效果，它充当每个粒子的手动更新程序。

项目系统有一个updateCallback，它在模拟过程中修改粒子的属性。此函数采用粒子和模拟时间步骤。大多数基于物理的效果将修改速度矢量以改变方向或速度。下面是一个让粒子对重力作出反应的例子：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var gravityVector = new Cesium.Cartesian3();
var gravity = -(9.8 * 9.8);
function applyGravity(p, dt) {
 // Compute a local up vector for each particle in geocentric space.
 var position = p.position;

 Cesium.Cartesian3.normalize(position, gravityVector);
 Cesium.Cartesian3.multiplyByScalar(gravityVector, gravity * dt, gravityVector);

 p.velocity = Cesium.Cartesian3.add(p.velocity, gravityVector, p.velocity);
}

该函数计算重力矢量，并使用重力加速度来改变粒子的速度。将重力设置为粒子系统的updateFunction：

1

updateCallback : applyGravity

Positioning 定位

使用两个Matrix4变换矩阵定位粒子系统：

modelMatrix：将粒子系统从模型转换为世界坐标。
emitterModelMatrix：在粒子系统的局部坐标系中变换粒子系统发射器。

您可以只使用这些转换矩阵中的一个，而将另一个保留为标识矩阵，但为了方便起见，我们提供了这两个矩阵。为了练习创建矩阵，让我们将粒子发射器相对于另一个实体定位。

为我们的粒子系统创建一个着重的实体。打开Hello World Sandcastle示例并添加以下代码以向viewer添加牛奶卡车模型：

1
2
3
4
5
6
7


var entity = viewer.entities.add({
 model : {
 uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb'
 },
 position : Cesium.Cartesian3.fromDegrees(-75.15787310614596, 39.97862668312678)
});
viewer.trackedEntity = entity;

我们想增加一个来自卡车后部的烟雾效果。创建一个模型矩阵，该模型矩阵将定位粒子系统并使其方向与牛奶卡车实体相同。

1

modelMatrix: entity.computeModelMatrix(time, new Cesium.Matrix4())

这将粒子系统放置在卡车的中心。为了把它放在卡车的后面，我们可以用平移来创建一个矩阵。

1
2
3
4
5
6
7


function computeEmitterModelMatrix() {
 hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr);
 trs.translation = Cesium.Cartesian3.fromElements(-4.0, 0.0, 1.4, translation);
 trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation);

 return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix);
}

现在，添加粒子系统：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({
 image : '../../SampleData/smoke.png',

 startColor : Cesium.Color.LIGHTSEAGREEN.withAlpha(0.7),
 endColor : Cesium.Color.WHITE.withAlpha(0.0),

 startScale : 1.0,
 endScale : 4.0,

 particleLife : 1.0,

 minimumSpeed : 1.0,
 maximumSpeed : 4.0

 imageSize : new Cesium.Cartesian2(25, 25),
 emissionRate : 5.0,
 lifetime : 16.0,

 modelMatrix : entity.computeModelMatrix(viewer.clock.startTime, new Cesium.Matrix4())
 emitterModelMatrix : computeEmitterModelMatrix()
}));

还要注意，我们可以随时间更新模型或发射器矩阵。例如，如果我们想要在卡车上设置发射器位置的动画，我们可以修改emitterModelMatrix，同时保持modelMatrix不变。

查看完整示例，请访问Particle System demo

Learn more 更多知识

有关使用更高级技术的粒子系统达到更酷效果，请参见粒子系统更多效果教程。

更多示例代码请参考：

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程7 – Geometry and Appearances 几何图形和外观

Sun, 02 Jun 2019 08:00:38 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

本教程将向您介绍提供使用Primitive API的几何图形和外观系统。这是一个高级主题，用于扩展具有自定义网格、形状、体积和外观的CesiumJS，而不是面向通用的Cesium用户。如果您有兴趣学习如何在地球上绘制各种形状和体积，请查看创建实体教程。 CesiumJS可以使用实体（如多边形和椭圆体）创建不同的几何类型。例如，将以下代码复制并粘贴到Hello World Sandcastle示例中，以在球体上创建具有点模式的矩形：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


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

viewer.entities.add({
 rectangle : {
 coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 material : new Cesium.StripeMaterialProperty({
 evenColor: Cesium.Color.WHITE,
 oddColor: Cesium.Color.BLUE,
 repeat: 5
 })
 }
});

在本教程中，我们将深入到遮光罩下，查看构成它们的几何图形和外观类型。几何图形定义了Primitive结构，即构成基本体的三角形、线或点。外观定义了Primitive的着色，包括其完整的GLSL顶点和面片着色，以及渲染状态。

使用几何图形和外观的好处是：

Performance(性能)：在绘制大量Primitive（如美国每个邮政编码的多边形）时，使用几何图形直接允许我们将它们组合成单个几何图形，以减少CPU开销并更好地利用GPU。组合Primitive是在Web worker上完成的，以保持UI的响应性。
Flexibility(灵活)：Primitive结合了几何图形和外观。通过分离它们，我们可以独立地修改每一个。我们可以添加与许多不同外观兼容的新几何图形，反之亦然。
Low-level access（低层级访问）：外观提供接近金属的渲染访问，无需担心直接使用Renderer的所有细节。外观使下列情况变得容易：
- 写所有GLSL的顶点和面片着色器
- 使用自定义渲染状态

当然也会有一些缺点：

直接使用几何图形和外观需要更多的代码和对图形更深入的理解。实体处于适合映射应用程序的抽象级别；几何图形和外观的抽象级别更接近于传统的3D引擎。
组合几何图形对静态数据有效，对动态数据不一定有效。

让我们使用几何图形和外观重写初始代码示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


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

// original code
//viewer.entities.add({
// rectangle : {
// coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
// material : new Cesium.StripeMaterialProperty({
// evenColor: Cesium.Color.WHITE,
// oddColor: Cesium.Color.BLUE,
// repeat: 5
// })
// }
//});

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instance,
 appearance : new Cesium.EllipsoidSurfaceAppearance({
 material : Cesium.Material.fromType('Stripe')
 })
}));

我们使用Primitive（Primitive）代替矩形实体，它结合了几何图形和外观。现在，我们将不区分Geometry和GemometryInstance。实例不仅是几何图形的实例，更是其的容器。

为了创建矩形的几何图形，即覆盖矩形区域的三角形和适合球体曲率的三角形，我们创建了一个RectangleGeometry。

因为它在表面上，所以我们可以使用EllipsoidSurfaceAppearance。这通过假设几何图形在曲面上或在椭球体上方的恒定高度来节省内存。

Geometry types 几何图形类型

CesiumJS提供下列几何图形：

组合几何图形

当我们使用一个Primitive绘制多个静态几何图形时，我们看到了性能优势。例如，在一个Primitive中绘制两个矩形。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


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

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

var anotherInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
 vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 })
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [instance, anotherInstance],
 appearance : new Cesium.EllipsoidSurfaceAppearance({
 material : Cesium.Material.fromType('Stripe')
 })
}));

我们用不同的矩形创建了另一个实例，然后将这两个实例提供给Primitive。这将以相同的外观绘制两个实例。

有些外观允许每个实例提供唯一的属性。例如，我们可以使用PerinstanceColorAppearance对每个实例使用不同的颜色进行着色。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


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

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8)
 }
});

var anotherInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : new Cesium.ColorGeometryInstanceAttribute(1.0, 0.0, 0.0, 0.8)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [instance, anotherInstance],
 appearance : new Cesium.PerInstanceColorAppearance()
}));

每个实例都有一个颜色属性。Primitive是用PerinstanceColorAppearance构造的，它使用每个实例的颜色属性来确定着色。

组合几何图形可以使CesiumJS有效地绘制许多几何图形。下面的示例绘制2592个颜色独特的矩形。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


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

var instances = [];

for (var lon = -180.0; lon < 180.0; lon += 5.0) {
 for (var lat = -85.0; lat < 85.0; lat += 5.0) {
 instances.push(new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat + 5.0),
 vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 0.5}))
 }
 }));
 }
}

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instances,
 appearance : new Cesium.PerInstanceColorAppearance()
}));

Picking 拾取

实例合并后可以独立访问。为实例分配一个ID，并使用它来确定是否使用Scene.Pick拾取该实例。

下面的示例创建一个带id的实例，并在单击该实例时将消息写入控制台。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


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

var instance = new Cesium.GeometryInstance({
 geometry : new Cesium.RectangleGeometry({
 rectangle : Cesium.Rectangle.fromDegrees(-100.0, 30.0, -90.0, 40.0),
 vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 id : 'my rectangle',
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : instance,
 appearance : new Cesium.PerInstanceColorAppearance()
}));

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
 var pick = scene.pick(movement.position);
 if (Cesium.defined(pick) && (pick.id === 'my rectangle')) {
 console.log('Mouse clicked rectangle.');
 }
 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

使用id避免了在内存中，在Primitive构造之后，对整个实例的引用，包括几何图形。

Geometry instances 几何实例

实例可用于在场景的不同部分定位、缩放和旋转相同的几何体。这是可能的，因为多个实例可以引用相同的Geometry，并且每个实例可以具有不同的modelMatrix。这允许我们只计算一次几何图形，并多次重复使用它。

以下示例创建一个EllipsoidGeometry和两个实例。每个实例引用相同的椭球几何体，但使用不同的modelMatrix放置它，导致一个椭球位于另一个椭球之上。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


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

var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
 radii : new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)
});

var cyanEllipsoidInstance = new Cesium.GeometryInstance({
 geometry : ellipsoidGeometry,
 modelMatrix : Cesium.Matrix4.multiplyByTranslation(
 Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
 new Cesium.Cartesian3(0.0, 0.0, 150000.0),
 new Cesium.Matrix4()
 ),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)
 }
});

var orangeEllipsoidInstance = new Cesium.GeometryInstance({
 geometry : ellipsoidGeometry,
 modelMatrix : Cesium.Matrix4.multiplyByTranslation(
 Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
 new Cesium.Cartesian3(0.0, 0.0, 450000.0),
 new Cesium.Matrix4()
 ),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
 }
});

scene.primitives.add(new Cesium.Primitive({
 geometryInstances : [cyanEllipsoidInstance, orangeEllipsoidInstance],
 appearance : new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
 })
}));

Updating per-instance attributes 更新实例属性

将几何图形添加到Primitive后，更新几何图形的每个实例属性以更改可视化效果。每个实例的属性包括：

Color: ColorGeometryInstanceAttribute决定了颜色实例。Primitive必须具有PerInstanceColorAppearance。
Show：boolean类型决定实例是否可见。所有实例都具有该属性。

下列展示了如何改变几何实例的颜色：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


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

var circleInstance = new Cesium.GeometryInstance({
 geometry : new Cesium.CircleGeometry({
 center : Cesium.Cartesian3.fromDegrees(-95.0, 43.0),
 radius : 250000.0,
 vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
 }),
 attributes : {
 color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
 },
 id: 'circle'
});
var primitive = new Cesium.Primitive({
 geometryInstances : circleInstance,
 appearance : new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
 })
});
scene.primitives.add(primitive);

setInterval(function() {
 var attributes = primitive.getGeometryInstanceAttributes('circle');
 attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({alpha : 1.0}));
},2000);

几何图形实例的属性可以被primitive使用primitive.getGeometryInstanceAttributes检索。attirbutes的属性可以直接被改变。

外观

几何定义结构。primitive的另一个关键属性，appearance，定义了primitive的纹理，即单个像素的颜色。primitive可以有多个几何实例，但只能有一个外观。根据外观的类型，外观将具有定义着色的主体的material。

CesiumJS具有下列外观：

外观定义了绘制Primitive时在GPU上执行的完整GLSL顶点和面片着色器。外观还定义了完整的渲染状态，它控制绘制primitvie时GPU的状态。我们可以直接定义渲染状态，也可以使用更高级的属性，如“闭合(closed)”和“半透明(translucent)”，外观将转换为渲染状态。例如：

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


// Perhaps for an opaque box that the viewer will not enter.
// - Backface culled and depth tested. No blending.

var appearance = new Cesium.PerInstanceColorAppearance({
 translucent : false,
 closed : true
});

// This appearance is the same as above
var anotherAppearance = new Cesium.PerInstanceColorAppearance({
 renderState : {
 depthTest : {
 enabled : true
 },
 cull : {
 enabled : true,
 face : Cesium.CullFace.BACK
 }
 }
});

创建外观后，不能更改其renderState属性，但可以更改其material。我们还可以更改primitive的appearnace属性。

大多数外观还具有flat和faceForward属性，这些属性间接控制GLSL着色器。

flat：平面阴影。不要考虑照明。
faceForward：照明时，翻转法线，使其始终面向观众。回避背面的黑色区域，例如墙的内侧。

Geometry and appearance compatibility 几何图形和外观兼容

并非所有外观都适用于所有几何图形。例如，EllipsoidSurfaceAppearance外观不适用于WallGeometry几何图形，因为墙不在球体的表面上。

要使外观与几何图形兼容，它们必须具有匹配的顶点格式，这意味着几何图形必须具有外观所期待的输入数据。创建几何图形时可以提供vertexFormat。

几何图形的vertexFormat确定它是否可以与其他几何图形组合。两个几何图形不必是相同的类型，但它们需要匹配的顶点格式。

为方便起见，外观要么具有vertexFormat属性，要么具有可作为几何体选项传入的VERTEX_FORMAT静态常量。

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


var geometry = new Ceisum.RectangleGeometry({
 vertexFormat : Ceisum.EllipsoidSurfaceAppearance.VERTEX_FORMAT
 // ...
});

var geometry2 = new Ceisum.RectangleGeometry({
 vertexFormat : Ceisum.PerInstanceColorAppearance.VERTEX_FORMAT
 // ...
});

var appearance = new Ceisum.MaterialAppearance(/* ... */);
var geometry3 = new Ceisum.RectangleGeometry({
 vertexFormat : appearance.vertexFormat
 // ...
});

Resources 资源

参考文档：

更多材料请访问：Fabric 更多未来计划，请访问：Geometry and Appearances Roadmap

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程6 – 3D Models 三维模型

Thu, 23 May 2019 13:08:49 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

本教程将教您如何通过Primitive API转换、加载和使用Cesium中的三维模型。如果你是Cesium的新用户，可能需要阅读三维模型部分的(空间数据可视化教程)[https://cesium.com/docs/tutorials/creating-entities#3d-models],本系列教程中叫：”空间数据可视化“。

Cesium支持3D模型，包括关键帧动画、skinning(贴皮？)和独立节点选取，使用glTF，这是由Khronos Group（WebGL和COLLADA背后的联合体）为网络上的3D模型开发的一种新兴行业标准格式。Cesium还提供了一个基于网络的工具，将COLLADA模型转换为glTF，以便与Cesium一起优化使用。

快速入门

Cesium包括一些现成的二进制gLTF模型：

一个带有动画螺旋桨的飞机
带有动画车轮的地面车辆
带有皮肤周期行走的角色
热气球
一辆牛奶车（还包括Draco-compressed格式的牛奶车）

这些模型在Apps/SampleData/models中都有自己的目录。大多数将包括原始COLLADA文件（.dae）、glTF文件（.gltf）和/或二进制glTF文件（.glb）。在Cesium应用程序中不需要使用原始的COLLADA文件。

让我们编写代码来加载这些模型。打开Sandcastle的Hello World示例。在第4行var viewer=…下，添加一个scene变量。

1

var scene = viewer.scene;

接下来，通过添加以下代码，使用glTF中的cesium.model加载地面车辆模型。

1
2
3
4
5
6
7


var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
 Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
 url : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',
 modelMatrix : modelMatrix,
 scale : 200.0
}));

单击F8，然后使用右上角的geocoder工具缩放到Enxon，PA。

我们现在直视地面车辆。我们可以用鼠标右键拖动放大，用鼠标中键拖动倾斜视图。

cesium.Model.fromGltf异步加载glTF模型，包括任何外部文件，并在完全加载后渲染该模型一次，从而解析readyPromise。只需要.gltf文件的URL，在本例中为*../../../Apps/SampleData/models/GroundVehicle/Groundvehicle.glb*。

scale作为可选参数提供给fromGltf用于放大模型。许多真实大小的模型也可以变小。所以使用一个较大的scale数值来第一次测试模型是有益的，比如200000.0，示例如下：

modelMatrix也提供给从fromGltf定位和旋转模型。这将为模型创建局部坐标系。这里，Cesium.Transforms.eastnorthupfixedframe用于创建一个本地的东北向上坐标系，其原点为经度*-75.62898254394531度，纬度40.02804946899414*度。可以随时更改模型的modelMatrix属性以移动模型。

要可视化坐标系，请使用Cesium Inspector，在第4行*var viewer=…*下的任意位置添加以下代码:

1

viewer.extend(Cesium.viewerCesiumInspectorMixin);

单击F8，inspector界面将出现在左上方。展开Primitives，点击Pick a Primitive，点击地面上的车辆模型，然后确认show reference frame。

此处： x轴（东）是红色的，y轴（北）是绿色的，以及z（向上）是蓝色的。

我们可以使用相同的代码来加载飞机或角色模型，只需更改URL传递给fromGltf的为“../../../../Apps/Sampledata/models/cesiumAir/Cesium-Air.glb”或“../../../Apps/SampleData/models/Cesium Man/Cesium-Man.glb”。有关其所有选项，请参阅**Cesium.Model.fromGltf的参考文档。

动画

这些模型中的每一个模型都有内置的动画，这些动画是由一个艺术家（比如，一个艺术家通过定义几个关键姿势创建了一个动画），Cesium在运行时进行插值以创建平滑的动画。

要播放动画，请在调用Cesium.Model.fromGltf后添加以下代码。

1
2
3
4
5


Cesium.when(model.readyPromise).then(function(model) {
 model.activeAnimations.addAll({
 loop : Cesium.ModelAnimationLoop.REPEAT
 });
});

由于动画存储在glTF模型中，因此我们需要等待readyPromise解决后再访问它们。addAll用于播放模型中的所有动画。Cesium.ModelAnimationLoop.REPEAT循环动画，直到将其从activeAnimations集合中移除。要播放特定的动画，请改用add，并提供动画的id（glTF JSON属性名）。

除循环选项之外，addAll和add还提供了许多选项来控制动画的开始和停止时间、速度和方向。例如，下面的动画以半速（相对于Cesium clock）和反向运转。

1
2
3
4
5


model.activeAnimations.addAll({
 loop : Cesium.ModelAnimationLoop.REPEAT,
 speedup : 0.5,
 reverse : true
});

add返回ModelAnimation对象（addAll返回这些对象的数组），其中包含动画开始、停止和更新每个帧时的事件。例如，这允许，相对于另一个动画启动一个动画。请前往API文档查看开始start、停止stop和更新update事件。

动画与Cesium clock同步，因此要查看它们，请按播放小部件上的播放。可以使用时间线和播放小部件来增加、减少和反转动画的速度。

要将应用程序配置为自动播放动画，请初始化如下查看器：

1
2
3


var viewer = new Cesium.Viewer('cesiumContainer', {
 shouldAnimate : true
});

Picking 拾取

与所有Cesium primitives一样，如果选择了模型，Scene.Pick将返回一个模型作为其结果的一部分。此外，还返回了glTF节点和glTF网格的id（JSON属性名），从而可以精确地拾取不同的模型部件。以下示例在控制台窗口中的鼠标光标下显示节点和网格名称。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(
 function (movement) {
 var pick = scene.pick(movement.endPosition);
 if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
 console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name);
 }
 },
 Cesium.ScreenSpaceEventType.MOUSE_MOVE
);

转换COLLADA为glTF

为了完全转换COLLDA模型到glTF格式供Cesium使用，可以使用web-based COLLADA-to-glTF转换器。该工具能够将*.dae文件和图像文件转换为嵌入图像的.gltf*文件。

Troubleshooting 故障排除

如果在Cesium中加载3D模型时出现问题，请首先确定问题所在。问题可能出现在：

模型工具的导出器，比如：Maya，Modo，ShetchUp等等
COLLADA-to-glTF转换工具
Cesium glTF渲染器

Mac下的故障排除

在Mac上，要确定是否正确导出了COLLADA文件，请双击*.dae*文件，该文件应显示在预览窗口中。如果模型有动画，鼠标悬停在窗口底部会弹出一个工具栏来播放它们。

如果collada文件无效，预览将显示错误。这通常表示COLLADA导出器中存在用于创建collada文件的错误。

要解决此问题，请安装xcode，然后右键单击*.dae文件并选择Open With“打开方式”*->xcode。

Xcode显示的模型类似于预览，但具有更多的功能，如选择单个节点的能力。Xcode还为无效的COLLADA文件实现了许多解决方法，因此它通常可以加载和预览无法加载的collada文件。如果模型在Xcode中加载，请选择“文件-保存”以将模型与解决方法一起保存，然后应在“预览确定”中加载。

如果在预览中仍然没有加载，那么COLLADA导出器有问题。确保您拥有最新版本的建模工具，并尝试本文中的提示。如果仍然不起作用，请向建模工具（而不是Cesium）提交一个bug。也值得尝试导出为*.fbx*或其他格式，然后导入到另一个具有更好的COLLADA导出器的建模工具中。

Windows下的故障排除

在Windows下，Visual Studio2013 包括免费的社区版的模型编辑器，可以加载COLLADA模型。为了确定COLLADA文件是否被正确导出，将*.dae*文件拖拽近Visual Studio然后它被加载。如果没有加载，这通常意味着COLLADA导出器存在bug。确保您拥有最新版本的建模工具，并尝试本文中的提示。如果仍然不起作用，请向建模工具（而不是Cesium）提交一个bug。它也值得尝试导出为.fbx或其他格式，然后导入到另一个具有更好的COLLADA导出器的建模工具中。

如果没有Visual Studio，则Autodesk有一个允许拖放的WebGL查看器，并且不需要登录。查看器不支持动画。如果模型中有图像，请上传包含.dae和图像文件的zip包。

Cesium中的故障排除

一旦我们有了一个有效的COLLADA文件，就通过COLLADA-to-glTF转换器运行它，然后尝试将其加载到Cesium中。如果没有加载到Cesium中或显示不正确，则转换器或Cesium中存在错误。要获取更多详细信息，请打开浏览器的开发人员工具（chrome中的ctrl-shift-i）并启用ause on all exceptions（chrome中的Sources选项卡），然后重新加载Cesium应用程序。

向Cesium论坛发一条信息，我们通常可以提供一个解决方案，直到有修复方案。在您的帖子中，请包括：

原始的COLLADA和转换的glTF文件。我们认识到并不是每个人都可以分享他们的模型，但是如果可以的话，它会极大地提高我们的帮助能力。
浏览器的控制台窗口以及加载模型时引发的任何异常，例如

资源

查看Sandcastle中的3D模型示例以及Model和ModelAnimationCollection的参考文档。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程5 – Terrain 地形

Wed, 22 May 2019 09:33:44 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

CesiumJS支持对与水流相关的海洋、湖泊和河流以及全球高分辨率地形进行流式处理和可视化。查看山峰、山谷和其他地形特征，并拥抱三维数字地球。使用Cesium ion流式化您自己的切片地形数据或高分辨率管理地形，如Cesium World Terrain。

Quick Start 快速入门

打开Sandcastle的Hello World示例。默认情况下，地球球体是WGS84 ellipsoid。通过将_terrainProvider_选项传递给_Viewer_，指定不同的地形提供器。让我们使用Cesium世界地形：

1
2
3
4


Cesium.Ion.defaultAccessToken = 'your_access_token';
var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain()
});

NOTE: 创建Cesium账号 NOTE: 本教程使用Cesium ion提供的地形。创建一个帐户以获取访问令牌(access token)，以便在本教程中使用地形。在这里注册，上面的示例代码将自动更新为您的令牌。如果您已经有帐户，请登录。

修改示例后，按F8运行该示例。缩放到山区，按住鼠标中键并拖动以倾斜到地平线视图。下图珠穆朗玛峰的样子：

随着我们的缩放越来越近，CesiumJS基于地球上哪些部分可见以及它们离得有多远来获得更高分辨率的地形。

地形和图像分别处理，任何图像提供者都可以与任何地形提供者一起使用。请参见Imagery Layers Tutorial以管理图像。

启用地形照明和水体效果

Cesium世界地形还包括地形照明数据和水体效果所需的海岸线数据。默认情况下，此数据不会随地形图块一起发送。若要启用地形照明，请将_requestVertexNormals_设为_true_并开启全球光照。

1
2
3
4
5
6


var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain({
 requestVertexNormals: true
 })
});
viewer.scene.globe.enableLighting = true;

下图是基于太阳位置开启地形照明的珠穆朗玛峰的同一个视图。

使用_requestWaterMask_以类似的方式启用水体效果：

1
2
3
4
5


var viewer = new Cesium.Viewer('cesiumContainer', {
 terrainProvider : Cesium.createWorldTerrain({
 requestWaterMask: true
 })
});

缩放到有水的区域以查看效果。这里是旧金山湾：

随着时间的推移，水波波动和明亮的镜面反射太阳和月亮的光。通过使用** Globe.oceanNormalMapUrl**用于创建波浪来自定义水效果。更改图像提供者也会影响水的外观，因为水的颜色与底层图像混合。改变图层提供器也会改变水体效果的呈现，因为水体的颜色会和底下的图层混合渲染。

请参阅Sandcastle的地形示例，探索一些有趣的地形和水体效果区域。

准备流式化地形

Cesium World Terrain: 高分辨世界地形，同时扩展支持地形照明和水体效果。Cesium Worl Terrain支持通过Cesium ion在线访问，也支持付费下载，离线访问。将它加入到Cesium应用中，将快速提高地形可视化效果。 Cesium World Terrain也可以通过on-premise获得。

Terrain providers 地形提供器

Cesium基于地形提供器支持请求地形的若干种方法。大多数地形提供器使用HTTP上的REST接口来请求地形切片。地形提供器根据请求的格式和地形数据的组织方式而有所不同。CesiumJS支持以下地形提供器：

CesiumTerrainProvider: 支持量化网格地形切片，针对地形流进行了优化。兼容Cesium ion所服务的地形和来自[3D tiling pipeline])(/3d-tiling-pipeline/terrain/)的输出数据。
GoogleEarthEnterpriseTerrainProvider: 支持由您的Google Earth Enterprise服务器生成的高程地图地形。
VRTheWorldTerrainProvider: 支持从VT MAK VR-TheWorld Server服务器请求的高度地图地形图。
EllipsoidTerrainProvider:按照程序创建椭球的表面。缺乏地形的真实外观，但不从服务器请求数据。

地形提供器的构造与图层提供器类似，如果服务器不支持跨域资源共享CORS，则通常包括地形服务器的URL和可选的代理。

资源

查看Sandcastle中的地形示例和所有地形提供器的参考文档。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程4 – 空间数据可视化（二）

Wed, 22 May 2019 02:15:02 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Viewer中的Entity功能

让我们看看_Viewer_为操作entities提供出来的功能函数。

选中和描述

点击Viewer中的entity将在entity的位置上呈现SelectionIndicator控件，提供一个InfoBox用于呈现更多的信息。我们可以设置_name_，来定义_InfoBox_的标题。我们也以HTML样式来提供_Entity.description_的属性。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


wyoming.name = 'wyoming';
wyoming.description = '\
<img\
 width="50%"\
 style="float:left; margin: 0 1em 1em 0;"\
 src="//cesium.com/docs/tutorials/creating-entities/Flag_of_Wyoming.svg"/>\
<p>\
 Wyoming is a state in the mountain region of the Western \
 United States.\
</p>\
<p>\
 Wyoming is the 10th most extensive, but the least populous \
 and the second least densely populated of the 50 United \
 States. The western two thirds of the state is covered mostly \
 with the mountain ranges and rangelands in the foothills of \
 the eastern Rocky Mountains, while the eastern third of the \
 state is high elevation prairie known as the High Plains. \
 Cheyenne is the capital and the most populous city in Wyoming, \
 with a population estimate of 63,624 in 2017.\
</p>\
<p>\
 Source: \
 <a style="color: WHITE"\
 target="_blank"\
 href="http://en.wikipedia.org/wiki/Wyoming">Wikipedia</a>\
</p>';

_InfoBox_中展示的所有HTML是沙盒式的。这组织了外部数据源带有恶意的注入到Cesium的应用程序中。为了在描述中运行JavaScript或浏览器插件，访问沙盒中的iframe通过_viewer.infoBox.frame_属性。参考该文可以获得更多的信息用于控制iframe中的沙盒。

Camera控制

使用_iewer.zoomto_命令查看特定Entity。还有一个viewer.flyto方法，用于对Entity执行动画Camera飞行。这两种方法都可以传递给_Entity_、EntityCollection、DataSource或实体数组。

任何一种方法都会计算所有提供的实体的视图。默认情况下，Camera朝向北方，并从45度角向下看。通过传入_HeadingPitchrange_自定义此项。

1
2
3


var heading = Cesium.Math.toRadians(90);
var pitch = Cesium.Math.toRadians(-30);
viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));

zoomTo_和_flyTo_都是异步函数；也就是说，它们不能保证在返回之前完成。例如，飞行到Entity会在许多动画帧后发生。这两个功能都返回Promises，可用于计划飞行或缩放完成后要执行的功能。用下面的代码片段替换示例中的_zoomTo。这架飞机飞往怀俄明州，并在飞行结束后选中它。

1
2
3
4
5


viewer.flyTo(wyoming).then(function(result){
 if (result) {
 viewer.selectedEntity = wyoming;
 }
});

如果航班飞行成功完成，则传递给回调函数的结果参数将为_true_；如果航班被取消，则结果参数将为_false_，即，在此航班完成之前，用户启动了另一个航班或缩放；或者，由于目标没有相应的可视化效果，即没有可缩放的对象。

有时，特别是在处理时间动态数据时，我们希望Camera聚焦跟随一个entity而不是地球的中心。可以通过设置viewer.trackedEntity完成。跟踪实体需要设置position。

1
2


wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
viewer.trackedEntity = wyoming;

停止跟踪需要设置viewer.trackedEntity为undefined或远离entity双击屏幕即可。调用zoomTo或flyTo也可以取消跟踪。

管理Entities

EntityCollection是用于管理和监视一组实体的关联数组。viewer.entities_是_EntityCollection。_EntityCollection_包括用于管理实体的方法，如add、remove和removeAll。

有时我们需要更新我们以前创建的实体。所有实体实例都有一个唯一的id，可用于从集合中检索实体。我们可以为实体指定一个ID，否则将自动生成一个ID。

1
2
3


viewer.entities.add({
 id : 'uniqueId'
});

使用getByiId检索实体。如果不存在具有提供的ID的实体，则返回_undefined_。

1

var entity = viewer.entities.getById('uniqueId');

要获取实体或创建新实体（如果不存在），请使用getOrCreateEntity。

1

var entity = viewer.entities.getOrCreateEntity('uniqueId');

手动创建新实体，然后使用_add_将其添加到集合中。如果集合中已存在具有相_id_的实体，则此方法将抛出异常。

1
2
3
4


var entity = new Entity({
 id: 'uniqueId'
});
viewer.entities.add(entity);

_EntityCollection_的功能使用CollectionChanged事件发光。当在集合中添加、删除或更新实体时，会通知监听器。

使用Sandcastle中的[Geometry Showcase] (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Geometry and Appearances.html&label=Showcases) 示例。在创建viewer的行后粘贴以下代码。

1
2
3
4
5
6
7
8


function onChanged(collection, added, removed, changed){
 var msg = 'Added ids';
 for(var i = 0; i < added.length; i++) {
 msg += '\n' + added[i].id;
 }
 console.log(msg);
}
viewer.entities.collectionChanged.addEventListener(onChanged);

运行该示例时，您应该在控制台中看到大约65条消息，每次调用_viewer.entities.add_时都会看到一条消息。

当一次更新大量的实体时，将队列更新结束后并在最后发送一个整体事件，这样更具性能。这样Cesium可以在一次通过中处理所需的变化。在示例末尾，在_viewer.entities.add_之前调用viewer.entities.suspendEvents，并调用viewer.entities.resumeEvents。当再次运行演示时，我们现在得到包含所有65个实体的单一事件。这些调用是引用计数的，因此可以嵌套多个挂起和恢复调用。

Picking 拾取

选择（单击选择一个对象）是我们需要与基本API进行短暂交互的领域之一。使用scene.pick和scene.drillpick检索实体。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


/**
 * Returns the top-most entity at the provided window coordinates
 * or undefined if no entity is at that location.
 *
 * @param {Cartesian2} windowPosition The window coordinates.
 * @returns {Entity} The picked entity or undefined.
 */
function pickEntity(viewer, windowPosition) {
 var picked = viewer.scene.pick(windowPosition);
 if (defined(picked)) {
 var id = Cesium.defaultValue(picked.id, picked.primitive.id);
 if (id instanceof Cesium.Entity) {
 return id;
 }
 }
 return undefined;
};

/**
 * Returns the list of entities at the provided window coordinates.
 * The entities are sorted front to back by their visual order.
 *
 * @param {Cartesian2} windowPosition The window coordinates.
 * @returns {Entity[]} The picked entities or undefined.
 */
function drillPickEntities(viewer, windowPosition) {
 var i;
 var entity;
 var picked;
 var pickedPrimitives = viewer.scene.drillPick(windowPosition);
 var length = pickedPrimitives.length;
 var result = [];
 var hash = {};

 for (i = 0; i < length; i++) {
 picked = pickedPrimitives[i];
 entity = Cesium.defaultValue(picked.id, picked.primitive.id);
 if (entity instanceof Cesium.Entity && !Cesium.defined(hash[entity.id])) {
 result.push(entity);
 hash[entity.id] = true;
 }
 }
 return result;
};

Points, billboards, and labels（点、广告牌和标签）

通过设置_position_、point和label来创建图形点或标签。例如，在我们最喜欢的运动队的主体育场放置一个点。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


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

var citizensBankPark = viewer.entities.add({
 name : 'Citizens Bank Park',
 position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
 point : {
 pixelSize : 5,
 color : Cesium.Color.RED,
 outlineColor : Cesium.Color.WHITE,
 outlineWidth : 2
 },
 label : {
 text : 'Citizens Bank Park',
 font : '14pt monospace',
 style: Cesium.LabelStyle.FILL_AND_OUTLINE,
 outlineWidth : 2,
 verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
 pixelOffset : new Cesium.Cartesian2(0, -9)
 }
});

viewer.zoomTo(viewer.entities);

默认情况下，标签水平和垂直居中。由于标签和点共享相同的位置，它们在屏幕上重叠。为避免这种情况，请指定标签源_Verticalorigin.BOTTOM_并将像素偏移量设置为（0，-9）。将该点替换为一个billboard，它是一个始终面向用户的标记。

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


var citizensBankPark = viewer.entities.add({
 position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
 billboard : {
 image : '//cesiumjs.org/tutorials/Visualizing-Spatial-Data/images/Philadelphia_Phillies.png',
 width : 64,
 height : 64
 },
 label : {
 text : 'Citizens Bank Park',
 font : '14pt monospace',
 style: Cesium.LabelStyle.FILL_AND_OUTLINE,
 outlineWidth : 2,
 verticalOrigin : Cesium.VerticalOrigin.TOP,
 pixelOffset : new Cesium.Cartesian2(0, 32)
 }
});

有关更多自定义选项，请参见Sandcastle标签和广告牌示例。

3D models （三维模型）

CesiumJS支持通过glTF（运行时asset format）创建3D模型。您可以在3D modelsSandcastle中找到示例模型。

将位置和URI设置为glTF 模型以创建模型实体。

1
2
3
4
5
6
7
8


var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
 position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
 model : {
 uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
 }
});
viewer.trackedEntity = entity;

默认情况下，模型是垂直的，面向东。通过为Entity.Orientation属性指定Quaternion来控制模型的方向。这将控制模型的heading、pitch和roll。

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


var viewer = new Cesium.Viewer('cesiumContainer');
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var heading = Cesium.Math.toRadians(45.0);
var pitch = Cesium.Math.toRadians(15.0);
var roll = Cesium.Math.toRadians(0.0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, pitch, roll));

var entity = viewer.entities.add({
 position : position,
 orientation : orientation,
 model : {
 uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
 }
});
viewer.trackedEntity = entity;

有关更高级的模型功能，请参见3D模型教程。如果你创建自己的模型，一定要看到我们关于glTF Tips for Artists提示的帖子。

The property system（属性系统）

我们为实体定义的所有值都存储为_property_对象。例如，请参见怀俄明州大纲的值：

1

console.log(typeof wyoming.polygon.outline);

outline_是ConstantProperty的一个实例。本教程使用一种称为隐式属性转换（implicit property conversion）的速记形式，它自动获取原始值并在引擎盖下创建相应的_Property。如果没有这个速记，我们将不得不编写一个更长版本的初始示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var wyoming = new Cesium.Entity();
wyoming.name = 'Wyoming';

var polygon = new Cesium.PolygonGraphics();
polygon.material = new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.5));
polygon.outline = new Cesium.ConstantProperty(true);
polygon.outlineColor = new Cesium.ConstantProperty(Cesium.Color.BLACK);
wyoming.polygon = polygon;

viewer.entities.add(wyoming);

之所以使用属性，是因为实体API不仅能够表示常量值，而且能够表示随时间变化的值。请参阅Callback Property和InterpolationSandcastle示例，了解一些时间动态属性。

资源

有关如何使用_GeoJSON_和_CZML_设置样式和创建实体的示例，请参阅Cesium Workshop Tutorial。

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程3 – Camera – 相机（摄像机）

Mon, 20 May 2019 15:43:53 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Camera

CesiumJS中的Camera控制场景的视图。有很多方法可以操作Camera，如旋转(rotate)、缩放(zoom)、平移(pan)和飞到目的地(flyTo)。CesiumJS有鼠标和触摸事件用来处理与Camrea的交互，还有API来以编程方式操作摄像机。了解如何使用Camera API和自定义相机控制(Camera controls)。

默认Camera行为

打开Sandcastle中的Hello World样例用来体验默认的相机控制。默认操作方式如下：

英文版

鼠标操作	3D	2D	Columbus视角
Left click + drag	Rotate around the globe	Translate over the map	Translate over the map
Right click + drag	Zoom in and out	Zoom in and out	Zoom in and out
Middle wheel scrolling	Zoom in and out	Zoom in and out	Zoom in and out
Middle click + drag	Tilt the globe	No action	Tilt the map

中文版

鼠标操作	3D	2D	Columbus视角
左键 + 拖拽	旋转地球	在地图上移动	在地图上移动
右键 + 拖拽	缩放	缩放	缩放
中键滚轮	缩放	缩放	缩放
中键 + 拖拽	倾斜地球	无操作	倾斜地球

使用_setView_函数设置Camera的位置和方向。destination可以是_Cartesian3_或_Rectangle_，orientation可以是_heading/pitch/roll_或_direction/up_。航向角、俯仰角和横滚角以弧度定义。航向角是从正角度向东增加的局部北向旋转。俯仰角是指从局部的东北平面开始的旋转。正俯仰角在平面上方。负俯仰角在平面以下。很滚叫是围绕局部东轴应用的第一个旋转。

1
2
3
4
5
6
7
8


camera.setView({
 destination: new Cesium.Cartesian3(x, y, z),
 orientation: {
 heading: headingAngle,
 pitch: pitchAngle,
 roll: rollAngle
 }
});

1
2
3
4
5
6
7
8


viewer.camera.setView({
 destination: Cesium.Rectangle.fromDegrees(west, south, east, north),
 orientation: {
 heading: headingAngle,
 pitch: pitchAngle,
 roll: rollAngle
 }
});

上述的所有参数都是可选的。如果未指定，参数值将被设为默认值用户当前Camera的位置和方向。

自定义Camera鼠标或者键盘事件

创建我们自己的事件控制，根据鼠标的朝向用于控制Camera的朝向，键盘的按键控制Camera向前、向左、向右、向上，以及向下。首先从禁用默认事件操作开始。在（`javascript var viewe=…`）之后添加下列代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
 canvas.focus();
};
var ellipsoid = viewer.scene.globe.ellipsoid;

// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;

创建变量记录当前鼠标位置，然后标记并跟随Camera移动轨迹：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var startMousePosition;
var mousePosition;
var flags = {
 looking: false,
 moveForward: false,
 moveBackward: false,
 moveUp: false,
 moveDown: false,
 moveLeft: false,
 moveRight: false
};

添加一个事件控制用户设置标记，当鼠标左键被点击的时候，用于记录当前鼠标的位置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var handler = new Cesium.ScreenSpaceEventHandler(canvas);

handler.setInputAction(function(movement) {
 flags.looking = true;
 mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {
 mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(position) {
 flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

创建键盘事件控制用户切换Camera移动标记。我们为下列按键和行为设置了标记：

w Camera向前。
s Camera向后。
a Camera向左。
d Camera向右。
q Camera向上。
e Camera向下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


function getFlagForKeyCode(keyCode) {
 switch (keyCode) {
 case 'W'.charCodeAt(0):
 return 'moveForward';
 case 'S'.charCodeAt(0):
 return 'moveBackward';
 case 'Q'.charCodeAt(0):
 return 'moveUp';
 case 'E'.charCodeAt(0):
 return 'moveDown';
 case 'D'.charCodeAt(0):
 return 'moveRight';
 case 'A'.charCodeAt(0):
 return 'moveLeft';
 default:
 return undefined;
 }
}

document.addEventListener('keydown', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = true;
 }
}, false);

document.addEventListener('keyup', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = false;
 }
}, false);

现在当标记表明事件发生为true是，我们更新（update）camera。我们新增**_onTick_的监听事件在clock中：

1
2
3


viewer.clock.onTick.addEventListener(function(clock) {
 var camera = viewer.camera;
});

接下来，我们让Camera指向鼠标指向的方向。在变量声明之后添加下列代码到事件监听函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


if (flags.looking) {
 var width = canvas.clientWidth;
 var height = canvas.clientHeight;

 // Coordinate (0.0, 0.0) will be where the mouse was clicked.
 var x = (mousePosition.x - startMousePosition.x) / width;
 var y = -(mousePosition.y - startMousePosition.y) / height;

 var lookFactor = 0.05;
 camera.lookRight(x * lookFactor);
 camera.lookUp(y * lookFactor);
}

lookRight和lookUp只需要一个角度参数用于表示旋转的角度。我们将鼠标坐标转换为范围（-1.0，1.0），坐标（0.0，0.0）位于画布的中心。鼠标距中心的距离决定了旋转的速度。靠近中心的位置移动Camera的速度较慢，而远离中心的位置移动Camera的速度较快。

最后，添加代码用于移动Camera的位置。然后添加下列代码到事件响应函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// Change movement speed based on the distance of the camera to the surface of the ellipsoid.
var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
var moveRate = cameraHeight / 100.0;

if (flags.moveForward) {
 camera.moveForward(moveRate);
}
if (flags.moveBackward) {
 camera.moveBackward(moveRate);
}
if (flags.moveUp) {
 camera.moveUp(moveRate);
}
if (flags.moveDown) {
 camera.moveDown(moveRate);
}
if (flags.moveLeft) {
 camera.moveLeft(moveRate);
}
if (flags.moveRight) {
 camera.moveRight(moveRate);
}

moveForward、moveBackward、moveUp、moveDown、_moveLeft_和_moveRight_方法只需要一个距离参数（米）用于移动Camera的距离。当每一个按键被按下时，Camera就会在球体表面移动固定的距离。Camera离地面越近，移动的速度就越慢。

完整的代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116


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

var scene = viewer.scene;
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas
canvas.onclick = function() {
 canvas.focus();
};
var ellipsoid = viewer.scene.globe.ellipsoid;

// disable the default event handlers
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;

var startMousePosition;
var mousePosition;
var flags = {
 looking : false,
 moveForward : false,
 moveBackward : false,
 moveUp : false,
 moveDown : false,
 moveLeft : false,
 moveRight : false
};

var handler = new Cesium.ScreenSpaceEventHandler(canvas);

handler.setInputAction(function(movement) {
 flags.looking = true;
 mousePosition = startMousePosition = Cesium.Cartesian3.clone(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function(movement) {
 mousePosition = movement.endPosition;
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(position) {
 flags.looking = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

function getFlagForKeyCode(keyCode) {
 switch (keyCode) {
 case 'W'.charCodeAt(0):
 return 'moveForward';
 case 'S'.charCodeAt(0):
 return 'moveBackward';
 case 'Q'.charCodeAt(0):
 return 'moveUp';
 case 'E'.charCodeAt(0):
 return 'moveDown';
 case 'D'.charCodeAt(0):
 return 'moveRight';
 case 'A'.charCodeAt(0):
 return 'moveLeft';
 default:
 return undefined;
 }
}

document.addEventListener('keydown', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = true;
 }
}, false);

document.addEventListener('keyup', function(e) {
 var flagName = getFlagForKeyCode(e.keyCode);
 if (typeof flagName !== 'undefined') {
 flags[flagName] = false;
 }
}, false);

viewer.clock.onTick.addEventListener(function(clock) {
 var camera = viewer.camera;

 if (flags.looking) {
 var width = canvas.clientWidth;
 var height = canvas.clientHeight;

 // Coordinate (0.0, 0.0) will be where the mouse was clicked.
 var x = (mousePosition.x - startMousePosition.x) / width;
 var y = -(mousePosition.y - startMousePosition.y) / height;

 var lookFactor = 0.05;
 camera.lookRight(x * lookFactor);
 camera.lookUp(y * lookFactor);
 }

 // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
 var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
 var moveRate = cameraHeight / 100.0;

 if (flags.moveForward) {
 camera.moveForward(moveRate);
 }
 if (flags.moveBackward) {
 camera.moveBackward(moveRate);
 }
 if (flags.moveUp) {
 camera.moveUp(moveRate);
 }
 if (flags.moveDown) {
 camera.moveDown(moveRate);
 }
 if (flags.moveLeft) {
 camera.moveLeft(moveRate);
 }
 if (flags.moveRight) {
 camera.moveRight(moveRate);
 }
});

完整代码请访问)

Camera

_Camera_表示Camera当前位置、方向、参考帧和视图截锥的状态。上面的Camera向量在每帧中都是正交的。 *move*_和_zoom**函数平移Camera的位置按照它的方向或指定的方向矢量。方向保持固定不变。

*look*_和_twist**函数旋转Camera的方向比如向上、或向右矢量。位置保持固定不变。

*rotate**函数玄幻位置和方向基于给定矢量。

函数设置Camera给定范围或位置和目标的Camera位置和方向。例如：

1
2
3
4
5
6


var west = Cesium.Math.toRadians(-77.0);
var south = Cesium.Math.toRadians(38.0);
var east = Cesium.Math.toRadians(-72.0);
var north = Cesium.Math.toRadians(42.0);
var extent = new Cesium.Extent(west, south, east, north);
camera.viewExtent(extent, Cesium.Ellipsoid.WGS84);

创建变量ray，通过像素拾取Camera的位置。该方法可用于拾取，例如：

1
2
3


// find intersection of the pixel picked and an ellipsoid
var ray = camera.getPickRay(mousePosition);
var intersection = Cesium.IntersectionTests.rayEllipsoid(ray, Cesium.Ellipsoid.WGS84);

Screen space camera controller

_ScreenSpaceCameraController_将用户输入（如鼠标和触摸）从窗口坐标转换为Camera运动。它包含用于启用和禁用不同类型输入、修改惯性量以及最小和最大缩放距离的属性。

资源

可在Sandcastle中查看camera样例代码：

API文档：

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]天地图应用开发许可申请说明！！！尽快修改天地图数据接口

Thu, 17 Jan 2019 02:54:47 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

国家地理信息公共服务平台“天地图”2018版对天地图应用开发流程进行了升级改造，天地图API与服务接口全面升级为tianditu.gov.cn政府域名，支持HTTP/HTTPS协议；原有服务域名tianditu.com继续保留。

为了保证天地图地理信息公共服务的稳定可靠，更好地为广大用户提供地理信息应用开发支持，即日起天地图API及服务接口调用都需要申请开发许可（Key）。您可以在天地图API网站控制台免费注册申请，请您尽快调整。天地图将于 2019年1月1日停止对无开发许可（Key）使用应用程序开发接口或者调用在线服务的支持，在此之前未获授权的API及服务仍可正常调用。

请合理注册个人/单位用户，对服务调用量有较高需求的企事业单位用户，请注册为单位用户并认证成为企业开发者。

原文链接：
http://lbs.tianditu.gov.cn/authorization/authorization.html

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程2 – 图层

Sun, 23 Dec 2018 12:19:39 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

Cesium支持从几个标准服务绘制和添加高分辨率图像（地图）图层。图层可以按顺序排列，并混合在一起。每一层的亮度、对比度、伽玛、色调和饱和度可以动态地改变。本节教程介绍了图层的概念以及相关的Cesuim APIs。

快速入门

我们暂时忽略细节，直接编写代码来添加一些图像层。在Sandcastle中打开Hello World示例。此示例创建一个Viewer组件，默认情况下，该组件呈现Bing Maps图层。我们可以通过向Viewer构造函数提供附加参数来指定不同的基础图层。让我们使用来自Esri ArcGIS MapServer的图层：

1
2
3
4
5
6


var viewer = new Cesium.Viewer('cesiumContainer', {
 imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
 url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
 }),
 baseLayerPicker : false
});

修改样例后，按F8来运行：

我们可以通过滑动鼠标滚轮放缩，来看到实际的图层流的变化。

接下来, 添加另一个图层: NASA Black Marble imagery 基于 Tile Map Service (TMS):

1
2
3
4
5
6


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'
}));

因为黑色大理石层是最后加上的一层，覆盖了整个地球，所以黑色大理石图层覆盖了 Esri图层。我们可以把黑色大理石图层移到底部layers.lower(blackMarble);，但是为了让我们能更好地理解这两层之间的关系，让我们把它和Esri图层混合：

1

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

下一步，调高灯光的亮度：

1

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

最后，添加一个单独的图像作为第三层作为特定的扩展。

1
2
3
4


layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
 url : '../images/Cesium_Logo_overlay.png',
 rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));

完整代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


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)
}));

在Sandcastle中查看完整样例

现有的图层

ion Assets tab in Sandcastle包含由Cesiumion托管的图层应用，可以在Cesium的应用中添加几行代码来使用图层服务。

ImageryProvider

上面使用的前两层这样的高分辨率图像太大，无法放入内存，甚至无法放入单个磁盘，因此图像被划分为较小的图像，称为tiles（瓦片），可以根据视图将图像流传输到客户端。Cesium支持使用ImageryProvider请求瓦片图的几种标准。大多数ImageryProvider使用HTTP上的REST接口来请求瓦片图。ImageryProvider根据请求的格式和组织方式的不同而不同。Cesium内置以下ImageryProvider：

Web Map Service (WMS) - OGC标准，用于从分布式地理空间数据库中请求地理区域的地图块。在Cesium中，请参见WebMapServiceImageryProvider。
Tile Map Service (TMS) - 访问瓦片图的Rest接口。瓦片图被转换为MapTiler或GDAL2Tiles.参见TileMapServiceImageryProvider。
OpenGIS Web Map Tile Service (WMTS) - 一个OGC标准，用于在互联网上提供预先绘制的地理参考瓦片图。在Cesium中，请参见WebMapServiceImageryProvider。
OpenStreetMap - 访问OpenStreetMap瓦片图或任何Slippy瓦片图。有几种方式可以host these tiles 在Cesium中，请参加createOpenStreetMapImageryProvider。
Bing Maps - 使用Bing Maps REST Services访问瓦片图。在https://www.bingmapsportal.com/创建Bing地图的keys。在Cesium中, 请参见BingMapsImageryProvider。
Esri ArcGIS MapServer - 使用ArcGIS Server REST API来访问ArcGIS MapServer上的瓦片图. 在Cesium中,请参见ArcGisMapServerImageryProvider。
Google Earth Enterprise - 提供对存储Google Earth Enterprise服务器中的图层的访问。在Cesium中，请参见GoogleEarthImageryProvider。
Mapbox - 使用Mapbox API访问瓦片图. 创建一个账户并提供access token. 在Cesium中, 请参见MapboxImageryProvider。
Standard image files - 从图片中创建图层。在Cesium中, 请参见SingleTileImageryProvider。
Custom tiling schemes - 使用UrlTemplateImageryProvider,通过使用URL模板，我们可以连接到大量图像源。例如, TMS的url模板是 //cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg.
Tile coordinates - 通过绘制每个瓦片图周围的边界并用其水平、X和Y坐标标记它，显示如何在特定的瓦片方案中将地球划分为多个瓦片图。

我们可以通过实现ImageryProvider接口来访问其他图层服务。如果你这样做，并认为它是普遍有用的，请贡献给Cesium为每个人的利益。

查看参考文档以了解如何构建特定的imagery provider。我们可以查看SingleTileImageryProvider因为很多imagery providers共享它的构造属性：

url -图像的url。像许多imagery provider，这是惟一需要的属性。在其他imagery providers中，这个url指向服务器或服务的根url。
extent - 可选参数，图像应该覆盖的经纬度矩形。默认情况是覆盖整个地球。
credit - 可选参数，数据源的字符证书, 将显示到canvas上。一些imagery providers, 比如 BingMapsImageryProvider 和 ArcGIS Server REST API, 可以直接从他们的服务获取字符证书或logo。
proxy - 可选参数，用于请求服务的代理，可以带给我们跨域共享资源。

跨域资源共享

基于安全考量，今天的Web浏览器会努力防止Javascript代码读取来自不同站点的图像像素。特别是，如果像Cesium这样的WebGL应用程序，访问来自不同的主机名或端口，并且服务器不显式地允许以这种方式使用图像，则禁止将图像用作纹理。服务器指示图像不包含机密信息，因此通过在HTTP响应中包括跨源资源共享(CORS)头部，其他站点读取它们的像素是安全的。

不幸的是，并非所有的图像服务都支持CORS。对于那些不是，必须使用与托管Cesium的网站同源的代理服务器。当使用这种代理时，对于Web浏览器和Cesium客户机来说，tile就好像它们来自与基于Cesium的网站相同的起源一样。若要与图像提供程序一起使用代理，请在构造图像提供程序时使用代理属性。Cesium包含一个用Node.js编写的用于开发的简单代理。

1
2
3
4


layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
 url : '//server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
 proxy : new Cesium.DefaultProxy('/proxy/')
}));

如果您正在托管公共图层，我们鼓励启用本文所述的CORS，而不是使用代理。

ImageryProvider与图层

到目前为止，我们还没有明确区分ImageryProvider和图层。ImageryProvider使用特定服务请求图层，而图层表示来自ImageryProvider的显示图层。代码如下：

1

var layer = layers.addImageryProvider(imageryProvider);

是下列代码的简写

1
2


var layer = new ImageryLayer(imageryProvider);
layers.add(layer);

我们通常构造一个imagery provider仅用于创建一个图层，然后我们利用他的属性，例如show, alpha, brightness和contrast。参见ImageryLayer。将imagery provider和图层解耦使得添加新的imagery provider变得容易。

像上面例子中的layers一样，图层集合确定绘制层的顺序。根据添加的顺序从下到上绘制图层。像Cesium中任何其他集合一样，使用add、remove和get等函数对图层集合进行操作。此外，可以使用raise、raiseToTop、lower和lowerToBottom对层进行重新排序。参见ImageryLayerCollection。

资源

可以从Sandcastle中获得imagery layers:

Imagery Layers - 教程中的代码样例
Imagery Layers Manipulation - 从多数据源中获得的图层，支持独立的透明度调整。
Imagery Adjustment - 调整图层的brightness, contrast, gamma, hue和saturation。

另外可以获得参考文档：

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中级教程1 – 空间数据可视化（一）

Thu, 01 Nov 2018 09:09:11 +0000

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

本教程将教读者如何使用Cesium的实体（Entity）API绘制空间数据，如点、标记、标签、线、模型、形状和物体。不需要Cesium的先验知识，但是如果读者完全没有这方面的经验，那么读者可能希望从“新手入门中文教程（原创）”开始学习。 ##什么是实体（Entity）API？ Cesium具有丰富的用于空间数据的API，可以分为两类：面向图形开发人员的低级API（通常称为原始(Primitive)API）和用于数据驱动的可视化的高级API（称为实体(Entity)API）。

原始API的主要目标是暴露手头执行任务所需的最小抽象量。它希望我们像图形程序员一样思考，并使用图形术语。它的结构是为给定的可视化类型提供最有性能和灵活性的实现，而不是为了API的一致性。加载一个模型不同于创建一个广告牌，两者都与创建多边形完全不同。每种类型的可视化都有其独特的特征。此外，它们各自具有不同的性能特征，并且需要遵循不同的最佳实践。虽然它功能强大且灵活，但大多数应用程序都比Primitive API提供的抽象级别更高。原始API的主要目标是开放手头当前研发工作的所需的最小抽象量。它希望我们像图形程序员一样思考，并使用图形术语。它的结构是为给定的可视化类型提供最有性能和灵活性的实现，而不是为了API的一致性。加载一个模型不同于创建一个广告牌（Billboard ），两者都与创建多边形完全不同。每种类型的可视化都有其独特的特征。此外，它们各自具有不同的性能特征，并且需要遵循不同的最佳实践。虽然它功能强大且灵活，但大多数应用程序都提供比Primitive API的抽象级别更高的服务接口。

实体API的目的是公开一组设计一致的高级对象，这些对象将相关的可视化和信息聚合到一个统一的数据结构中，我们称之为实体。它让我们专注于展示我们的数据，而不是担心可视化的潜在机制。它还提供了易于构建复杂的、时间动态可视化的构造，这种可视化方式与静态数据自然相适应。虽然实体API实际上在背后使用了原始API(Primitive API)，但这是我们（几乎）永远不必关注的实现细节。通过将各种启发式应用到我们提供的数据，实体API能够提供灵活的、高性能的可视化，同时公开一致的、易于学习和易于使用的接口。

我们的第一个实体

学习实体API的基本方法之一是通过查看一些代码。为了让事情简单化，我们将在CesiumSandcastle的Hello World例子中构建。如果读者在本地开发Cesium，可以自由地使用自己的应用程序。

假设我们想从经度和纬度的列表中添加一个美国州怀俄明的多边形。（怀俄明之所以被选中是因为它是一个简单的多边形）我们可以把下面的代码复制粘贴到Sandcastle去做：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


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

var wyoming = viewer.entities.add({
 name : 'Wyoming',
 polygon : {
 hierarchy : Cesium.Cartesian3.fromDegreesArray([
 -109.080842,45.002073,
 -105.91517,45.002073,
 -104.058488,44.996596,
 -104.053011,43.002989,
 -104.053011,41.003906,
 -105.728954,40.998429,
 -107.919731,41.003906,
 -109.04798,40.998429,
 -111.047063,40.998429,
 -111.047063,42.000709,
 -111.047063,44.476286,
 -111.05254,45.002073]),
 height : 0,
 material : Cesium.Color.RED.withAlpha(0.5),
 outline : true,
 outlineColor : Cesium.Color.BLACK
 }
});

viewer.zoomTo(wyoming);

点击运行按钮（或者F8）能看到下面的图像：

因为我们的一个目标是让Cesium的代码易于理解，希望这是不言自明的。我们创建了Viewer widget，它充当几乎所有Cesium应用程序的基础，然后通过viewer.entities.add. 添加一个新的Entity。我们传递的需add的对象只是一个提供初始值的选项参数。返回值是实际的实体实例。最后，我们调用 viewer.zoomTo 以确保实体处于视图中。有很多实体选项可用，但是现在我们指定polygon内部的半透明红色和边界的黑色轮廓。我们也给实体一个“Wyoming 怀俄明”的显示名称。

##形状和物体有了创建多边形的基本知识，并且由于实体API的同质性，我们现在可以通过简单地使用Sandcastle中的示例作为参考来创建各种图形。下面是支持的形状和物体的完整列表。

###材质和轮廓不管它们的几何定义如何，所有形状和物体都有一组共同的属性来控制它们的外观。fill属性是一个布尔值，它指定是否填充了表面的内部，而outline属性控制形状的边缘是否被轮廓化。当fill设为true，material属性决定填充物是什么。在接下来的例子中，让我们创建一个半透明的蓝色椭圆。默认情况下，fill是true，outline是false，所以我们只需要指定material。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var entity = viewer.entities.add({
 position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
 ellipse : {
 semiMinorAxis : 250000.0,
 semiMajorAxis : 400000.0,
 material : Cesium.Color.BLUE.withAlpha(0.5)
 }
});
viewer.zoomTo(viewer.entities);

var ellipse = entity.ellipse; // For upcoming examples

Image

我们也可以将材质指定为一个图片链接：

1

ellipse.material = '//cesiumjs.org/tutorials/images/cats.jpg';

在上述两种情况下，在赋值时自动为我们创建一个ColorMaterialProperty属性或ImageMaterialProperty属性。对于更复杂的材料，我们需要自己创建一个材料属性实例。目前，实体形状和物体支持颜色、图像、棋盘、条纹和网格材料。 ###棋盘

1
2
3
4
5


ellipse.material = new Cesium.CheckerboardMaterialProperty({
 evenColor : Cesium.Color.WHITE,
 oddColor : Cesium.Color.BLACK,
 repeat : new Cesium.Cartesian2(4, 4)
});

条纹

1
2
3
4
5


ellipse.material = new Cesium.StripeMaterialProperty({
 evenColor : Cesium.Color.WHITE,
 oddColor : Cesium.Color.BLACK,
 repeat : 32
});

网格

1
2
3
4
5
6


ellipse.material = new Cesium.GridMaterialProperty({
 color : Cesium.Color.YELLOW,
 cellAlpha : 0.2,
 lineCount : new Cesium.Cartesian2(8, 8),
 lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});

轮廓

与fill属性不同，outline没有相应的材料，而是依赖于两个独立的outlineColor和outlineWidth属性。outlineWidth只适用于非Windows系统，如Android、iOS、Linux和OS X。这是由于WebGL是如何在Windows上的所有三个主要浏览器引擎中实现所限制的。

1
2
3
4


ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;

###折线折线是一种特殊情况，因为它们没有填充或轮廓属性。相反，他们依靠专门的材料来代替颜色。由于这些特殊材料，不同宽度和轮廓宽度的折线将对所有系统起作用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var entity = viewer.entities.add({
 polyline : {
 positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
 -77.1, 35]),
 width : 5,
 material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);

var polyline = entity.polyline // For upcoming examples

折线轮廓

1
2
3
4
5


polyline.material = new Cesium.PolylineOutlineMaterialProperty({
 color : Cesium.Color.ORANGE,
 outlineWidth : 3,
 outlineColor : Cesium.Color.BLACK
});

折现光晕

1
2
3
4


polyline.material = new Cesium.PolylineGlowMaterialProperty({
 glowPower : 0.2,
 color : Cesium.Color.BLUE
});

##高度与挤压覆盖在地球上的所有形状，当前是圆、椭圆、多边形和矩形，也可以放置在海拔高度或挤压成一个物体。在这两种情况下，形状或物体仍然符合其下方的地球曲率。

对于高度，我们所要做的就是在相应的图形对象上设置高度属性，对于上面列出的所有形状都是一样的。这可能是提到Cesium总是使用米、弧度和秒作为单位的好时机，除非函数明确地表示了其他情况，比如Cartesian3.fromDegrees。下面的代码行将多边形提升到地球上方250000米处。

1

wyoming.polygon.height = 250000;

将形状挤压成物体同样容易，我们只需要设置extrudedHeight 属性。物体将在height和extrudedHeight 之间产生。如果height是undefined，则物体从0开始。为了创造一个物体从200000米开始，延伸到250000米，我们可以使用下面的代码。这当然意味着物体本身是50000米高。

1
2


wyoming.polygon.height = 200000;
wyoming.polygon.extrudedHeight = 250000;

Cesium中文网交流QQ群：807482793

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/

[CesiumJS]Cesium中文网日UV突破100

Wed, 10 Oct 2018 04:48:38 +0000

2018.06.22~2018.10.10经过了不到4个月的运营工作，社区-Cesium中文网终于突破日UV100，非常激动，Mark一下。

[CesiumJS]Cesium入门13 – Extras – 附加内容

Thu, 16 Aug 2018 07:56:51 +0000

剩下的代码只是添加了一些额外的可视化选项。类似于我们以前与HTML元素的交互，我们可以将侦听器函数附加到切换阴影和neighborhood 多边形可见性。

让我们开始创建一个简单的方法来切换neighborhood多边形。一般来说，我们可以通过Entity.show用实体设置可见性来隐藏实体。但是，这只为单个实体设置可见性，并且我们希望一次性隐藏或显示所有的neighborhood实体。

我们可以通过将所有的neighborhood 实体添加到父实体中来实现这一点，如本示例中所示，或者简单地使用EntityCollection的show属性。然后，我们可以通过改变neighborhoods.show来为所有的子实体一次设置可见性。

1
2
3
4
5


var neighborhoodsElement = document.getElementById('neighborhoods');

neighborhoodsElement.addEventListener('change', function (e) {
 neighborhoods.show = e.target.checked;
});

我们可以做一些类似的事情来切换阴影的可视性：

1
2
3
4
5


var shadowsElement = document.getElementById('shadows');

shadowsElement.addEventListener('change', function (e) {
 viewer.shadows = e.target.checked;
});

最后，由于3D Tiles可能不立即加载，所以我们也可以添加一个加载指示符，只有在tileset加载完成时才被移除（因此promise已经解决）。

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/166.html | 国内快速访问：http://cesium.coinidea.com/topic/166.html

[CesiumJS]Cesium入门12 – Camera Modes – 相机模式

Thu, 16 Aug 2018 07:55:47 +0000

为了展现我们的无人机飞行，让我们用相机模式进行实验。我们将保持简单的两个基本的相机模式，用户可以切换之间。

Free Mode : 默认相机控制。
Drone Mode : 让相机跟随无人机通过飞行在一个固定的距离。

自由模式不需要代码，因为它使用默认控件。至于无人机跟随模式，我们可以使用摄像机的内置实体跟踪功能来定位摄像机，并用偏移量定位无人机。这就使得相机即使在移动时也能从指定的实体中得到固定的偏移量。为了跟踪一个实体，我们简单地设置viewer.trackedEntity。

要切换到自由相机模式，我们可以将viewer.trackedEntity实体设置为未定义，然后使用**camera.flyTo()**返回到我们的Home视角。

以下是相机模式的函数：

1
2
3
4
5
6
7
8
9


// Create a follow camera by tracking the drone entity
function setViewMode() {
 if (droneModeElement.checked) {
 viewer.trackedEntity = drone;
 } else {
 viewer.trackedEntity = undefined;
 viewer.scene.camera.flyTo(homeCameraView);
 }
}

为了把这个附加到HTML输入，我们可以附加这个函数来change事件到适当的元素上：

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


var freeModeElement = document.getElementById('freeMode');
var droneModeElement = document.getElementById('droneMode');

// Create a follow camera by tracking the drone entity
function setViewMode() {
 if (droneModeElement.checked) {
 viewer.trackedEntity = drone;
 } else {
 viewer.trackedEntity = undefined;
 viewer.scene.camera.flyTo(homeCameraView);
 }
}

freeModeElement.addEventListener('change', setCameraMode);
droneModeElement.addEventListener('change', setCameraMode);

最后，当用户双击实体时，实体会被自动跟踪。如果用户通过单击开始跟踪无人机，我们可以添加一些处理来自动更新UI。

1
2
3
4
5
6


viewer.trackedEntityChanged.addEventListener(function() {
 if (viewer.trackedEntity === drone) {
 freeModeElement.checked = false;
 droneModeElement.checked = true;
 }
});

这是我们的两个相机模式-我们现在可以自由切换到无人机相机视角，看起来像这样：

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/165.html | 国内快速访问：http://cesium.coinidea.com/topic/165.html

[CesiumJS]Cesium入门11 – Interactivity – 交互性

Thu, 16 Aug 2018 07:52:08 +0000

最后，让我们添加一些鼠标交互。为了提高我们的geocache标记的可见性，当用户在标记上hovers时，我们可以改变它们的样式来突出显示。

为了实现这一点，我们将使用拾取pick，一种Cesium的特征，从3D场景中返回数据，在观看者画布上给出像素位置。

这里有以下几种不同的picking：

Scene.pick : 返回包含给定窗口位置的基元的对象。
Scene.drillPick : 返回包含给定窗口位置的所有原语的对象列表。
Globe.pick : 返回给定光线与地形的交点。

一下是一些picking操作的例子：

因为我们希望在hover触发我们的高亮效果，首先我们需要创建一个鼠标动作处理器。为此，我们将使用ScreenSpaceEventHandler在用户输入操作中触发指定函数的一组处理程序。ScreenSpaceEventHandler.setInputAction()监听用户行为类型ScreenSpaceEventType,并运行一个特定的函数，将用户操作传递为参数。这里，我们将传递一个以movement为输入的函数：

1
2


var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

接下来让我们来写我们的高亮功能。处理程序将在鼠标movement中传递，从中我们可以提取一个窗口位置与pick()一起使用。如果拾取返回billboard对象，我们知道我们在一个标记上hovering。然后，使用我们了解的Entity样式，我们可以应用突出显示样式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// If the mouse is over a point of interest, change the entity billboard scale and color
handler.setInputAction(function(movement) {
 var pickedPrimitive = viewer.scene.pick(movement.endPosition);
 var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
 // Highlight the currently picked entity
 if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
 pickedEntity.billboard.scale = 2.0;
 pickedEntity.billboard.color = Cesium.Color.ORANGERED;
 }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

这成功地触发了标记的高亮样式更改。但是，您会注意到，当我们移动光标时，标记保持突出。我们可以通过跟踪最后一个标记来修复，并恢复原来的样式。

这里是完整的功能，标记高亮显示和取消高亮工作：

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


// If the mouse is over a point of interest, change the entity billboard scale and color
var previousPickedEntity = undefined;
handler.setInputAction(function(movement) {
 var pickedPrimitive = viewer.scene.pick(movement.endPosition);
 var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
 // Unhighlight the previously picked entity
 if (Cesium.defined(previousPickedEntity)) {
 previousPickedEntity.billboard.scale = 1.0;
 previousPickedEntity.billboard.color = Cesium.Color.WHITE;
 }
 // Highlight the currently picked entity
 if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
 pickedEntity.billboard.scale = 2.0;
 pickedEntity.billboard.color = Cesium.Color.ORANGERED;
 previousPickedEntity = pickedEntity;
 }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

就是这样！现在我们成功地添加了鼠标movement handler和标记实体的hover行为。

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/164.html | 国内快速访问：http://cesium.coinidea.com/topic/164.html

[CesiumJS]Cesium入门10 – 3D Tiles

Thu, 16 Aug 2018 07:49:55 +0000

我们团队有时把Cesium描述成一个真实世界数据的3D游戏引擎。然而，使用真实世界的数据比使用典型的视频游戏数据资料要困难得多，因为真实数据可能是难以置信的高分辨率，并且需要精确的可视化。幸运的是，Cesium 与开源社区合作开发了3D Tiles，这是一个开放的规范，用于传输海量的异构三维地理空间数据集。

使用概念上类似于Cesium的terrain和imagery的流技术，3D Tiles 使得可以查看原本不能交互式查看的巨大的模型，包括建筑物数据集、CAD（或BIM）模型、点云和摄影测量模型。

The 3D Tiles Inspector 是一种在遮罩hood下提供查看能力的调试工具。

下面是一些展示不同格式的3D Tiles演示：

在我们的应用中，我们将使用Cesium3DTileset通过展示纽约所有建筑物的全3D模型来为我们的可视化添加现实主义！这种纽约 tilese托管在Cesium Ion中，我们可以使用IonResource.fromAssetId添加它：

1
2


// Load the NYC buildings tileset
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));

你可能注意到建筑物没有正确地定位在地平面上。幸运的是，它很容易修复。我们可以通过修改模型矩阵modelMatrix来调整tileset的位置。

我们可以通过将tileset的边界球转换成地图Cartographic，然后添加期望的偏移量并重置模型矩阵，从地面找到模型modelMatrix的当前偏移量。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// Adjust the tileset height so its not floating above terrain
var heightOffset = -32;
city.readyPromise.then(function(tileset) {
 // Position tileset
 var boundingSphere = tileset.boundingSphere;
 var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
 var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
 var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
 var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
 tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});

现在在我们的场景中有110万个建筑模型流。

3D Tiles 还允许我们使用3D Tiles styling语言来调整我们的样式。3D Tiles 样式定义了用于评估颜色（RGB和透明度）的表达式，并显示了Cesium3DTileFeature特征的属性，这是tileset的一部分，例如城市中的单个建筑物。样式通常基于存储在瓦片的批处理表中的特征属性。特征属性可以是高度、名称、坐标、构造日期等任何东西，但被构建到tileset asset 中。样式是用JSON定义的，而表达式是在JavaScript的小子集中编写的，用于样式化。此外，样式语言提供了一组内置函数来支持常见的数学运算。

一个Cesium3DTilesetStyle的例子如下：

1
2
3
4


var defaultStyle = new Cesium.Cesium3DTileStyle({
 color : "color('white')",
 show : true
});

上述代码使我们NYC的tileset是白色并且总是可见的。为了实际设置tileset的样式，我们设置city.style:

1

city.style = defaultStyle;

我们还可以定义许多我们喜欢的样式。比如，让建筑变透明：

1
2
3
4


var transparentStyle = new Cesium.Cesium3DTileStyle({
 color : "color('white', 0.3)",
 show : true
});

在我们的tileset中使用相同的样式来达到每一个特征只是皮毛工作。我们还可以使用特定于每个特征的属性来确定造型。下面是一个基于建筑物高度的建筑物颜色的例子：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var heightStyle = new Cesium.Cesium3DTileStyle({
 color : {
 conditions : [
 ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
 ["${height} >= 200", "rgb(102, 71, 151)"],
 ["${height} >= 100", "rgb(170, 162, 204)"],
 ["${height} >= 50", "rgb(224, 226, 238)"],
 ["${height} >= 25", "rgb(252, 230, 200)"],
 ["${height} >= 10", "rgb(248, 176, 87)"],
 ["${height} >= 5", "rgb(198, 106, 11)"],
 ["true", "rgb(127, 59, 8)"]
 ]
 }
});

为了在样式间交换，我们可以添加更多的代码来侦听HTML输入：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


var tileStyle = document.getElementById('tileStyle');
function set3DTileStyle() {
 var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
 if (selectedStyle === 'none') {
 city.style = defaultStyle;
 } else if (selectedStyle === 'height') {
 city.style = heightStyle;
 } else if (selectedStyle === 'transparent') {
 city.style = transparentStyle;
 }
}

tileStyle.addEventListener('change', set3DTileStyle);

更多关于3D Tiles的例子、如何使用及调整样式，请查看the 3D Tiles sandcastle demos。

3D Tiles例子：

如果你有数据，需要帮助将其转换为3D瓦片，请继续关注关于Cesium Ion平台的更新！在这里订阅更新。

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/163.html | 国内快速访问：http://cesium.coinidea.com/topic/163.html

[CesiumJS]Cesium入门9 – Loading and Styling Entities – 加载和样式化实体

Wed, 15 Aug 2018 07:42:41 +0000

现在我们已经为我们的应用程序设置了Viewer配置、imagery和terrain的阶段，我们可以添加我们的应用程序的主要焦点——geocache数据。

为了便于可视化，Cesium支持流行的矢量格式GeoJson和KML，以及一种我们团队自己开源的格式，我们专门开发用于描述Cesium场景的[]CZML](https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Guide)。

无论初始格式如何，Cesium中的所有空间数据都使用Entity API来表示。Entity API以一种有效提供灵活的可视化的方式，以便对Cesium进行渲染。Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象。测试沙盒中提供了许多简单Entity的例子。为了在Entity API的基础上加快速度，从这个应用程序中休息一下，然后阅读可视化的空间数据教程 Visualizing Spatial Data tutorial。

以下有一些关于不同entity类型的例子：

一旦你掌握了一个Entity的样子，用Cesium装载数据集将是变得容易理解。要读取数据文件，需要创建适合于数据格式的数据源DataSource，该数据源将解析在指定URL中承载的数据文件，并为数据集中的每个地理空间对象创建包含Entity的EntityCollection。DataSource只是定义了一个接口——您需要的数据源的确切类型将取决于数据格式。例如，KML使用KmlDataSource源代码。比如：

1
2
3
4
5
6
7
8


var kmlOptions = {
 camera : viewer.scene.camera,
 canvas : viewer.scene.canvas,
 clampToGround : true
};
// Load geocache points of interest from a KML file
// Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);

上述代码读取我们样例的geocahce点，从一个KML文件中，调用KmlDataSource.load(optinos)带一些配置。针对一个KmlDataSource，相机和Canvas配置项是必须的。clamptoGround选项激活了ground clamping**，一种流行的描述配置用于是地面的几何entities比如多边形和椭圆符合地形而且遵从WGS84椭圆面。

由于这些数据是异步加载的，因此针对KmlDataSource返回一个的Promise，它将包含我们所有新创建的entities。

如果您不熟悉使用异步函数的PromiseAPI，这里的“异步”基本上意味着您应该在所提供的回调函数中完成所需的数据**.then.为了实际地将这些实体集合添加到场景中，我们必须等待直到promise完成，然后将KmlDataSource添加viewer.datasrouces**。取消以下几行注释：

1
2
3
4
5


// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
});

默认情况下，这些新创建的实体具有有用的功能。单击将显示与实体相关的元数据的信息框Infobox，并双击缩放并查看实体。若要停止查看该实体，请单击“home”按钮，或单击“信息框”上的“划出”相机图标。接下来，我们将添加自定义样式来改善我们的应用程序的外观style。

对于KML和CZML文件，可以在文件中建立声明式样式。然而，对于这个应用，让我们练习手动设计我们的实体。要做到这一点，我们将采取类似的方法来处理这个样式示例，等待我们的数据源加载，然后迭代数据源集合中的所有实体，修改和添加属性。默认情况下，我们的geocache点标记被创建为Billboards和Labels，所以为了修改这些实体的外观，我们这样做：

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


// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);

 // Get the array of entities
 var geocacheEntities = dataSource.entities.values;

 for (var i = 0; i < geocacheEntities.length; i++) {
 var entity = geocacheEntities[i];
 if (Cesium.defined(entity.billboard)) {
 // Entity styling code here
 }
 }
});

我们可以通过调整它们的锚点、去除标签来减少clutter和设置isplayDistanceCondition来改善标记的外观，使得只有在距相机的一定距离内的点是可见的。

1
2
3
4
5
6
7
8
9


// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
 // Adjust the vertical origin so pins sit on terrain
 entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
 // Disable the labels to reduce clutter
 entity.label = undefined;
 // Add distance display condition
 entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
}

有关distanceDisplayCondition的更多帮助，请参见sandcastle example。

接下来，让我们为每个geocache实体改进信息框Infobox。信息框的标题是实体名称，内容是实体描述，显示为HTML。

你会发现默认的描述并不是很有帮助。由于我们正在显示geocache 位置，让我们更新它们来显示点的经度和纬度。

首先，我们将实体的位置转换成地图，然后从Cartographic中读取经度和纬度，并将其添加到HTML表中的描述中。

在单击时，我们的geocache 实体现在将显示一个格式良好的信息框Infobox，只需要我们所需要的数据。

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


// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
 // Adjust the vertical origin so pins sit on terrain
 entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
 // Disable the labels to reduce clutter
 entity.label = undefined;
 // Add distance display condition
 entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
 // Compute longitude and latitude in degrees
 var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
 var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
 var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
 // Modify description
 // Modify description
 var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
 '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
 '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
 '</tbody></table>';
 entity.description = description;
}

我们的geocache标记现在应该看起来像这样：

对于我们的地理应用程序来说，可视化特定点的邻域也会有帮助。让我们试着为每个纽约街区记载一个包含多边形的GeoJson文件。加载GeoJson文件最终非常类似于我们刚刚用于KML的加载过程。但是在这种情况下，我们使用GeoJsonDataSource。与前一个数据源一样，我们需要将它添加到viewer.datasources中，以便实际添加数据到场景中。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


var geojsonOptions = {
 clampToGround : true
};
// Load neighborhood boundaries from KML file
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/neighborhoods.geojson', geojsonOptions);

// Save an new entity collection of neighborhood data
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
});

让我们来调整我们加载的neighborhood多边形。就像我们刚才做的billboard样式一样，我们首先在数据源加载后迭代遍历neighborhood 数据源实体，这次检查每个实体的多边形被定义：

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


// Save an new entity collection of neighborhood data
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
 // Add the new data as entities to the viewer
 viewer.dataSources.add(dataSource);
 neighborhoods = dataSource.entities;

 // Get the array of entities
 var neighborhoodEntities = dataSource.entities.values;
 for (var i = 0; i < neighborhoodEntities.length; i++) {
 var entity = neighborhoodEntities[i];

 if (Cesium.defined(entity.polygon)) {
 // entity styling code here
 }
 }
});

既然我们正在显示neighborhood，让我们重命名每个实体使用neighborhood作为它的名字。我们所读的neighborhood中原始GeoJson文件作为属性。Cesium将GeoJson属性存储在enty.properties中，这样我们就可以设置这样的neighborhood名称：

1
2
3
4


// entity styling code here

// Use geojson neighborhood value as entity name
entity.name = entity.properties.neighborhood;

我们可以把每一个多边形分配给一个新的颜色材料属性，通过ColorMaterialProperty设置随机颜色Color，而不是把所有的区域都设置成一样的颜色。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// entity styling code here

// Set the polygon material to a random, translucent color.
entity.polygon.material = Cesium.Color.fromRandom({
 red : 0.1,
 maximumGreen : 0.5,
 minimumBlue : 0.5,
 alpha : 0.6
});

// Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;

最后，让我们为每个实体生成一个带有一些基本样式选项的标签Label。为了保持整洁，我们可以使用disableDepthTestDistance让Cesium总是把标签放在任何3D物体可能遮挡的地方。

然而，请注意，标签总是位于entity.position。多边形Polygon是由一个未定义的位置创建的，因为它有一个定义多边形边界的位置列表。我们可以通过取多边形位置的中心来生成一个位置：

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


// entity styling code here

// Generate Polygon position
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// Generate labels
entity.label = {
 text : entity.name,
 showBackground : true,
 scale : 0.6,
 horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
 verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
 distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
 disableDepthTestDistance : 100.0
};

这给我们标出了看起来像这样的多边形：

最后，让我们通过在城市上空添加无人机飞行来增加我们的NYC geocaches 的高科技视角。

由于飞行路径只是一系列随时间变化的位置，所以我们可以从CZML文件中添加这些数据。CZML是一种用于描述时间动态图形场景的格式，主要用于在运行Cesium的Web浏览器中显示。它描述了线、点、billboards、模型和其他图形原语，并指定它们如何随时间变化。CZML之于Cesium，相当于KML之于谷歌地球的标准格式，它允许大多数Cesium功能特性通过声明式样式语言（在这种情况下是JSON模式）使用。

我们的CZML文件定义了一个实体（默认为可视化的一个点），其位置被定义为在不同时间点的一系列位置。实体API中有几种属性类型可用于处理时间动态数据。参见下面的演示示例：

Property Types Demo

1
2
3
4
5
6


// Load a drone flight path from a CZML file
var dronePromise = Cesium.CzmlDataSource.load('./Source/SampleData/SampleFlight.czml');

dronePromise.then(function(dataSource) {
 viewer.dataSources.add(dataSource);
});

CZML文件使用Cesium来显示无人机飞行，该路径是实体随时间显示其位置的属性。一条路径用插值法将离散点连接到一条连续的直线上进行可视化。最后，让我们改善无人机飞行的外观。首先，而不是简单地解决问题，我们可以加载一个3D模型来表示我们的无人机并将其附加到实体上。

Cesium支持基于glTF（GL传输格式）加载3D模型，这是Cesium团队与Khronos group一起开发的开放规范，用于通过最小化文件大小和运行时间处理来有效地加载应用程序的3D模型。没有gLTF模型吗？我们提供了一个在线转换器，将COLLADA和OBJ文件转换为glTF格式。

让我们加载一个无人机模型Model，具有良好的基于物理的阴影和一些动画：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var drone;
dronePromise.then(function(dataSource) {
 viewer.dataSources.add(dataSource);
 // Get the entity using the id defined in the CZML data
 drone = dataSource.entities.getById('Aircraft/Aircraft1');
 // Attach a 3D model
 drone.model = {
 uri : './Source/SampleData/Models/CesiumDrone.gltf',
 minimumPixelSize : 128,
 maximumScale : 1000,
 silhouetteColor : Cesium.Color.WHITE,
 silhouetteSize : 2
 };
});

现在我们的模型看起来不错，但与原来的点不同，无人机模型具有方向性，当无人驾驶飞机向前移动时，它看起来很奇怪。幸运的是，Cesium提供了一种VelocityOrientationProperty，它将根据一个实体向前和向后采样的位置自动计算方向：

1
2


// Add computed orientation based on sampled positions
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);

现在我们的无人驾驶飞机模型将如期进行。

还有一件事我们可以做的是改善我们的无人机飞行的外观。从远处看，它可能并不明显，但无人机的路径是由看起来不自然的线段组成的，这是因为Cesium使用线性插值来构建从默认采样点的路径。然而，可以配置插值选项。

Interpolation Demo

为了获得更平滑的飞行路径，我们可以改变这样的插值选项：

1
2
3
4
5


// Smooth path interpolation
drone.position.setInterpolationOptions({
 interpolationDegree : 3,
 interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/161.html | 国内快速访问：http://cesium.coinidea.com/topic/161.html

[CesiumJS]Cesium入门8 – Configuring the Scene – 配置视窗

Wed, 15 Aug 2018 07:30:05 +0000

接下来将添加一些更多的正确的时间和空间设置到Viewer中。涉及到与viewer.scene进行交互，该类控制了viewer中的所有图形元素。

首先，我们配置一下我们的scene，用以下代码激活基于太阳位置的光照：

1
2


// Enable lighting based on sun/moon positions
viewer.scene.globe.enableLighting = true;

按照以上配置，我们scene(场景)中的光照将会随着每天时间的变化而变化。如果你zoom out，你就会看到一部分数字地球位于黑暗之中，因为模拟真实的地球，太阳只能照射到地球的一部分。

在我们开始初始化启动view之前，我们先简略的过一下一些基础的Cesium类型：

Cartesian3 : 一个三维笛卡尔坐标——当它被用作相对于地球中心的位置时，使用地球固定框架（ECEF）。
Cartographic : 由经度、纬度（弧度）和WGS84椭球面高度确定的位置。
HeadingPitchRoll : 在东北向上的框架中关于局部轴的旋转（弧度）。航向是围绕负Z轴的旋转。俯仰是围绕负Y轴的旋转。滚动是关于正X轴的旋转。
Quaternion :以4D坐标表示的3D旋转。

这些是在场景中定位和定位Cesium objects所必需的基本类型，并且有许多有用的转换方法。请参阅每种类型的文档以了解更多信息。

现在让我们把相机定位在我们数据所在的NYC（纽约）的场景中。

Camera Control

相机是viewer.scene中的属性，用来控制当前可见的域。我们可以通过直接设置它的位置和方向来控制相机，或者通过使用Cesium提供的API来控制相机，它被设计成指定相机的位置和方向随时间的变化。

一些最常用的方法如下：

Camera.setView(options): 在特定位置和方向立即设置相机。
Camera.zoomIn(amount): 沿着视角矢量移动摄像机。
Camera.zoomOut(amount): 沿视角矢量向后移动摄像机。
Camera.flyTo(options): 创建从当前相机位置到新位置的动画相机飞行。
Camera.lookAt(target, offset) : 定位并定位摄像机以给定偏移量瞄准目标点。
Camera.move(direction, amount) : 朝任何方向移动摄像机。
Camera.rotate(axis, angle) : 绕任意轴旋转相机。

进一步获得API功能，看看这些相机演示：

Camera API Demo
Custom Camera Controls Demo

让我们尝试一种方法将相机跳转到纽约。使用camera.setView()初始化view，使用Cartesian3和HeadingpitchRoll指定相机的位置和方向:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// Create an initial camera view
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
 destination : initialPosition,
 orientation : {
 heading : initialOrientation.heading,
 pitch : initialOrientation.pitch,
 roll : initialOrientation.roll
 }
};
// Set the initial view
viewer.scene.camera.setView(homeCameraView);

相机现在被定位和定向以俯瞰曼哈顿，并且我们的视图参数被保存在一个对象中，我们可以将其传递给其他相机方法。

实际上，我们可以使用这个相同的视角来更新按下home按钮的效果。我们不必让它从远处返回地球的默认视角，我们可以重写按钮，使我们看到曼哈顿的初始视角。我们可以通过添加几个选项来调整动画，然后添加一个取消默认航班的事件侦听器，并调用**FlyTo()**我们的Home视角：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// Add some camera flight animation options
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
 e.cancel = true;
 viewer.scene.camera.flyTo(homeCameraView);
});

更多关于基本相机控制，请访问我们的Camera Tutorial。

Clock Control

接下来，我们配置viewer的Clock和Timline来控制scene的时间进度。

这里是clock的相关API

当使用特定时间时，Cesium使用JulandDATE类型，它存储了1月1日中午以来的天数-4712（公元前4713年）。为了提高精度，该类将日期和秒的全部部分存储在单独的组件中。为了计算安全和代表跳跃秒，日期总是存储在国际原子时间标准中。

下面是我们如何设置场景时间选项的例子：

1
2
3
4
5
6
7
8
9


// Set up clock and timeline.
viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
viewer.clock.multiplier = 2; // sets a speedup
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range

这设置场景动画的速率、开始和停止时间，并告诉时钟在到达停止时间时循环回到开始。它还将时间线控件设置为适当的时间范围。看看这个时钟示例代码来测试时钟设置。

这是我们的初始场景配置！现在，当你运行你的应用程序时，你应该看到以下内容：

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/160.html | 国内快速访问：http://cesium.coinidea.com/topic/160.html

[CesiumJS]Cesium入门7 – Adding Terrain – 添加地形

Tue, 14 Aug 2018 08:34:50 +0000

Cesium支持流式的、可视化的全球高程投影地形地势、水形数据，包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。像图层数据一样，Cesium引擎会从一个服务器上请求流式地形数据，仅请求那些基于当前相机能看到的需要绘制的图层上的数据。

Cesium官方提供了一些地形数据集的例子，以及如何配置这些参数。

ArcticDEM : 高投影的arctic terrain
PAMAP Terrain : 高投影的Pennsylvania terrain
Terrain display options : 一些地形数据配置和格式
Terrain exaggeration : 是地形间的高度差异更加的优雅艺术

支持的地形数据格式

Quantized-mesh, Cesium团队自己开源的一种格式
Heightmap
Google Earth Enterprise

为了添加地形数据，我们需要创建一个CesiumTerrainProvider，提供一个url和一些配置想，然后将这个provider赋值给viewer.terrainProvider。

此处，我们使用Cesium WorldTerrian图层，该图层由Cesium ion提供，在“My Assets”中是默认提供的。我们可以用createWorldTerrainhelper函数创建一个由Cesium ion提供服务的Cesium WorldTerrian。

1
2
3
4
5


// Load Cesium World Terrain
viewer.terrainProvider = Cesium.createWorldTerrain({
 requestWaterMask : true, // required for water effects
 requestVertexNormals : true // required for terrain lighting
});

requestWaterMask和requestVertexNormals是可选的配置项，告诉Cesium是否需要请求额外的水、光数据。这两个选项默认是设为false的。

最终，既然我们有了地形数据，我们需要更多的线条来使得地形数据背后的objects能够正确地显示，只有最前面、最上面的objects才能是可见的。

1
2


// Enable depth testing so things behind the terrain disappear.
viewer.scene.globe.depthTestAgainstTerrain = true;

我们现在有地形数据和运动的水。纽约非常平坦，所以可以在上面的地形数据上自由的探索。举一个显而易见的例子，你可以跳转到更加崎岖的区域比如 Grand Canyon 或者 San Francisco。

关于地形数据的更多信息，请访问Terrain Tutorial

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/157.html | 国内快速访问：http://cesium.coinidea.com/topic/157.html

[CesiumJS]Cesium入门6 – Adding Imagery – 添加图层

Tue, 14 Aug 2018 08:29:46 +0000

Cesium应用程序另一个关键元素是Imagery(图层)。瓦片图集合根据不同的投影方式映射到虚拟的三维数字地球表面。依赖于相机指向地表的方向和距离，Cesium会去请求和渲染不同层级的图层详细信息。

多种图层能够被添加、移除、排序和适应到Cesium中。

Cesium提供了一系列方法用于处理图层，比如颜色自适应，图层叠加融合。一些样例代码如下：

Cesium提供了各种**接口**支持各样的图层数据源。

支持的图层格式

wms
TMS
WMTS (with time dynamic imagery)
ArcGIS
Bing Maps
Google Earth
Mapbox
OpenStreetMap

注意：不同的数据源需要不同的认证 - 需要确保自己能够有权限访问到这些数据源，自然地需要注册特定的认证才可以

默认地，Cesium使用Bing Maps作为默认的图层。这个图层被打包进Viewer中用于演示。Cesium需要您自己创建**ion account**然后生成一个access key用于访问图层数据。

在接下来的例子中，将使用Cesium ion中的Sentinel-2图层。

去Cesium ion页面，将Sentinel-2图层加入到自己的assets中。点击在导航栏中点击“Asset Depot”
点击“Add to my assets”。Sentinel-2将在你个人用户中的asset列表（My Assets）中出现，此时将在个人的app中图层数据源变得可用。
代码级别：我们创建一个IonImageryProvider，将assetId传给对应的Sentinel-2图层。然后我们将ImageryProvider添加到viewer.imageryLayers。

1
2
3
4
5


// Remove default base layer
viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

// Add Sentinel-2 imagery
viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3954 }));

基于上述的代码，我们的Cesium应用程序在缩进zoom in的时候会看到如下图层：

关于图层的更多信息：请访问Imagery Layers Tutorial

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/156.html | 国内快速访问：http://cesium.coinidea.com/topic/156.html

[CesiumJS]Cesium入门5 – Cesium ion

Mon, 13 Aug 2018 07:43:34 +0000

Cesium ion是一个提供瓦片图和3D地理空间数据的平台，Cesium ion支持把数据添加到用户自己的CesiumJS应用中。下面我们将使用Sentinal-2二维贴图和Cesium世界地形，二者都需要ion的支持。

备注在我们使用Cesium的过程中，如果没有申请ion，同时没有自己的数据源用的cesium提供的数据源，viewer的底部常常会提示一行小的英文字母。大意就是需要申请access token.

首先需要去注册一个免费的Cesium ion账户。
打开 https://cesium.com/ion/ 然后注册一个新的账户。
点击"Access Token"，跳转到Access Tokens page页面。
选择Default默认的access token拷贝到contents中。

在创建Cesium Viewer的时候，将access token填为自己的access token即可。

1

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

以上就能畅快的访问Cesium ion提供的各种数据源了。

更多问题可以访问 Getting Started with Cesium ion

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/153.html | 国内快速访问：http://cesium.coinidea.com/topic/153.html

[CesiumJS]Cesium入门4 – 创建Cesium Viewer

Mon, 13 Aug 2018 06:55:35 +0000

任何Cesium应用程序的基础都是Viewer。Viewer是一个带有多种功能的可交互的三位数字地球的容器（盒子）。创建一个Viewer和HTML中的一个id为"cesiumContainer"的div绑定即可。

1

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

使用以上代码之后，能看到下图所示的基本的数字地球：

默认地，场景支持鼠标（电脑）和手指（移动设备）交互。控制相机漫游数字地球可以通过以下方式：

Left click and drag - Pans the camera over the surface of the globe.
Right click and drag - Zooms the camera in and out.
Middle wheel scrolling - Also zooms the camera in and out.
Middle click and drag - Rotates the camera around the point on the surface of the globe. 翻译
按住鼠标左键拖拽 - 让相机在数字地球平面平移。
按住鼠标右键拖拽 - 放缩相机。
鼠标滚轮滑动 - 放缩相机。
按住鼠标中键拖拽 - 在当前地球的屏幕中间点，旋转相机。

默认的Viewer自带了一些有用的组件：

Geocoder : A location search tool that flies the camera to queried location. Uses Bing Maps data by default.
HomeButton : Flies the viewer back to a default view.
SceneModePicker : Switches between 3D, 2D and Columbus View (CV) modes.
BaseLayerPicker : Chooses the imagery and terrain to display on the globe.
NavigationHelpButton : Displays the default camera controls.
Animation : Controls the play speed for view animation.
CreditsDisplay : Displays data attributions. Almost always required!
Timeline : Indicates current time and allows users to jump to a specific time using the scrubber.
FullscreenButton : Makes the Viewer fullscreen. 翻译
Geocoder : 一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。
HomeButton : 首页位置，点击之后将视图跳转到默认视角。
SceneModePicker : 切换2D、3D 和 Columbus View (CV) 模式。
BaseLayerPicker : 选择三维数字地球的底图（imagery and terrain）。
NavigationHelpButton : 帮助提示，如何操作数字地球。
Animation :控制视窗动画的播放速度。
CreditsDisplay : 展示商标版权和数据源。
Timeline : 展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。
FullscreenButton : 视察全屏按钮。

我们可以通过代码来配置视窗组件，在我们初始化视窗的时候，通过配置参数添加/移除相关组件。以下代码是通过参数配置得到的viewer,该Viewer不带selection indicators, base layer picker or scene mode picker等组件。

1
2
3
4
5


var viewer = new Cesium.Viewer('cesiumContainer', {
 scene3DOnly: true,
 selectionIndicator: false,
 baseLayerPicker: false
});

如果需要查看Viewer的完整配置，请查看：https://cesiumjs.org/Cesium/Build/Documentation/Viewer.html。

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/152.html | 国内快速访问：http://cesium.coinidea.com/topic/152.html

[CesiumJS]Cesium入门3 – Cesium目录框架结构

Fri, 10 Aug 2018 09:13:46 +0000

app目录

下载官网上的文件，我们能看到以下CesiumJS库结构：

Source/: Cesium应用程序代码及数据
ThirdParty/：外部依赖库，不同于Cesium的第三方库
LICENSE.md：Cesium的License介绍
index.html：Web首页，需要按照Cesium要求定义页面，同时添加Cesium依赖库
server.js：基于node.js的web服务应用

备注

cesiumJS与第三方JavaScript库和框架做了适配:

React: Integrating Cesium with React

ThreeJS: Integrating Cesium with ThreeJS

页面结构

引入CesiumJS

1

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

开发者也可以根据自己的需求，通过ThirdParty/Cesium/source/来挑选自己的依赖库，裁剪js的大小，

HTML结构

需要一个div作为Cesium Viewer widget的容器

1

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

需要引入app.js来激活Cesium Viewer，app.js最好在HTML末尾引入。

1

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

添加CSS样式

需要引入Cesium viewer中的各种widget的样式新建一个index.css，并引入到index.html中

1

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

在index.css中加入以下默认的Cesium CSS。

1

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

操作步骤

打开Source/App.js，删除contents
拷贝Source/AppSkeleton.js到Source/App.js
确认server.js在Cesium文件夹根目录，并运行server.js (npm server.js)
在新版本（支持WebGL）的浏览器中输入localhost:8080

如果有任何问题：

完整代码：https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=8d9d3daadd197cffd501d7210bcca3b6

推荐代码：https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=113c3467755fc38d9f9bce16a94475fc

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/144.html | 快速访问链接：http://cesium.coinidea.com/topic/144.html

[CesiumJS]Cesium入门2 – Cesium环境搭建及第一个示例程序

Fri, 10 Aug 2018 03:11:34 +0000

验证浏览器

Cesium需要浏览器支持WebGL，可以通过CesiumJS官网提供的一个HelloWorld例子来测试自己的浏览器是否支持Cesium。（推荐使用Chrome）测试地址： https://cesiumjs.org/Cesium/Apps/HelloWorld.html

选择IDE

官网中写到：

1

If you’re already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you’re just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.

如果你已经是一个经验丰富的开发人员，你很可能有一个最喜欢的编辑器或开发环境; 例如，大多数Cesium团队使用Eclipse。如果你刚刚开始，一个伟大的免费和开源的编辑器是Notepad ++，你可以从他们的网站下载。最终任何文本编辑器都会做，所以去与你最舒适的。

我个人之前开发PHP较多，所以我使用的是PHPStorm，其实我不推荐Eclipse，我比较推荐和Idea一母同胞的WebStorm。考虑到工程和文件夹的管理，我也不推荐Notepad++，轻量级的IDE我比较推荐Sublime Text.

下载Cesium源代码

最新的release版本代码下载地址： https://cesiumjs.org/tutorials/cesium-up-and-running/

下载后，将zip文件解压到您选择的新目录中，我将在整个教程中将此文件称为Cesium root目录。内容应该看起来像下面。

直接点击index.html是无效的，需要放入Web Server容器中，才能运行起来。

Server端

Cesium是纯前端的代码，官方给出的源代码中，配套了nodejs的server端，以及可以通过nodejs进行安装部署。实际上可以将Cesium部署进入tomcat（geoserver）、apache、nginx等服务器中。

官网推荐的是nodejs

从官网中下载Node.js(https://nodejs.org/en/), 实际上nodejs有一些参数可是配置，使用默认的参数即可。.
在Cesium所在的文件夹目录，打开cmd或者bash敲入命令

1

npm install

下载依赖的npm模块，比如express等。如果成功，会在Cesium文件夹中床架 ‘node_modules’文件夹。 3. 最后在cmd或者bash中执行 shell node server.js 或者 shell npm start

成功之后能看到如下的截图

控制台会显示：

1

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

备注：不能关闭控制台，保持一直运行状态。打开浏览器，输入 http://localhost:8080 即可访问Cesium.

如果你不想用nodejs

Cesium是一个开源项目，GitHub上的下载地址为：https://github.com/AnalyticalGraphicsInc/cesium 最简单的安装方式，就是普通的JS文件加载，只需要从Github中下载其js代码，放到自己的项目中，在html页面中引用即可。如下：

新建一个helloworld.html:

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


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hello 3D Earth</title>
 <script src="CesiumUnminified/Cesium.js"></script>
 <style>
 @import url(CesiumUnminified/Widgets/widgets.css);
 html, body, #cesiumContainer {
 width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
 }
 </style>
</head>
<body>
 <div id="cesiumContainer"></div>
 <script src="app.js"></script>
</body>
</html>

新建一个app.js

1

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

其中cesiumContainer为html中的地图显示div的id。就是这么简单，浏览器打开上述html页面，便可看到一个三维地球。底图为微软影像只是加载到了三维地球上，包含放大、缩小、平移等基本在线地图功能，同时还包含了时间轴等与时间有关的控件，这是Cesium的一个特色，其地图、对象以及场景等能与时间相关联。

本地的Hello World程序

现在本地的node服务已经运行起来，打开浏览器，输入：http://localhost:8080/Apps/HelloWorld.html. 能看到和官方一模一样的hello wolrd 三维数字地球。

hello World代码分析

官网hello world代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<!DOCTYPE html>
<html lang="en">
<head>
 <!-- Use correct character set. -->
 <meta charset="utf-8">
 <!-- Tell IE to use the latest, best version. -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
 <title>Hello World!</title>
 <script src="../Build/Cesium/Cesium.js"></script>
 <style>
 @import url(../Build/Cesium/Widgets/widgets.css);
 html, body, #cesiumContainer {
 width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
 }
 </style>
</head>
<body>
 <div id="cesiumContainer"></div>
 <script>
 var viewer = new Cesium.Viewer('cesiumContainer');
 </script>
</body>
</html>

以下四个步骤将Cesium加入到html中：

引入Cesium.js，该javascript定义了Cesium object

1

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

导入Cesium Viewer widget的样式

1

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

cesium view存在于该div中

1

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

最终创建cesium viewer

1

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

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/138.html | 快速访问链接：http://cesium.coinidea.com/topic/137.html

[CesiumJS]Cesium入门1 – Cesium介绍

Thu, 09 Aug 2018 03:28:08 +0000

Cesium简介

Cesium官网：https://cesiumjs.org

官网中标题写到：

1

An open-source JavaScript library for world-class 3D globes and maps

Cesium是一款开源的基于JavaScript的3D地图框架。其实他就是一个地图可视化框架

官网中描述写到：

1

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.

CesiumJS 是一款用于创建虚拟场景的3D地理信息平台。目标是用于创建以基于Web的地图动态数据可视化。目前尽力提升平台的性能、准确率、虚拟化能力、易用性以及平台的各种支持。

#数据格式与功能特性 Cesium支持3D Tiles、Terrain and Imagery Layers、3D Models（glTF）、Vectors and Geometry（Load KML, GeoJSON, TopoJSON, and CZML）、Time-Dynamic Visualization、3D, 2D, and 2.5D Columbus View

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

感想

得益于前端技术的发展，HTML5、CSS3的标准制定，各大浏览器厂商对WebGL越来越好的支持，个人计算机内存的增加以及图形显卡的发展，使我看到了我以前一直想做的基于BS的三维数字地球成为现实，十分激动。

综上

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

Cesium中文网交流QQ群：807482793

原文链接：http://cesiumcn.org/topic/137.html | 快速访问链接：http://cesium.coinidea.com/topic/137.html

[cesiumjs]Cesium地球自转的样例代码

Thu, 26 Jul 2018 07:48:41 +0000

分享一下让Cesium地球自转的代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


var i = Date.now();

function rotate() {
 var a = .1;
 var t = Date.now();
 var n = (t - i) / 1e3;
 i = t;
 viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -a * n);
}

viewer.clock.onTick.addEventListener(rotate);
setTimeout(function() {
 viewer.clock.onTick.removeEventListener(rotate);
}, 5000);

[cesiumjs]osgb转Cesium 3D tiles工具

Thu, 26 Jul 2018 07:44:58 +0000

Cesium不支持直接加载倾斜摄影的OSGB数据：

https://www.oschina.net/question/104733_2198017

但是可以通过转换将OSGB数据转换成Cesium可以加载的数据格式。

目前Cesium自己定义支持最好的格式应该是：3D Tiles。这种格式处于发展阶段还不够成熟。但是基于官方的一些Demo可以发现效果还是非常不错的。

3D Tiles在逻辑层，也就是JSON部分增加了FeatureTable和BatchTable，以及LOD(tileset)概念，并对应提供了header(二进制存储)。从数据规范角度来看，继承了glTF优秀的部分，同时考虑了倾斜，点云，后续也会支持OSM，从数据类型的支持上也比较到位。

3D Tiles = glTF + LOD

https://www.cnblogs.com/fuckgiser/p/6565957.html

在开发过程中，通过网上搜索发现了开发者分享出来的一些转换工具：

https://www.v2ex.com/t/402321

https://blog.csdn.net/qq_37796475/article/details/79221939

经过测试发现：

https://download.csdn.net/download/qq_37796475/10274378 这个工具的效果不错。

下载转换工具之后，目录中自带一张操作示例图，如果大家有不明白的地方可以进行留言。

原文链接：http://cesiumcn.org/topic/3.html