Cesium图像层(三)

admin0条评论 7,928 次浏览

图像层

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运行它。

ESRI

我们可以放大和缩小,并根据需要流入图层。

接下来,添加另一个图层:使用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.

带有alpha的图层

接下来,增加灯光的亮度:

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接口来请求切片。图像提供者根据请求的格式以及图块的组织方式而有所不同。铯具有以下图像提供者:

我们可以通过实现ImageryProvider接口来访问其他图像服务。如果你这样做,并认为它通常是有用的,请贡献给铯为每个人的利益。

有关如何构建特定图像提供者的信息,请参阅参考文档。我们将在这里查看SingleTileImageryProvider,因为许多图像提供者共享其构建属性:

  • url – 图像的网址。像许多图像提供商一样,这是唯一必需的属性。在其他图像提供商中,该网址指向服务器或服务的根网址。
  • extent – 图像应包含的可选经纬度矩形。默认是覆盖整个地球。
  • credit – 一个可选字符串,用于记录显示在画布上的数据源。一些图像提供商,如BingMapsImageryProviderArcGIS 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);

我们通常构建一个图像提供商只需创建一个图层,然后我们操作层使用像它的属性来更改其外观showalphabrightness,和contrast。请参阅ImageryLayer。对图像提供者和图层进行解耦使得编写新的图像提供者变得更加容易。

一个影像层收集,象layers在上述例子中,确定在其中的层绘制顺序。根据它们添加的顺序,图层从下到上绘制。成像层的集合被操纵等使用的功能,如在铯任何其他集合addremoveget。此外,层可使用被重新排序raiseraiseToToplower,和lowerToBottom。请参阅ImageryLayerCollection

资源

在Sandcastle中检出图像层示例:

  • 图像层 – 本教程中的代码示例。
  • 图像图层操作 – 从多个来源图层图像,并独立调整每个图像的阿尔法。
  • 图像调整 – 调整图像层的亮度,对比度,伽玛,色调和饱和度。

另外,请查阅参考文件:


分类目录