您的位置:首页 > 其它

[置顶] cesium学习记录(-)- 可视化空间数据Entity入门基础

2017-12-18 11:22 686 查看
cesium 官网 https://cesiumjs.org
火星科技(基于cesium 的综合服务系统) http://www.marsgis.cn
台北综合系统(基于cesium 的城市综合系统)https://3d.taipei/

可视化空间数据

This tutorial will teach you how to use Cesium’s Entity API for drawing spatial data such as points, markers, labels, lines, models, shapes, and volumes. No prior
knowledge of Cesium is needed, but if you have absolutely no experience with it, you might want to start with our first tutorial

本教程将教会你如何是使用Cesium 的Entity API 来绘制空间数据,诸如:points, markers, labels, lines, models, shapes以及volumes。本教程完全不需要您有关于Cesium 的知识储备,但是如果您是完全没有经验,您可以试着从我们最简单的demo 开始学习。Cesium
up and running。

什么是Entity API

Cesium has a rich API for spatial data that can be split into two categories:
a low-level API geared towards graphics developers, commonly referred to as the Primitive API, and a high-level API for data-driven visualization, referred to as the Entity API.

cesium
包含了丰富的API文档,主要分成了两大类:一类是面向图形开发人员低层次API,通常我们称他为Primitiva API。另外一类是驱动数据可视化的高层次API,我们称他们为Entity API。

The Primitive API’s primary goal is to expose the minimal amount of abstraction needed to perform the task at hand. It expects us to think like a graphics programmer and uses graphics terminology. It is structured to provide the most performant and flexible
implementation for a given visualization type, not for API consistency. Loading a Model is different from creating a Billboard and both are radically different from creating a Polygon. Each type of visualization is its own distinct feature. Furthermore, they
each have different performance characteristics and require different best practices to be followed. While it is powerful and flexible, most applications are better served with a higher level of abstraction than what is offered by the Primitive API.

Primitive API的主要目标是公开完成手头任务所需的最小抽象量。它期望我们像图形程序员一样思考,并使用图形术语。它的结构是为给定的可视化类型提供最高性能和灵活的实现,而不是为了API的一致性。加载一个模型与创建一个广告牌不同,两者都与创建一个多边形截然不同。每种类型的可视化都是它自己独特的特性。此外,它们各自具有不同的性能特征,需要遵循不同的最佳实践。虽然它强大而灵活,但是大多数应用程序的抽象级别比Primitive API提供的抽象级别更高。

The goal of the Entity API is to expose a set of consistently designed high-level objects that aggregate related visualization and information into a unified data structure, which we call an Entity.
It lets us concentrate on the presentation of our data rather than worrying about the underlying mechanism of visualization. It also provides constructs for easily building complex, time-dynamic visualization in a way that fits naturally alongside static data.
While the Entity API actually uses the Primitive API under the hood, that’s an implementation detail we will (almost) never have to concern ourselves with. By applying various heuristics to the data we give it, the Entity API is able to provide flexible, high-performance
visualization while exposing a consistent, easy to learn, and easy to use interface.
Entity API的目标是公开一组一致设计的高级对象,这些对象将相关的可视化和信息聚合到一个统一的数据结构中,我们称之为Entity。它让我们专注于数据的呈现,而不是担心可视化的底层机制。它还提供了一些构造,以方便地构建复杂的、时间动态的可视化,这与静态数据很自然地吻合。虽然Entity API实际上使用了底层API,但这是我们将(几乎)永远不用关心的实现细节。通过对我们提供的数据应用各种各样的启发式方法,Entity API能够提供灵活的、高性能的可视化,同时公开一个一致的、易于学习的、易于使用的界面。
我们的第一个Entity 程序

One of the best ways to learn the basics of the Entity API is by looking at some code. In order to keep things simple, we’re going to build on the Hello
World example in Cesium Sandcastle. If you are set up to develop with Cesium locally, feel free to use your own application instead.

学习Entity 的最有效的方法是试着就看一写代码。为了使得这一切变得很简单我们将会在Cesium 的Sandcastle 下创建Hello World example以方便学习者的查看。如果您本地已经安装了Cesium的运行环境,可以尝试着在自己的应用程序上做简单的开发试验。

Suppose we wanted to add a polygon for the US state of Wyoming from a list of longitude and latitude degrees. (Wyoming was chosen because it’s such a simple polygon.) We can copy and paste the below code into Sandcastle to do it:

假设我们想要从经度和纬度的列表中为美国怀俄明州添加一个多边形。(之所以选择怀俄明州,是因为它是一个简单的多边形。)我们可以将下面的代码复制粘贴到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键),我们可以看到下面的场景:

·············

·

实例二:

HTML code:

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

<script src="../Sandcastle/Sandcastle-header.js"></script> <script src="../Sandcastle/Sandcastle-client.js"></script>
<style>
@import url(../../Build/Cesium/Widgets/widgets.css);
@import url(../../Apps/Sandcastle/templates/0.css);

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

</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<div id="terrainMenu"></div>
<div id="zoomButtons"></div>
<div id="toggleLighting"></div>
<div id="sampleButtons"></div>
</div>

<script>


javascript code:

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

var cesiumTerrainProvider = new Cesium.CesiumTerrainProvider({
url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
requestWaterMask : false,
requestVertexNormals : true
});

viewer.terrainProvider = cesiumTerrainProvider;
viewer.scene.globe.depthTestAgainstTerrain = true;

var e = viewer.entities.add({
corridor : {
positions : Cesium.Cartesian3.fromDegreesArray([
-122.19, 46.1914,
-122.21, 46.21,
-122.23, 46.21
]),
width : 2000.0,
material : Cesium.Color.GREEN.withAlpha(0.5)
}
});
viewer.zoomTo(e);

Sandcastle.reset = function () {
viewer.entities.removeAll();
};


编译运行之后的效果:



Since one of our goals is to make Cesium code easy to understand, hopefully the above is self explanatory. We create the Viewer
widget, which serves as the base for almost all Cesium applications, and then add a new Entity via viewer.entities.add.
The object we pass to add is just an options parameter which provides initial
values. The return value is the actual entity instance. Finally, we call viewer.zoomTo to
make sure the entity is in view.

因为我们的目标之一是让Cesium代码易于理解,希望上面的代码是不言而喻的。我们创建了Viewer小部件,它是几乎所有的Cesium应用程序的基础,然后通过Viewer.enti.add添加一个新的Entity。我们传递给添加的对象只是一个选项参数,它提供初始值。返回值是实际的Entity实例。最后,我们调用viewer.zoomTo以确保实体在视图中。

There are an incredible amount of Entity options available, but for now we specify translucent red for the interior of the polygon and
a black outline for the border. We also give the entity a display name of “Wyoming”.

实际上Entity 有很多的参数可以用,但是我们现在只是提供了一个内红外面是黑边的轮廓。我们也给了这Entity个显示名称“Wyoming”。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: