12 Cesium—影像服务-BaseLayerPicker

文章中所有操作均是在 Cesium 1.91 版本下进行的，其它版本差异请自行适配

BaseLayerPicker组件

在 Cesium 中图层操作是最基本的操作，那就需要学习一下 BaseLayerPicker 组件。这里主要介绍内置的 BaseLayerPicker 的使用和如何自定义实现 BaseLayerPicker。

内置的BaseLayerPicker

在初始化 Viewer 时，将 baseLayerPicker 设置为 true 即可显示 BaseLayerPicker 控件。然后可以通过将 viewer.baseLayerPicker.viewModel.selectedImagery 设置为 viewer.baseLayerPicker.viewModel.imageryProviderViewModels[?] 来设置 BaseLayerPicker 的默认数据源，这里的 ? 号代表数字，就是选择初始化为 [?] 号图层，这里指的是下标。

代码片段：

const viewer = new Cesium.Viewer("cesiumContainer", {
    //隐藏图层选择
    baseLayerPicker: true // 这里设置为true，默认就是true
});

//设置默认图层数据，比如设置了下标8的图层数据
viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[8];

//设置初始位置
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.75199, 36.55358, 20000000)
});

效果如下：

自定义BaseLayerPicker

自定义 BaseLayerPicker，其实粗浅的解释就是将所有定义的影像服务都追到加一个容器中，然后将这个容器定义到 Viewer 中即可。

我这里没有太好的影像服务，所以就拿了两个天地图的影像服务为例子（感谢天地图），一个是矢量底图，一个是矢量标记。最关键的地方，在定义 Viewer 的时候，注意两点：baseLayerPicker 设置为 true 和 增加 imageryProviderViewModels 属性，将设置好的容器数组配置上去。

代码片段：

//天地图
var td_ken = "天地图授权的key";

//WebMapTileServiceImageryProvider 天地图 矢量底图
var td_vec_w = "http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default&format=tiles&tk=" + td_ken;

//vecProvider后面用到
var vecProvider = new window.Cesium.WebMapTileServiceImageryProvider({
    url: td_vec_w,
    layer: "vec_w",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "image/jpeg",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    minimumLevel: 0,
    maximumLevel: 18
});

//WebMapTileServiceImageryProvider 天地图 矢量注记
var td_cva_w = "http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default&format=tiles&tk=" + td_ken;

//cvaProvider后面用到
var cvaProvider = new window.Cesium.WebMapTileServiceImageryProvider({
    url: td_cva_w,
    layer: "cva_w",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "image/jpeg",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    minimumLevel: 0,
    maximumLevel: 18
});

//-------设置ProviderViewModel-----------------------
var providerViewModels = []; //用来装各种影像服务

//将自定义的影像追加到providerViewModels中
var tiandiveaProviderModel = new Cesium.ProviderViewModel({
    name: "天地图矢量影像",
    iconUrl: "images/tiandi.png", //自定义了一个天地图小图标
    tooltip: "天地图影像 矢量底图",
    creationFunction: function(){
        return vecProvider; //对应之前定义的变量名
    }
});
providerViewModels.push(tiandiveaProviderModel); //追加影像服务

var tiandicvaProviderModel = new Cesium.ProviderViewModel({
    name: "天地图标记影像",
    iconUrl: "images/tiandi.png", //自定义了一个天地图小图标
    tooltip: "天地图影像 矢量标记",
    creationFunction: function(){
        return cvaProvider; //对应之前定义的变量名
    }
});
providerViewModels.push(tiandicvaProviderModel); //追加影像服务

//定义Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
    baseLayerPicker: true,
    imageryProviderViewModels: providerViewModels//自定义扩展
});

效果如下：