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，一经查实，立即删除！

相关文章

高可用-软件heartbeat的入门介绍

高可用-软件heartbeat的入门介绍

注:参考互联网整理. 一、简介Linux-HA的全称是High-Availability Linux，它是一个开源项目，这个开源项目的目标是：通过社区开发者的共同努力，提供一个增强linux可靠性（reliability）、可用性（avai…
阅读更多...
图论板子——迪杰斯特拉（堆优化）

图论板子——迪杰斯特拉（堆优化）

bool st[N];//是否加入图 int d[N];//到起点的距离 void dj(int S,int T)//从S到T {priority_queue<PII,vector<PII>,greater<PII> > q;q.push({0,S});memset(d,0x3f,sizeof d);d[S] 0;while (!q.empty()){auto it q.top();q.pop();int ver it.second;if …
阅读更多...
atomic原子类实现机制_并发编程：并发操作原子类Atomic以及CAS的ABA问题

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

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

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

执行以下两个步骤&#xff0c;能够禁止用户改变窗体的大小 &#xff08;一&#xff09;步骤1 设置窗体的FormBorderStyle属性为下列五个值中的任意一个 None&#xff1a;将窗口设置为无边框、无标题栏。用户无法改变窗口的大小&#xff0c;也无法改变窗口显示的位置&#xff1b…
阅读更多...
图论板子——spfa

图论板子——spfa

bool st[N];//是否在队列中 int d[N];//到起点的距离 void dj(int S,int T)//从S到T {queue<int>q;q.push(S);memset(d,0x3f,sizeof d);d[S] 0;while (!q.empty()){int ver q.front();q.pop();st[ver] false;//出队for (int i h[ver];i ! -1;i h[i]){int x e[i];in…
阅读更多...
增加数据_咱晋城人口又增加了？最新数据来了

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

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

图论模板——最大流问题

Dinic算法的时间复杂度为O&#xff08;n^2m&#xff09;。实际运用远远小于这个上界。 特别的&#xff0c;Dinic算法求解二分图最大匹配的时间复杂度为O&#xff08;msqrt&#xff08;n&#xff09;&#xff09; 最大流问题模板 #include <bits/stdc.h> using namespace…
阅读更多...
python简述目录_Python源码下载和目录简介(示例代码)

python简述目录_Python源码下载和目录简介(示例代码)

Python源码下载和目录简介一、Python源码下载1、Linux操作系统下使用终端命令下载&#xff1a;wget https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz // 获取源码压缩包tar -xf Python-3.7.4.tgz // 解压2、非Linux操作系统下载&#xff1a;(2)滑到最下面&#xff0…
阅读更多...
Linux之Ubuntu安装搜狗输入法

Linux之Ubuntu安装搜狗输入法

1.下载搜狗输入法安装包 搜狗官网&#xff1a;https://pinyin.sogou.com/linux/ 2.更新ubuntu内置的包管理器apt-get的软件源[如果中途安装失败&#xff0c;经常是此原因造成的] sudo apt-get update sudo aot-get upgrade //如果有需要的话 3.dpkg -i &#xff08;下载搜狗下来…
阅读更多...
数据结构板子——splay

数据结构板子——splay

维护数列 https://www.acwing.com/problem/content/957/ 线段树能写的splay都能写&#xff0c;不过splay常数较大。时间复杂度大概是线段树的三倍 #include<bits/stdc.h> using namespace std; const int N 500010,INF 1e9; int n,m; struct Node {int s[2],p,v;int r…
阅读更多...
怎么让wegame适应屏幕大小_iOS的五大设计原则：统一化和适应化原则

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

昨天米醋跟大家分享了iOS的五大设计原则中凸显内容原则&#xff0c;那么今天我们继续来说说统一化原则和适应化原则。统一化原则统一化原则主要体现在视觉统一和交互统一两个方面。在视觉统一方面&#xff0c;要讲究字体、颜色和元素的统一性&#xff0c;标题字号的统一&#x…
阅读更多...
23种设计模式之原型模式代码实例

23种设计模式之原型模式代码实例

原型模式就是利用一个克隆”原型“来产生新对象的一种模式&#xff0c; 克隆又分浅克隆与深克隆&#xff0c; 浅克隆&#xff1a;将一个对象复制后&#xff0c;基本数据类型的变量都会重新创建&#xff0c;而引用类型&#xff0c;指向的还是原对象所指向的。 深克隆&#xff1a…
阅读更多...
图论模板——费用流（无法处理负环）

图论模板——费用流（无法处理负环）

费用流 https://www.acwing.com/problem/content/2176/ //最大流的最小费用 #include<bits/stdc.h> using namespace std;const int N 5010, M 100010, INF 1e8;int n,m,S,T; int ne[M],e[M],f[M],w[M],h[N],idx; int q[N],d[N],pre[N],incf[N]; bool st[N];void add…
阅读更多...
css调用外部字体

css调用外部字体

CSS中可以使用font-face属性即可实现调用任何外部等特殊字体。 font-face属性介绍及其实例&#xff1a; 对浏览器的支持&#xff1a; Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。 Internet Explorer 9 支持新的 fo…
阅读更多...
python注入点查找_sqlmap常用注入点检测爆破命令

python注入点查找_sqlmap常用注入点检测爆破命令

1、检测注入点是否可用python sqlmap.py -u "url"2、从目标url爆破所有数据库名python sqlmap.py -u "url" --dbs3、从目标url爆破当前数据库名python sqlmap.py -u "url" --current-dbs4、列出数据库所有用户python sqlmap.py -u "url&quo…
阅读更多...
python如何输入空行_在python中，如何在接受用户输入时跳过空行？

python如何输入空行_在python中，如何在接受用户输入时跳过空行？

您得到的行为是预期的&#xff0c;请阅读input文档。在input([prompt])If the prompt argument is present, it is written to standard output without a trailing newline. The function then reads a line from input, converts it to a string (stripping a trailing newli…
阅读更多...
js层级选择框样式_【JavaWeb】85：jQuery的各种选择器

js层级选择框样式_【JavaWeb】85：jQuery的各种选择器

今天是刘小爱自学Java的第85天。感谢你的观看&#xff0c;谢谢你。话不多说&#xff0c;开始今天的学习&#xff1a;选择器的作用是什么&#xff1f;可以快速准确地定位我们所需要的标签。刚学CSS的时候&#xff0c;觉得CSS选择器也太多了吧&#xff0c;直到今天学了jQuery选择…
阅读更多...
python的单例模式

python的单例模式

单例模式(Singleton Pattern)&#xff0c;是一种软件设计模式&#xff0c;是类只能实例化一个对象&#xff0c; 目的是便于外界的访问&#xff0c;节约系统资源&#xff0c;如果希望系统中 只有一个对象可以访问&#xff0c;就用单例模式&#xff0c; 显然单例模式的要点有三个…
阅读更多...
c语言自定义输出小数点位数_C语言中输出时怎样控制小数点后的位数，请举例说明......

c语言自定义输出小数点位数_C语言中输出时怎样控制小数点后的位数，请举例说明......

控制2113小数位数就是通过输出格式说明符来规定的举例5261说明如下4102&#xff1a;1、float f13.1415926;2、float f21234.1415926;3、float f3124.1;4、printf("%3.4f",f1);//输出结果为&#xff1a;_ _ 3.1416(_表示空格1653)5、printf("%3.4f",f2);//输…
阅读更多...
语言求圆周率近似值改错_新证明解决了如何求无理数的近似值

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

原文&#xff1a;Kevin Hartnett&#xff0c;QuantaMagazine日前&#xff0c;一份新鲜出炉的论文证明了近80年悬而未决的达芬-谢弗&#xff08;Duffin-Schaeffer&#xff09;猜想&#xff0c;让数轴上讳莫如深的部分再也不如表面看来那么遥不可及。达芬-谢弗猜想的证明完美解答…
阅读更多...
最新文章

Copyright @ 2022~2023