在mapbox-gl-js中切换图块网址的推荐方法

Question

情况

我们向地图渲染栅格图层。图层的来源具有初始tile-url。现在，我们要更改源的tile-url并触发新图块的重新加载。例如，我们有针对不同时间点的图块，并且我们希望逐步执行不同的时间步长。

可以做什么 mapbox-gl@0.21.0

map.addSource('tile-source', {...});
map.addLayer('tile-layer', {source: 'tile-source', ...});

// react to a button click or what ever to trigger tile url change
...
const source = map.getSource('tile-source');
source.tiles = ['new-tile-url'];
source._pyramid.reload();

这很好。但是，当然，使用私有方法是不好的做法。请参阅以下原因：

可以使用github中的当前版本做什么（最新提交b155118，2016-07-28）

// init map, add layer, add source, like above
const source = map.getSource('tile-source');
source.tiles = ['new-tile-url'];

map.styles.sources['tile-source'].reload();

必须这样做，因为前者TilePyramid已重构为SourceCache。在这里，我们呼吁reload()的SourceCache不是RasterTileSource。似乎我们不再需要使用任何私有方法，尽管这仍然看起来像未公开的API，在将来的版本中可能会中断。

调用时似乎也存在内存泄漏的问题reload()：https : //github.com/mapbox/mapbox-gl-js/issues/2266

另外，在调用时，缓存将被清除reload()。目前，这似乎不是问题。

// This yields a `RasterTileSource` instance
map.getSource('tile-source'); 

// This yields a `SourceCache` instance
map.styles.sources['tile-source'];

// What's really confusing too, at least namingwise
map.getStyle(); // <-- Yields the maps (visual) style

该SourceCache有RasterTileSource实例作为私人_source领域。

题

建议做这种事情的方法是什么？这个功能正在开发中吗？有没有解释为什么这不是功能（至今）或永远不会？

Answer 1

听起来您正在尝试更改raster源URL 。在GL JS中执行此操作的正确方法是删除源，然后添加具有相同ID和新URL的新源。

map.addSource('tile-source', {...});
map.addLayer('tile-layer', {source: 'tile-source', ...});

// react to a button click or what ever to trigger tile url change
...
map.removeSource('tile-source');
map.addSource('tile-source', {tiles: ['new-tile-url'], ...});

Answer 2

这是更改 Mapbox GL JS 图层 URL 而不删除并添加源和图层的另一种方法。

// Set the tile URL to a cache-busting URL (to circumvent browser caching behavior):
map.getSource('source-id').tiles = [ `http://some.url/{z}/{x}/{y}.pbf?dt=${Date.now()}` ]

// Remove the tiles for a particular source
map.style.sourceCaches['source-id'].clearTiles()

// Load the new tiles for the current viewport (map.transform -> viewport)
map.style.sourceCaches['source-id'].update(map.transform)

// Force a repaint, so that the map will be repainted without you having to touch the map
map.triggerRepaint()

我已经想出了一个解决办法。而不是 sourceCache 尝试 _sourceCache 函数并在您的 id 之前输入“other”。

map.style._sourceCaches['other:wms-source'].clearTiles();
map.style._sourceCaches['other:wms-source'].update(map.transform)

https://github.com/mapbox/mapbox-gl-js/issues/2941#issuecomment-518631078

Answer 3

Mapbox GL JS v2.13.0 于 2023 年 2 月 22 日发布 Add methods for changing a raster tile source dynamically (e.g. setTiles, setUrl).（# 12352）

因此，现在您可以更新栅格源，而无需删除图层和源。