Mapbox.js，如何切换不同的地图风格？

Question

在这个页面

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

不同的地图样式可以通过点击样式缩略图轻松切换。我试图检查该页面的源代码以及 Mapbox API 但仍然不知道他们是如何实现的..

有没有人知道在mapbox.js中使用哪种方法在不同的地图样式之间切换？

Answer 1

需要说明的是，切换 'map styles' 栅格切片图层意味着加载全新的切片图层。你在 MapBox 的浏览器编辑器上看到的是 15 种不同的可能的 tilelayers，（一次只渲染一个）。因此，创建新样式意味着创建一个全新的项目（即，根据您的实施方式，一个新的 .mbtiles 文件，或者您的 tileserver 上的一个新项目）。

因此，为了回答您的问题，可以使用 map.removeLayer() 和 map.addLayer() 方法 (see the docs) 从地图中 added/removed 获取新的切片图层。

使用矢量切片和 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;
    }
});

Mapbox.js，如何切换不同的地图风格？

In Mapbox.js, how to switch between different map style?

javascript

dictionary

mapbox