Question

在此页面

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

通过单击样式缩略图，可以轻松切换不同的地图样式。我试图检查该页面的源代码以及Mapbox API，但仍然没有关于它们如何实现它的想法..

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

Answer 1

要清楚，使用栅格图块层切换“地图样式”意味着加载全新的图块层。你在MapBox的浏览器编辑器上看到的是15种不同的tilelayers（一次只渲染一个）。因此，创建新样式意味着创建一个全新的项目（即，取决于您如何实现它，新的.mbtiles文件或您的tileserver上的新项目。）

因此，要回答您的问题，可以使用map.removeLayer()和map.addLayer()方法（see the docs）在地图中添加/删除新的切片图层。

基于浏览器的渲染，使用客户端应用的样式，而不是硬件烘焙到tileset中，可以使用vector-tiles和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中，如何在不同的地图样式之间切换？

2 个答案: