『Cesium基礎』 BaseLayerPicker

關注公衆號"seeling_GIS"，領取學習視頻資料

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.gtimg.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.gtimg.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];
   

---

更多內容，歡迎關注公衆號