在Mapbox.js中，如何切換不同的地圖風格？

Question

在此頁面

https://www.mapbox.com/editor/#style

不同的地圖樣式，可以通過點擊縮略圖風格容易地切換。我試圖檢查該頁面的源代碼以及Mapbox API，但仍然沒有關於它們如何實現的想法..

有沒有人有關於使用哪種方法在mapbox.js中的不同地圖樣式之間切換的想法？

Answer 1

要清楚，使用柵格tilelayers切換'地圖樣式'意味着加載全新的瓷磚圖層。你在MapBox的瀏覽器編輯器上看到的是15種不同的可能的tilelayers（一次只能渲染一個）。因此，創建新樣式意味着要創建一個全新的項目（即根據您的實現方式，新的.mbtiles文件或tileserver上的新項目）。

因此，要回答您的問題，可以使用map.removeLayer()和map.addLayer()方法（see the docs）從地圖添加/刪除新的圖塊圖層。

基於瀏覽器的渲染，與應用客戶端的風格，而不是硬烤成的地形設置，可以用向量瓷磚和mapbox-gl庫，雖然mapbox-gl尚未爲leaflet/mapbox.js成熟。

Answer 2

我使用類似下一段代碼來改變地圖樣式。此代碼切換當前地圖樣式，並在加載新地圖樣式的第一個區塊後移除舊地圖。

L.Map.include({ 
 
    _mapStyleLayerTileLoad:function(){ 
 
     this._stylesLayer.getLayers() 
 
      .filter(function(layer){ 
 
       return this._currentStyleLayer!==layer; 
 
      },this) 
 
      .forEach(function(layer){ 
 
       if (layer!==this._currentStyleLayer) { 
 
        this._stylesLayer.removeLayer(layer); 
 
       } 
 
      },this); 
 
     this._currentStyleLayer.off("tileload",this._mapStyleLayerTileLoad,this); 
 
    }, 
 
    setMapStyle:function(style) { 
 
     if (!style) { 
 
      return; 
 
     } 
 
     if (!this._stylesLayer) { 
 
      this._stylesLayer=L.layerGroup([]).addTo(this); 
 
     } 
 
     if (this._currentStyleLayer) { 
 
      this._currentStyleLayer.off("tileload",this._mapStyleTileLoad); 
 
     } 
 
     var layer=L.mapbox.tileLayer(style) 
 
     if (this._currentStyleLayer) { 
 
      layer.on("tileload",this._mapStyleLayerTileLoad,this); 
 
     } 
 
     layer.addTo(this._stylesLayer); 
 
     this._currentStyleLayer=layer; 
 
     return this; 
 
    } 
 
});