Cesium图像层(三)
图像层
Cesium支持从多个标准服务中绘制和分层高分辨率图像(地图)。图层可以订购,并混合在一起。每层的亮度,对比度,伽玛,色调和饱和度都可以动态改变。本教程介绍图像层概念和相关的Cesium API。
快速开始
让我们暂时忽略细节,然后通过编写代码来添加几个图像层。在Sandcastle中打开Hello World示例。此示例创建一个Viewer
小部件,默认情况下,该小部件具有单个图层渲染Bing地图图像。我们可以通过向Viewer
构造函数提供额外的参数来指定不同的基础层。我们使用Esri ArcGIS MapServer中的图层:
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}),
baseLayerPicker : false
});
修改示例后,按F8运行它。
我们可以放大和缩小,并根据需要流入图层。
接下来,添加另一个图层:使用Tile Map Service(TMS)提供的NASA Black Marble图像:
var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.createTileMapServiceImageryProvider({
url : '//cesiumjs.org/tilesets/imagery/blackmarble',
maximumLevel : 8,
credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));
由于它是最后添加的,涵盖了全球的范围,黑色大理石层覆盖了Esri层。我们可以将黑色大理石移动到底部layers.lower(blackMarble);
,但是我们可以将它与Esri层混合,以便更好地理解这两层之间的关系:
blackMarble.alpha = 0.5; // 0.0 is transparent. 1.0 is opaque.
接下来,增加灯光的亮度:
blackMarble.brightness = 2.0; // > 1.0 increases brightness. < 1.0 decreases.
要完成,请添加第三个图层,以便在特定范围内绘制单个图像。
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));
完整的代码是:
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
url : '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}),
baseLayerPicker : false
});
var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
url : '//cesiumjs.org/tilesets/imagery/blackmarble',
maximumLevel : 8,
credit : 'Black Marble imagery courtesy NASA Earth Observatory'
}));
blackMarble.alpha = 0.5; // 0.0 is transparent. 1.0 is opaque.
blackMarble.brightness = 2.0; // > 1.0 increases brightness. < 1.0 decreases.
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
}));
查看Sandcastle中的完整示例。
接下来,我们将更详细地介绍最重要的图像层功能。首先,我们将看看支持多种访问图像标准的图像提供商。
随时可用的图像
Sandcastle中的“ 离子属性”选项卡包含由Cesium离子托管的图像tilesets,可通过几行代码将其添加到基于铯的应用程序中。
图像提供商
像上面使用的前两个图层一样的高分辨率图像太大,不适合内存或通常甚至是单个磁盘,因此图像会分成较小的图像(称为图块),根据视图的需要可以根据需要将图像流式传输到客户端。Cesium支持使用图像提供程序请求切片的多种标准。大多数图像提供商通过HTTP 使用REST接口来请求切片。图像提供者根据请求的格式以及图块的组织方式而有所不同。铯具有以下图像提供者:
- Web地图服务(WMS) – 一种OGC标准,用于从分布式地理空间数据库请求地理区域的地图图块。在Cesium中,请参阅WebMapServiceImageryProvider。
- 瓷砖地图服务(TMS) – 用于访问地图瓷砖的REST界面。瓷砖可以使用MapTiler或GDAL2Tiles生成。在Cesium中,请参阅TileMapServiceImageryProvider。
- OpenGIS Web地图拼贴服务(WMTS) – 一种OGC标准,用于通过Internet提供预渲染地理参考地图拼贴。在Cesium中,请参阅WebMapServiceImageryProvider。
- OpenStreetMap – 访问OpenStreetMap切片或任何Slippy地图切片。有几种方法来托管这些瓷砖。在Cesium中,请参阅createOpenStreetMapImageryProvider。
- Bing地图 – 使用Bing地图REST服务访问切片。Bing地图密钥可以在https://www.bingmapsportal.com/上创建。在Cesium中,请参阅BingMapsImageryProvider。
- Esri ArcGIS MapServer – 使用ArcGIS Server REST API访问由ArcGIS MapServer托管的图块。在Cesium中,请参阅ArcGisMapServerImageryProvider。
- Google地球企业版 – 提供对组织的Google地球企业版服务器中存储的图像的访问。在Cesium中,请参阅GoogleEarthImageryProvider。
- Mapbox – 使用Mapbox API访问切片。创建一个帐户并提供您的访问令牌。在Cesium中,请参阅MapboxImageryProvider。
- 标准图像文件 – 从单个图像创建一个图块。在Cesium中,请参阅SingleTileImageryProvider。
- 自定义切片方案 – 使用UrlTemplateImageryProvider,我们可以使用URL模板连接到各种图像源。例如,TMS的URL模板是
//cesiumjs.org/tilesets/imagery/naturalearthii/{z}/{x}/{reverseY}.jpg
。 - 瓦片坐标 – 通过在每个瓦片周围绘制边框并用其级别,X和Y坐标标记,显示地球在特定瓦片方案中如何划分为瓦片。
我们可以通过实现ImageryProvider接口来访问其他图像服务。如果你这样做,并认为它通常是有用的,请为它贡献给铯为每个人的利益。
有关如何构建特定图像提供者的信息,请参阅参考文档。我们将在这里查看SingleTileImageryProvider,因为许多图像提供者共享其构建属性:
url
– 图像的网址。像许多图像提供商一样,这是唯一必需的属性。在其他图像提供商中,该网址指向服务器或服务的根网址。extent
– 图像应包含的可选经纬度矩形。默认是覆盖整个地球。credit
– 一个可选字符串,用于记录显示在画布上的数据源。一些图像提供商,如BingMapsImageryProvider和ArcGIS Server REST API,直接从他们的服务中获得信用徽标或字符串。proxy
– 一个可选的代理服务器的请求,这使我们跨源资源共享。
跨源资源共享
作为一项安全措施,今天的网页浏览器不遗余力地阻止Javascript代码读取来自不同网站的图像像素。特别是,像Cesium这样的WebGL应用程序,如果这些图像(我们的例子中的图像块)来自不同的主机名或端口,并且服务器没有明确允许以这种方式使用图像,则禁止将图像用作纹理。服务器指示图像不包含机密信息,因此通过在HTTP响应中包含跨源资源共享(CORS)标头,其他站点可以安全地读取它们的像素。
不幸的是,并非所有图像服务都支持CORS。对于那些不需要的,必须使用与托管Cesium的网站位于同一起源的代理服务器。当使用这样一个代理时,网页浏览器和Cesium客户端会出现切片,就好像它们来自基于Cesium的网站一样。要为图像提供者使用代理,请proxy
在构建图像提供者时使用该属性。Cesium包含一个用Node.js编写的用于开发目的的简单代理。
layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
url : '//server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
proxy : new Cesium.DefaultProxy('/proxy/')
}));
如果您主持公共图像,我们鼓励按照此处所述启用CORS,而不是使用代理。
图像提供者与图层
到目前为止,我们还没有明确区分图像提供者和图层。图像提供者使用特定服务发出图块请求,而图层代表图像提供者显示的图块。代码像
var layer = layers.addImageryProvider(imageryProvider);
是速记
var layer = new ImageryLayer(imageryProvider);
layers.add(layer);
我们通常构建一个图像提供商只需创建一个图层,然后我们操作层使用像它的属性来更改其外观show
,alpha
,brightness
,和contrast
。请参阅ImageryLayer。对图像提供者和图层进行解耦使得编写新的图像提供者变得更加容易。
一个影像层收集,象layers
在上述例子中,确定在其中的层绘制顺序。根据它们添加的顺序,图层从下到上绘制。成像层的集合被操纵等使用的功能,如在铯任何其他集合add
,remove
和get
。此外,层可使用被重新排序raise
,raiseToTop
,lower
,和lowerToBottom
。请参阅ImageryLayerCollection。
资源
在Sandcastle中检出图像层示例:
另外,请查阅参考文件: