在 mapbox-gl-leaflet 中使用多层

Question

我有一个基于 Leaflet 的应用程序，并且最近开始使用 mapbox-gl-leaflet 来访问 Mapbox GL 在遗留 Leaflet 代码中基于矢量的图层。

今天我遇到了一个我无法解决的问题。我有一个基础地图层和一个可选的叠加层（远足路线）。在 Mapbox studio 中，远足路线层没有背景 - 它是完全透明的。

我原本希望能够在基础地图图层之上添加远足路线图层，并让两者同时可见。然而，事实并非如此。一次只能看到一层。

这是我遇到的问题的一个简单示例：https://osm.trailrouter.com/Whosebug.html

运行 map.removeLayer(layers.default); 在开发工具的控制台中移除基础层，然后你会在下面看到我的徒步路线。

我想要将蓝色的远足路线叠加在地图上。

有什么想法吗？

Answer 1

我已经帮你想好了。 Leaflet支持多个“窗格”（图层组），你想要的是tilePane中的底图和overlayPane中的远足路线。

当前版本的 mapbox-gl-leaflet 将所有图层放入 tilePane。以前他们fixed this issue, but then they unfixed吧。

首先，将您当前版本的 leaflet-mapbox-gl.js 替换为 this version。

然后，更新您的代码以在窗格中传递：

var layers = {},
   attribution = '&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a> &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   mapboxkey = 'pk.eyJ1Ijoic2FtY3Jhd2ZvcmQiLCJhIjoiY2oweWUxZ3VhMDAxMTJxa2V1ZHV5dHNvZyJ9.k6t1XvJ0ayzILpxUcb4Khg';
layers.default = L.mapboxGL({
    accessToken: mapboxkey,
    style: 'mapbox://styles/samcrawford/ckajn11fl21ng1ir187w6f0yi',
    attribution: attribution,
    pane: 'tilePane'
});
layers.fkt = L.mapboxGL({
    accessToken: mapboxkey,
    style: 'mapbox://styles/samcrawford/ckc29yjv64ndy1iocamivme4q',
    attribution: attribution,
    pane: 'overlayPane'
});

瞧。

在 mapbox-gl-leaflet 中使用多层

Using multiple layers with mapbox-gl-leaflet

leaflet

mapbox-gl-js

mapbox-gl-leaflet