cesium添加填充_Cesium中级教程1 - 空间数据可视化（一）

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去做：

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）能看到下面的图像：

ffe98e1d6fe2694bad70d01a307306e1.png

因为我们的一个目标是让Cesium的代码易于理解，希望这是不言自明的。我们创建了Viewer widget，它充当几乎所有Cesium应用程序的基础，然后通过viewer.entities.add. 添加一个新的Entity。我们传递的需add的对象只是一个提供初始值的选项参数。返回值是实际的实体实例。最后，我们调用 viewer.zoomTo 以确保实体处于视图中。

有很多实体选项可用，但是现在我们指定polygon内部的半透明红色和边界的黑色轮廓。我们也给实体一个“Wyoming 怀俄明”的显示名称。

形状和物体

有了创建多边形的基本知识，并且由于实体API的同质性，我们现在可以通过简单地使用Sandcastle中的示例作为参考来创建各种图形。下面是支持的形状和物体的完整列表。

7b966b256c6c0c0c1ff3da210e079111.png

材质和轮廓

不管它们的几何定义如何，所有形状和物体都有一组共同的属性来控制它们的外观。fill属性是一个布尔值，它指定是否填充了表面的内部，而outline属性控制形状的边缘是否被轮廓化。

当fill设为true，material属性决定填充物是什么。在接下来的例子中，让我们创建一个半透明的蓝色椭圆。默认情况下，fill是true，outline是false，所以我们只需要指定material。

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

我们也可以将材质指定为一个图片链接：

ellipse.material = '//cesiumjs.org/tutorials/images/cats.jpg';

8a7beb857eb5a4e8eafde1b9b35d7325.png

在上述两种情况下，在赋值时自动为我们创建一个ColorMaterialProperty属性或ImageMaterialProperty属性。对于更复杂的材料，我们需要自己创建一个材料属性实例。目前，实体形状和物体支持颜色、图像、棋盘、条纹和网格材料。

棋盘

ellipse.material = new Cesium.CheckerboardMaterialProperty({evenColor : Cesium.Color.WHITE,oddColor : color.black - 这个网站可出售。 - 最佳的color 来源和相关信息。,repeat : new Cesium.Cartesian2(4, 4)});

dd885cf0eb883bf5500620fd0db2d3db.png

条纹

ellipse.material = new Cesium.StripeMaterialProperty({evenColor : Cesium.Color.WHITE,oddColor : color.black - 这个网站可出售。 - 最佳的color 来源和相关信息。,repeat : 32});

fe9215cec61e0c341977a843372f552e.png

网格

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)});

4a74f866a93d53179357f9c0596cd356.png

轮廓

与fill属性不同，outline没有相应的材料，而是依赖于两个独立的outlineColor和outlineWidth属性。outlineWidth只适用于非Windows系统，如Android、iOS、Linux和OS X。这是由于WebGL是如何在Windows上的所有三个主要浏览器引擎中实现所限制的。

ellipse.fill = false;ellipse.outline = true;ellipse.outlineColor = Cesium.Color.YELLOW;ellipse.outlineWidth = 2.0;

d731eb5b39675873d55c111ac33891f4.png

折线

折线是一种特殊情况，因为它们没有填充或轮廓属性。相反，他们依靠专门的材料来代替颜色。由于这些特殊材料，不同宽度和轮廓宽度的折线将对所有系统起作用。

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

953fc0965e3ac2bdf74f52291791b89d.png

折线轮廓

polyline.material = new Cesium.PolylineOutlineMaterialProperty({color : Cesium.Color.ORANGE,outlineWidth : 3,outlineColor : color.black - 这个网站可出售。 - 最佳的color 来源和相关信息。});

fcbcc6b3e9a8a4d96c0a95f9cb1004d8.png

折现光晕

polyline.material = new Cesium.PolylineGlowMaterialProperty({glowPower : 0.2,color : color.blue - 这个网站可出售。 - 最佳的color 来源和相关信息。});

682a4d0d128a9c05821e157d98335e2d.png

高度与挤压

覆盖在地球上的所有形状，当前是圆、椭圆、多边形和矩形，也可以放置在海拔高度或挤压成一个物体。在这两种情况下，形状或物体仍然符合其下方的地球曲率。

对于高度，我们所要做的就是在相应的图形对象上设置高度属性，对于上面列出的所有形状都是一样的。这可能是提到Cesium总是使用米、弧度和秒作为单位的好时机，除非函数明确地表示了其他情况，比如Cartesian3.fromDegrees。下面的代码行将多边形提升到地球上方250000米处。

wyoming.polygon.height = 250000;

ed6094f08e86a8cc6a29709b2548194f.png

将形状挤压成物体同样容易，我们只需要设置extrudedHeight属性。物体将在height和extrudedHeight之间产生。如果height是undefined，则物体从0开始。为了创造一个物体从200000米开始，延伸到250000米，我们可以使用下面的代码。这当然意味着物体本身是50000米高。

wyoming.polygon.height = 200000;wyoming.polygon.extrudedHeight = 250000;

ea9fbef931119a1e7836eb0e10b7a181.png

Cesium中文网交流QQ群：807482793

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/428574.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

atomic原子类实现机制_并发编程：并发操作原子类Atomic以及CAS的ABA问题

atomic原子类实现机制_并发编程：并发操作原子类Atomic以及CAS的ABA问题

本文基于JDK1.8Atomic原子类原子类是具有原子操作特征的类。原子类存在于java.util.concurrent.atmic包下。根据操作的数据类型，原子类可以分为以下几类。基本类型AtomicInteger：整型原子类AtomicLong：长整型原子类AtomicBoolean：…
阅读更多...
c# winform窗体如何设置才可以不能随意拖动大小

c# winform窗体如何设置才可以不能随意拖动大小

执行以下两个步骤，能够禁止用户改变窗体的大小 （一）步骤1 设置窗体的FormBorderStyle属性为下列五个值中的任意一个 None：将窗口设置为无边框、无标题栏。用户无法改变窗口的大小，也无法改变窗口显示的位置&#xff1b…
阅读更多...
增加数据_咱晋城人口又增加了？最新数据来了

增加数据_咱晋城人口又增加了？最新数据来了

微信广告合作/13903568008、13663561666近日山西省统计局山西省人口抽样调查办公室联合发布2019年山西省人口变动情况抽样调查主要数据公报全省哪个地市人最多？男女比例如何？……1常住人口根据抽样调查全省人口出生率为9.12‰比上年下降0.51个千分点人口…
阅读更多...
怎么让wegame适应屏幕大小_iOS的五大设计原则：统一化和适应化原则

怎么让wegame适应屏幕大小_iOS的五大设计原则：统一化和适应化原则

昨天米醋跟大家分享了iOS的五大设计原则中凸显内容原则，那么今天我们继续来说说统一化原则和适应化原则。统一化原则统一化原则主要体现在视觉统一和交互统一两个方面。在视觉统一方面，要讲究字体、颜色和元素的统一性，标题字号的统一&#x…
阅读更多...
语言求圆周率近似值改错_新证明解决了如何求无理数的近似值

语言求圆周率近似值改错_新证明解决了如何求无理数的近似值

原文：Kevin Hartnett，QuantaMagazine日前，一份新鲜出炉的论文证明了近80年悬而未决的达芬-谢弗（Duffin-Schaeffer）猜想，让数轴上讳莫如深的部分再也不如表面看来那么遥不可及。达芬-谢弗猜想的证明完美解答…
阅读更多...
谷歌翻译无法连接网络_window10无法连接网络

谷歌翻译无法连接网络_window10无法连接网络

很多朋友都将电脑的系统升级到Win10，如果遇到了Win10系统无法连接网络该如何解决，下面就为大家介绍一下解决的方法。window10无法连接网络一、检查路由器1、重新启动(断电10秒钟) 无线路由器和猫(调制解调器)，有时候是路由器的故障&#xff1…
阅读更多...
获取弹出的窗口_Win7系统如何获取设置everyone权限的问题

获取弹出的窗口_Win7系统如何获取设置everyone权限的问题

一位win7之家系统的小伙伴，想要在电脑系统中获取everyone权限，但是不知道该怎么做，对于Win7电脑如何获取设置everyone权限这个问题，小编觉得我们可以在电脑的计算机中找到相关的磁盘，打开磁盘属性然后在安全选项中进行…
阅读更多...
异步请求中jetty处理ServletRequestListener的坑

异步请求中jetty处理ServletRequestListener的坑

标题起得比较诡异，其实并不是坑，而是jetty似乎压根就没做对异步request的ServletRequestListener的特殊处理，如果文中有错误欢迎提出，可能自己有所疏漏了。 之前遇到了一个bug，在Listener中重写requestDestroyed清理资…
阅读更多...
华为h22h05服务器做raid_华为V5服务器 RAID控制卡(LSI SAS3008IR)

华为h22h05服务器做raid_华为V5服务器 RAID控制卡(LSI SAS3008IR)

提供高速接口和模块LSI SAS3008IR的PCIe Core提供PCIe x8接口，每lane速率为8Gb/s，可以兼容x1、x2、x4配置；支持PCIe 3.0规格，兼容PCIe 2.x和PCIe 1.x。LSI SAS3008IR的SAS模块提供SAS功能，并定义支持的硬盘速率。LSI S…
阅读更多...
css加了固定定位就不显示内容_前端开发必备，学好”定位“向菜鸟说拜拜

css加了固定定位就不显示内容_前端开发必备，学好”定位“向菜鸟说拜拜

众所周知，前端CSS中，盒模型、浮动、定位为必须掌握的三座大山。今天就来聊聊定位的那些事。定位是什么？先来看看哪些场景用到定位，如下图所示，凡是有盒子压住另一个盒子的地方都可定位，因为用浮动做不了&am…
阅读更多...
vscode更换主题的插件_VScode 插件开发（三）主题

vscode更换主题的插件_VScode 插件开发（三）主题

咱们上回书说道，安装完基础环境，我们要来玩自己的主题了1. 创建一个主题项目$ yo code选中 New Color Theme接下来照图中所选，完成项目创建(简单英语不做解释)打开项目如图2. 配置文件2.1 themes这个文件夹包含主题配置文件，可以新…
阅读更多...
软件工程概论课后作业01

软件工程概论课后作业01

1. 网站系统开发需要掌握的技术 ①java语言 Java语言体系比较庞大，包括多个模块。从WEB项目应用角度讲有JSP，Servlet，JDBC，JavaBean（Application）四部分技术。JDBC可做三件事情：与数据库建立连接…
阅读更多...
mysql 参数bug_MySQL 的这个 BUG，坑了多少人？

mysql 参数bug_MySQL 的这个 BUG，坑了多少人？

作者：腾讯数据库技术来源：cloud.tencent.com/developer/article/1367681▌问题描述近期，线上有个重要Mysql客户的表在从5.6升级到5.7后，master上插入过程中出现"Duplicate key"的错误，而且是在主备及RO实例上…
阅读更多...
i9 9900k mysql_i9-9900K和9900KS有什么区别？i9-9900KS和i9-9900K区别对比评测

i9 9900k mysql_i9-9900K和9900KS有什么区别？i9-9900KS和i9-9900K区别对比评测

众所周知，i9-9900KF相当于i9-9900K去除核显的版本，其它参考保持一致，所以在性能上也是相同的。不过在近期，intel牌牙膏厂再一次发布了一款九代酷睿i9-9900KS特别版，从产品型号S后缀上来看，确实有点类似于NV…
阅读更多...
Memory及其controller芯片整体测试方案（上篇）

Memory及其controller芯片整体测试方案（上篇）

如果你最近想买手机，没准儿你一看价格会被吓到手机什么时候偷偷涨价啦！ 其实对于手机涨价，手机制造商也是有苦难言，其中一个显著的原因是存储器芯片价格的上涨↗↗↗ >>> 存储器memory的江湖地位 存储器memory&#xff0…
阅读更多...
BootStrapJS——modal弹出框

BootStrapJS——modal弹出框

学习参考视频https://ninghao.net/video/1615 1.对话框 - Modal 需要bootstrap的CSS文件引入&#xff0c;以及jQuery的js包 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <title>弹窗测试&…
阅读更多...
mysql.ini环境配置_MySQL配置文件mysql.ini参数详解

mysql.ini环境配置_MySQL配置文件mysql.ini参数详解

my.ini(Linux系统下是my.cnf)&#xff0c;当mysql服务器启动时它会读取这个文件&#xff0c;设置相关的运行环境参数。my.ini分为两块&#xff1a;Client Section和Server Section。Client Section用来配置MySQL客户端参数。要查看配置参数可以用下面的命令&#xff1a;show va…
阅读更多...
mysql数据备份在哪里_mysql之数据备份与恢复

mysql数据备份在哪里_mysql之数据备份与恢复

本文内容&#xff1a; 复制文件法利用mysqldump利用select into outfile其它(列举但不介绍)首发日期&#xff1a;2018-04-19有些时候&#xff0c;在备份之前要先做flush tables &#xff0c;确保所有数据都被写入到磁盘中。复制文件法&#xff1a;对于myisam存储引擎的数据库&a…
阅读更多...
python opencv 边缘检测_Python使用Opencv实现边缘检测以及轮廓检测的实现

python opencv 边缘检测_Python使用Opencv实现边缘检测以及轮廓检测的实现

边缘检测Canny边缘检测器是一种被广泛使用的算法&#xff0c;并被认为是边缘检测最优的算法&#xff0c;该方法使用了比高斯差分算法更复杂的技巧&#xff0c;如多向灰度梯度和滞后阈值化。Canny边缘检测器算法基本步骤&#xff1a;平滑图像&#xff1a;通过使用合适的模糊半径…
阅读更多...
web程序入门五（http无状态）

web程序入门五（http无状态）

Asp.net中的状态保持方案&#xff1a; ViewState&#xff1a;是donet特有的 微软提供的对象来完成状态保持 ViewState["key1"] 11; 赋值 键值对 形式 object类型 ViewState["key1"] 直接取值&#xff0c;将其转化成相应的类型 原理&#xff1a;本质…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023