关键词：
[CesiumJS]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）能看到下面的图像：
因为我们的一个目标是让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。
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 examplesImage
我们也可以将材质指定为一个图片链接：
ellipse.material = ‘//cesiumjs.org/tutorials/images/cats.jpg‘;
在上述两种情况下，在赋值时自动为我们创建一个ColorMaterialProperty属性或ImageMaterialProperty属性。对于更复杂的材料，我们需要自己创建一个材料属性实例。目前，实体形状和物体支持颜色、图像、棋盘、条纹和网格材料。
棋盘
ellipse.material = new Cesium.CheckerboardMaterialProperty(
evenColor : Cesium.Color.WHITE,
oddColor : Cesium.Color.BLACK,
repeat : new Cesium.Cartesian2(4, 4)
);
条纹
ellipse.material = new Cesium.StripeMaterialProperty(
evenColor : Cesium.Color.WHITE,
oddColor : Cesium.Color.BLACK,
repeat : 32
);
网格
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上的所有三个主要浏览器引擎中实现所限制的。
ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;
折线
折线是一种特殊情况，因为它们没有填充或轮廓属性。相反，他们依靠专门的材料来代替颜色。由于这些特殊材料，不同宽度和轮廓宽度的折线将对所有系统起作用。
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
折线轮廓
polyline.material = new Cesium.PolylineOutlineMaterialProperty(
color : Cesium.Color.ORANGE,
outlineWidth : 3,
outlineColor : Cesium.Color.BLACK
);
折现光晕
polyline.material = new Cesium.PolylineGlowMaterialProperty(
glowPower : 0.2,
color : Cesium.Color.BLUE
);
高度与挤压
覆盖在地球上的所有形状，当前是圆、椭圆、多边形和矩形，也可以放置在海拔高度或挤压成一个物体。在这两种情况下，形状或物体仍然符合其下方的地球曲率。
对于高度，我们所要做的就是在相应的图形对象上设置高度属性，对于上面列出的所有形状都是一样的。这可能是提到Cesium总是使用米、弧度和秒作为单位的好时机，除非函数明确地表示了其他情况，比如Cartesian3.fromDegrees。下面的代码行将多边形提升到地球上方250000米处。
wyoming.polygon.height = 250000;
将形状挤压成物体同样容易，我们只需要设置extrudedHeight属性。物体将在height和extrudedHeight之间产生。如果height是undefined，则物体从0开始。为了创造一个物体从200000米开始，延伸到250000米，我们可以使用下面的代码。这当然意味着物体本身是50000米高。
wyoming.polygon.height = 200000;
wyoming.polygon.extrudedHeight = 250000;
Cesium中文网交流QQ群：807482793
Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/
cesium简介(代码片段)
...GI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库，Cesium一词来源于化学元素铯，铯是制造原子钟的关键元素，研发小组通过命名强调Cesium产品精益求精，专注时间数据可视化。Cesium为... 查看详情
cesium中级教程10-cesiumjsandwebpack(代码片段)
Cesium中文网：http://cesiumcn.org/|国内快速访问：http://cesium.coinidea.com/webpack是打包JavaScript模块流行且强大的工具。它允许开发人员以直观的方式构造代码和assets，并使用简单的require语句根据需要加载不同类型的文件。构建时，它将... 查看详情
cesium可视化空间数据2
圆柱圆锥体<!DOCTYPEhtml><html><head><!--Usecorrectcharacterset.--><metacharset="utf-8"><!--TellIEtousethelatest,bestversion.--><metahttp-equiv="X-UA-Compatible"conten 查看详情
cesium案例解析——3dtilesphotogrammetry摄影测量3dtiles数据(代码片段)
...格式相比，最大的特点就是包含了分层分户的瓦片，根据可视化需要呈现相应的细节，并且已经被纳入到OGC规范当中。在Cesium的自带示例3DTilesPhotogrammetry中，展示的摄影测量3DTiles数据是通过CesiumIon上托管的，只需要相应的编号... 查看详情
cesium结合geoserver实现地图空间查询(附源码下载)(代码片段)
前言cesium官网的api文档介绍地址cesium官网api，里面详细的介绍cesium各个类的介绍，还有就是在线例子：cesium官网在线例子，这个也是学习cesium的好素材。内容概览1.cesium结合geoserver实现地图空间查询2.源代码demo下载效果图如下：... 查看详情
cesium中级2-图层(代码片段)
Cesium中文网：http://cesiumcn.org/|国内快速访问：http://cesium.coinidea.com/Cesium支持从几个标准服务绘制和添加高分辨率图像（地图）图层。图层可以按顺序排列，并混合在一起。每一层的亮度、对比度、伽玛、色调和饱和度可以动态地... 查看详情
ceisum官方教程3--空间数据可视化
...从第一个教程开始。EntityAPI是什么?Cesium丰富的空间数据可视化API分为两部分：Pr 查看详情
cesium01-初始化(代码片段)
...素，通过命名强调了Cesium产品专注于基于时空数据的实时可视化应用。二、下载Cesium的依赖包 官网：https://cesiumjs.org/三、设置web服务器 Cesium根目录中打开一个命令框， npminstall npmstart或者nodeserver.js启动web服务器... 查看详情
cesium入门13-extras-附加内容(代码片段)
...：http://cesium.coinidea.com/剩下的代码只是添加了一些额外的可视化选项。类似于我们以前与HTML元素的交互，我们可以将侦听器函数附加到切换阴影和neighborhood多边形可见性。让我们开始创建一个简单的方法来切换neighborhood多边形... 查看详情
postgis空间数据导入及可视化(代码片段)
众所周知，postgis是一个开源的高性能空间数据库，其基于postgresql数据库进行扩展，完整支持OGC标准，同时提供了空间管理及空间分析等丰富的函数支撑。当你拿到矢量数据后，为了让大家进行共享数据，... 查看详情
空间数据可视化神器keplergl(代码片段)
...eter~今天给大家介绍一款超赞的空间（地理）数据可视化神器：keplergl。小编最近偶然发现的这个神器是Uber完全开源的，也是Uber内部进行空间数据可视化的默认工具。通过其面向Python开放的接口包keplergl，我们... 查看详情
cesium案例解析——3dtilesinspector监视器(代码片段)
...3D地理空间数据的格式，应对的都是大规模数据的场景，Cesium提供了一个监视3DTiles数据的监视器，可以通过这个监视器观察3DTiles数据的效果。2.案例HTML页面3DTilesInspector.html代码如下：<!DOCTYPEhtml><htmllang="en"><head... 查看详情
百度热搜数据爬取及分析(代码片段)
...ifulSoup解析得到所需要的数据，然后使用matplotlib实现数据可视化分析，最后进行小结。难点：回归直线二、主题页面的结构特征分析1.主题页面的结构与特征分析 获取电动汽车、小型汽车、中级车、豪华车、SUV这五类汽车每... 查看详情
cesium编程中级开篇
cesium编程中级开篇其实初级，中级并无定论，我理解的初级是根据官方教程，先学会如何部署环境，搭建helloworld，使用官方提供的工具，完成一些示例，而中级就是在这些的基础上，自己定制一些内容，或者项目过程中自己的... 查看详情
使用python+folium实现地理空间可视化效果(代码片段)
...Folium库本文重点介绍使用Folium库创建令人印象深刻的地理可视化效果。介绍地理空间可视化是使用地理空间可视化工具和技术来分析地理空间数据。地理空间数据可视化旨在将交互式可视化添加到传统地图中，这有助于在分... 查看详情
docker的容器可视化工具portainer(代码片段)
1.使用dockervolume创建容器外列，create后是外列的名称，即外列的名称是portainer_data主要作用是创建一个空间用来存储已经创建好的容器内的数据，而这个空间和这个容器的关联键就是外列的名称，这样做的好处是如果容器挂掉，... 查看详情
[unity]c#中级编程-10-命名空间/using(代码片段)
[Unity中文课堂教程]C#中级编程-10-命名空间/using原教程视频地址：《[Unity中文课堂教程预告片]C#中级编程_哔哩哔哩_bilibili》《C#中级编程-Unity中文课堂(u3d.cn)》《C#命名空间（Namespace）|菜鸟教程(runoob.com)》内容短小精悍... 查看详情
[unity]c#中级编程-10-命名空间/using(代码片段)
[Unity中文课堂教程]C#中级编程-10-命名空间/using原教程视频地址：《[Unity中文课堂教程预告片]C#中级编程_哔哩哔哩_bilibili》《C#中级编程-Unity中文课堂(u3d.cn)》《C#命名空间（Namespace）|菜鸟教程(runoob.com)》内容短小精悍... 查看详情