Cesium中的地图服务

09-Cesium中的地图服务

Cesium最基本的功能就是构建地球场景，这就离不开地图服务功能，Cesium能提供方便的地图服务。可以在初始化的时候就加载地图，也可以在后期调用。
在Cesium中，ImageryProvider是用于提供地球表面图像的接口。Cesium支持多种类型的ImageryProvider，每种类型的提供器都支持不同的地图服务和数据源。以下是Cesium中常用的ImageryProvider分类：

ArcGisMapServerImageryProvider：用于连接Esri的ArcGIS Map Server服务，支持多种地图服务，如矢量地图、卫星地图、地形地图等。

BingMapsImageryProvider：用于连接Bing Maps服务，支持全球卫星地图、道路地图、混合地图等。

GoogleEarthImageryProvider：用于连接Google Earth服务，支持卫星地图、道路地图、地形地图等。

SingleTileImageryProvider：用于加载单张静态图像作为图层，常用于加载静态地图或地形数据。

TileCoordinatesImageryProvider：用于加载预定义范围内的切片地图数据，可用于自定义地图数据源。

TileMapServiceImageryProvider：用于连接标准的WMTS（Web Map Tile Service）服务，支持多种地图服务，如OpenStreetMap、Mapbox等。

UrlTemplateImageryProvider：用于加载可变地址的切片地图数据，常用于自定义地图数据源。

以下是Cesium中常用的ImageryProvider分类及其代码实现

ArcGisMapServerImageryProvider
许多情况下使用的是arcgis的在线地图，而在Cesium中预留了此方法用于展示arcgis在线地图，连接Esri的ArcGIS Map Server服务，支持多种地图服务，如矢量地图、卫星地图、地形地图等。

const imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
});

viewer.imageryLayers.addImageryProvider(imageryProvider);

• BingMapsImageryProvider

用于连接Bing Maps服务，支持全球卫星地图、道路地图、混合地图等。

const imageryProvider = new Cesium.BingMapsImageryProvider({
    url: 'https://dev.virtualearth.net',
    key: 'Your Bing Maps Key',
    mapStyle: Cesium.BingMapsStyle.AERIAL_WITH_LABELS
});

viewer.imageryLayers.addImageryProvider(imageryProvider);

• MapboxStyleImageryProvider

用于连接Mapbox服务，支持全球卫星地图、道路地图、混合地图等

let layer_mapbox = new Cesium.MapboxStyleImageryProvider({
     url: "https://api.mapbox.com/styles/v1",
     username: "18251827232",
     styleId: "cl25yd6a400f314nuqan9i8hi",
     accessToken: "pk.eyJ1IjoiMTgyNTE4MjcyMzIiLCJhIjoiY2wyNGY4bmdvMTM3ZjNqbzUxbWc1Yml5dyJ9.gP_TR5sxxKYeHelFzQnrvA",
     scaleFactor: true
});
viewer.imageryLayers.addImageryProvider(layer_mapbox);

• UrlTemplateImageryProvider

指定 url 的 format 模版，方便用户实现自己的 Provider。比如腾讯、高德等地图影像服务，它们都有固定的 url 规范，都可以通过该 Provider 轻松实现想要的功能。

let layer = new Cesium.UrlTemplateImageryProvider({
    url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
});
viewer.imageryLayers.addImageryProvider(layer);