leaflet - 通过 mapbox-gl-leaflet 使用多个图层

Question

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

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

我期望能够在基础地图图层的顶部添加远足路线图层，并且两者同时可见。然而，事实并非如此。一次只能看到一层。

这是我看到的问题的一个最小示例：https ://osm.trailrouter.com/stackoverflow.html

在开发工具的控制台中运行map.removeLayer(layers.default);以删除基础层，然后您将在下面看到我的远足路线。

我想让蓝色的远足路线覆盖在地图上。

有任何想法吗？

标签： leafletmapbox-gl-jsmapbox-gl-leaflet

Answer 1

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

当前版本的 mapbox-gl-leaflet 将所有图层放入tilePane. 以前他们修复了这个问题，但后来他们取消了它。

首先，用这个版本替换你当前版本的 leaflet-mapbox-gl.js 。

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

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'
});

瞧。