『Cesium 基础』BaseLayerPicker

自定义 BaseLayerPicker

1. 除了使用 baseLayerPicker 中默认的地图数据源，我们可以使用 cesium 提供的 ProviderViewModel 接口自己扩展数据源。

2. 使用自定义图层，需要在初始化 viewer 的时候，需要开启

   baseLayerPicker:true, //是否显示图层选择控件
   

3. 添加自定义底图

   var providerViewModels = [];
   let gaodev = new Cesium.UrlTemplateImageryProvider({
   	url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
   	subdomains: ['1', '2', '3', '4'],
   });
   var gaodeMapModel = new Cesium.ProviderViewModel({
   	name: '高德矢量',
   	iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'),
   	tooltip: '高德矢量 地图服务',
   	creationFunction: function() {
   		return gaodev;
   	},
   });
   providerViewModels.push(gaodeMapModel);
   let gaode = new Cesium.UrlTemplateImageryProvider({
   	url: 'https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
   	subdomains: ['1', '2', '3', '4'],
   });
   let gaodeLabel = new Cesium.UrlTemplateImageryProvider({
   	url: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
   	subdomains: ['1', '2', '3', '4'],
   });
   var gaodeMapModel = new Cesium.ProviderViewModel({
   	name: '高德影像',
   	iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapboxSatellite.png'),
   	tooltip: '高德影像 地图服务',
   	creationFunction: function() {
   		return [gaode, gaodeLabel];
   	},
   });
   providerViewModels.push(gaodeMapModel);
   
   let tencent = new Cesium.UrlTemplateImageryProvider({
   	url: 'https://p2.map.gt/images/cesium.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229',
   	customTags: {
   		sx: function(imageryProvider, x, y, level) {
   			return x >> 4;
   		},
   		sy: function(imageryProvider, x, y, level) {
   			return ((1 << level) - y) >> 4;
   		},
   	},
   });
   let tencentLabel = new Cesium.UrlTemplateImageryProvider({
   	url: 'https://rt3.map.gt/images/cesium.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297',
   });
   var gaodeMapModel = new Cesium.ProviderViewModel({
   	name: '腾讯影像',
   	iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/mapboxSatellite.png'),
   	tooltip: '腾讯影像 地图服务',
   	creationFunction: function() {
   		return [tencent, tencentLabel];
   	},
   });
   providerViewModels.push(gaodeMapModel);
   
   this._viewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels;
   //设置默认地图源
   this._viewer.baseLayerPicker.viewModel.selectedImagery = this.viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0];