BaseLayerPicker

BaseLayerPicker 是一个用于显示地球场景中的底图图层的控件。 用户可以从一组预定义了的底图选项中选择一个。各个底图选项中可以是影像、地形和矢量地图。

创建 BaseLayerPicker

var viewer = new Cesium.Viewer('cesiumContainer');

var baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
    globe: viewer.scene.globe,
    imageryProviderViewModels: Cesium.BaseLayerPicker.DefaultImageryProviderViewModels,
    terrainProviderViewModels: Cesium.BaseLayerPicker.DefaultTerrainProviderViewModels
)};

参数

• container：Element | String 用于容纳控件的DOM元素或DOM元素的ID。
• options：Object 选项对象，包含以下属性：
  • globe：Globe，必须，控件绑定的Globe对象。
  • imageryProviderViewModels：Array[Cesium.ImageryProviderViewModel] 镜像图提供者 一组可以供用户选择的影像底图选项。
  • terrainProviderViewModels：Array[Cesium.TerrainProviderViewModel] 地形提供者 一组可以供用户选择的地形底图选项。

方法

• isDestroyed()：Boolean，控件是否已被销毁。销毁操作可在页面关闭或者应用移动端切换至后台时进行。
• destroy()：销毁此控件并释放与此控件相关联的所有资源。

示例

下面的示例展示了如何创建一个具有自定义选项的 BaseLayerPicker 控件：

var viewer = new Cesium.Viewer('cesiumContainer');

var imageryTitle = 'Mapbox Streets V8';
var imageryUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN';
var imagery = new Cesium.MapboxImageryProvider({
    url: imageryUrl,
    mapId: imageryTitle,
    accessToken: 'MY_ACCESS_TOKEN'
});
var imageryViewModel = new Cesium.ProviderViewModel({
    name: imageryTitle,
    iconUrl: Cesium.buildModuleUrl('/images/cesium_icon.png'),
    tooltip: imageryTitle,
    creationFunction: function() {
        return imagery;
    }
});

var terrainTitle = 'National Elevation Dataset';
var terrainUrl = '//assets.agi.com/stk-terrain/world';
var terrainProvider = new Cesium.CesiumTerrainProvider({
    url: terrainUrl
});
var terrainViewModel = new Cesium.ProviderViewModel({
    name: terrainTitle,
    iconUrl: Cesium.buildModuleUrl('/images/cesium_icon.png'),
    tooltip: terrainTitle,
    creationFunction: function() {
        return terrainProvider;
    }
});

var baseLayerPicker = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
    globe: viewer.scene.globe,
    imageryProviderViewModels: [imageryViewModel],
    terrainProviderViewModels: [terrainViewModel]
});

注意

BaseLayerPicker 控件适用于所有类型的场景，需要在 viewer 中的 scene.globe 中进行设置：

viewer = new Cesium.Viewer('cesiumContainer');
viewer.scene.globe = new Cesium.Globe(Cesium.Ellipsoid.WGS84);

因为控件默认的 imageryProviderViewModels 和 terrainProviderViewModels 是基于 viewer 的 scene.globe 的 WorldImagery 和 TerrainProvider 做的预设，如果在选择其他 imageryProvider 或 terrainProvider 的时候出现问题，可以尝试重新设置这一属性：

baseLayerPicker.imageryProviderViewModels = [YOUR_OPTION];
baseLayerPicker.terrainProviderViewModels = [YOUR_OPTION];