Cesium案例解析(七)——Layers在線地圖服務

1. 概述

Cesium提供了一些在線地圖服務的案例，這些案例都特別簡單，只用幾行代碼就可以了。因此將他們整合成一個案例。

2. 案例

2.1. Blue Marble

託管在Cesium ion上的影像Blue Marble Next Generation影像：

//Blue Marble Next Generation July, 2004 imagery from NASA and hosted by Cesium ion.
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.IonImageryProvider({ assetId: 3845 })
});

運行效果如下：

2.2. ArcGIS地形

發佈在ArcGIS Server上的瓦片地形服務：

//Add terrain from an ArcGIS Server.
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : new Cesium.ArcGISTiledElevationTerrainProvider({
        url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'
    })
});

將其視角調整到喜馬拉雅山區：

2.3. Cesium地形

Cesium官方託管在ion上的地形服務，據說分辨率比較高：

//High-resolution global terrain tileset curated from several datasources and hosted by Cesium ion.
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

將其視角調整到美國大峽谷：

2.4. Natural Earth II

託管在Cesium ion上的影像Natural Earth II影像:

// Natural Earth II with Shaded Relief, Water, and Drainages from http://www.naturalearthdata.com
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.IonImageryProvider({ assetId: 3813 })
});

運行效果如下：

2.5. Earth at Night

託管在Cesium ion上的地球夜景圖:

// The Earth at Night, also known as Black Marble 2017 and Night Lights
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.IonImageryProvider({ assetId: 3812 })
});

運行效果如下：

2.6. Sentinel-2

託管在Cesium ion上的Sentinel-2影像,能夠達到10~60米的分辨率：

// Sentinel-2 (mostly) cloudless global imagery between 10 and 60 meter resolution.
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 })
});

運行效果如下：

2.7. Washington DC 2017

託管在Cesium ion上的Washington DC 2017影像(District of Columbia)，有0.08米的分辨率：

// 3 inch/0.08 meter pixel resolution imagery of the District of Columbia. Hosted by Cesium ion
var viewer = new Cesium.Viewer('cesiumContainer');

var imageryLayer = viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3827 }));
viewer.flyTo(imageryLayer);

運行效果如下：