Cesium中级教程2 - 图层

最新推荐文章于 2025-09-09 16:42:28 发布

原创

最新推荐文章于 2025-09-09 16:42:28 发布 · 2.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#cesium #cesiumjs #GIS #三维GIS

本文是Cesium中级教程的第二部分，主要讲解如何在Cesium中添加和管理图层，包括ImageryProvider的概念，跨域资源共享（CORS）的重要性，以及如何使用不同类型的图层服务，如WMS、TMS和Bing Maps等。

Cesium中文网：http://cesiumcn.org/ | 国内快速访问：http://cesium.coinidea.com/
Cesium支持从几个标准服务绘制和添加高分辨率图像（地图）图层。图层可以按顺序排列，并混合在一起。每一层的亮度、对比度、伽玛、色调和饱和度可以动态地改变。本节教程介绍了图层的概念以及相关的Cesuim APIs。

快速入门

我们暂时忽略细节，直接编写代码来添加一些图像层。在Sandcastle中打开Hello World示例。此示例创建一个Viewer组件，默认情况下，该组件呈现Bing Maps图层。我们可以通过向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来运行：

[外链图片转存失败(img-c31c79B6-1563172282156)(https://i.loli.net/2018/12/21/5c1c8b504285c.png)]

我们可以通过滑动鼠标滚轮放缩，来看到实际的图层流的变化。

接下来, 添加另一个图层: NASA Black Marble imagery 基于 Tile Map Service (TMS):

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'
}));