Question

场合

我们将栅格图层渲染到地图上。图层的源有一个初始的tile-url。现在我们想要更改源的tile-url并触发新tile的重新加载。例如。我们有不同时间点的瓷砖，我们希望逐步完成不同的时间步骤。

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来源的网址。在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 behaviour):
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()

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

在mapbox-gl-js

2 个答案: