在mapbox-gl-js中切换图块网址的推荐方法 [英] Recommended way to switch tile urls in mapbox-gl-js

问题描述

情况

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

We render a raster layer to the map. The layer's source has an initial tile-url. Now we want to change the tile-url of the source and trigger a reload for the new tiles. E.g. we have tiles for different points in time and we want to step through the different time steps.

在mapbox-gl@0.21.0

What can be done in 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();

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

This works fine. But, of course, using private methods is bad practice; see the reason below:

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

What can be done with the current version from github (Latest commit 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.在这里，我们在SourceCache而不是RasterTileSource上调用reload().似乎我们不必再使用任何私有方法了，尽管它看起来仍然像未公开的API，在将来的版本中可能会中断.

It has to be done this way, because the former TilePyramid has been refactored to a SourceCache. Here we are calling reload() on the SourceCache not the RasterTileSource. It seems that we don't have to use any private methods anymore, though this still looks like undocumented API, which may break in future versions.

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

Also there seems to be an issue with a memory leak when calling reload(): https://github.com/mapbox/mapbox-gl-js/issues/2266

此外，调用reload()时，将清除缓存.现在，这似乎不是问题.

Additionally the cache gets cleared when calling reload(). Which for now doesn't seem to be an issue.

// 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字段.

The SourceCache has the RasterTileSource instance as a private _source field.

问题

推荐做这种事情的方法是什么?这个功能正在开发中吗?有没有解释为什么这不是功能(至今)或永远不会?

What is the recommended way to do something like this? Is this a feature being worked on? Is there an explanation why this isn't a feature (yet) or never will be?

推荐答案

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

It sounds like you're trying to change the URL of a raster source. The proper way to do this in GL JS is to remove the source and then add a new source with the same id and the new 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'], ...});

这篇关于在mapbox-gl-js中切换图块网址的推荐方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！