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设为truematerial属性决定填充物是什么。在接下来的例子中,让我们创建一个半透明的蓝色椭圆。默认情况下,filltrueoutlinefalse,所以我们只需要指定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没有相应的材料,而是依赖于两个独立的outlineColoroutlineWidth属性。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属性。物体将在heightextrudedHeight之间产生。如果heightundefined,则物体从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问题

本文基于JDK1.8Atomic原子类原子类是具有原子操作特征的类。原子类存在于java.util.concurrent.atmic包下。根据操作的数据类型,原子类可以分为以下几类。基本类型AtomicInteger:整型原子类AtomicLong:长整型原子类AtomicBoolean:…

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

执行以下两个步骤,能够禁止用户改变窗体的大小 (一)步骤1 设置窗体的FormBorderStyle属性为下列五个值中的任意一个 None:将窗口设置为无边框、无标题栏。用户无法改变窗口的大小,也无法改变窗口显示的位置&#xff1b…

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

微信广告合作/13903568008、13663561666近日山西省统计局山西省人口抽样调查办公室联合发布2019年山西省人口变动情况抽样调查主要数据公报全省哪个地市人最多?男女比例如何?……1常住人口根据抽样调查全省人口出生率为9.12‰比上年下降0.51个千分点人口…

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

昨天米醋跟大家分享了iOS的五大设计原则中凸显内容原则,那么今天我们继续来说说统一化原则和适应化原则。统一化原则统一化原则主要体现在视觉统一和交互统一两个方面。在视觉统一方面,要讲究字体、颜色和元素的统一性,标题字号的统一&#x…

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

原文:Kevin Hartnett,QuantaMagazine日前,一份新鲜出炉的论文证明了近80年悬而未决的达芬-谢弗(Duffin-Schaeffer)猜想,让数轴上讳莫如深的部分再也不如表面看来那么遥不可及。达芬-谢弗猜想的证明完美解答…

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

很多朋友都将电脑的系统升级到Win10,如果遇到了Win10系统无法连接网络该如何解决,下面就为大家介绍一下解决的方法。window10无法连接网络一、检查路由器1、重新启动(断电10秒钟) 无线路由器和猫(调制解调器),有时候是路由器的故障&#xff1…

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

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

异步请求中jetty处理ServletRequestListener的坑

标题起得比较诡异,其实并不是坑,而是jetty似乎压根就没做对异步request的ServletRequestListener的特殊处理,如果文中有错误欢迎提出,可能自己有所疏漏了。 之前遇到了一个bug,在Listener中重写requestDestroyed清理资…

华为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中,盒模型、浮动、定位为必须掌握的三座大山。今天就来聊聊定位的那些事。定位是什么?先来看看哪些场景用到定位,如下图所示,凡是有盒子压住另一个盒子的地方都可定位,因为用浮动做不了&am…

vscode更换主题的插件_VScode 插件开发(三)主题

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

软件工程概论课后作业01

1. 网站系统开发需要掌握的技术 ①java语言 Java语言体系比较庞大,包括多个模块。从WEB项目应用角度讲有JSP,Servlet,JDBC,JavaBean(Application)四部分技术。JDBC可做三件事情:与数据库建立连接…

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-9900KF相当于i9-9900K去除核显的版本,其它参考保持一致,所以在性能上也是相同的。不过在近期,intel牌牙膏厂再一次发布了一款九代酷睿i9-9900KS特别版,从产品型号S后缀上来看,确实有点类似于NV…

Memory及其controller芯片整体测试方案(上篇)

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

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参数详解

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

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

本文内容&#xff1a; 复制文件法利用mysqldump利用select into outfile其它(列举但不介绍)首发日期&#xff1a;2018-04-19有些时候&#xff0c;在备份之前要先做flush tables &#xff0c;确保所有数据都被写入到磁盘中。复制文件法&#xff1a;对于myisam存储引擎的数据库&a…

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

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

web程序入门五(http无状态)

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