[英]How to best map vector tiles in OL3 with missing zoom levels?
I'm basically doing the same as https://openlayers.org/en/latest/examples/mapbox-vector-tiles.html?q=mvt except I'm serving up a custom map with a NodeJS web server with a data set based off of OSM. 我基本上与https://openlayers.org/en/latest/examples/mapbox-vector-tiles.html?q=mvt相同,只是我正在使用带有数据的NodeJS Web服务器提供自定义地图设置基于OSM。
I've merged the data so I have the whole world at 0-8 zoom levels and parts of the world that are more important at 0-14 zoom levels all as mbtiles. 我已经合并了数据,所以我得到了0-8缩放级别的整个世界以及0-14缩放级别更重要的世界部分。 Here is my basic layer definition:
这是我的基本图层定义:
new ol.layer.VectorTile({
source: new ol.source.VectorTile({
overlaps: false,
attributions: "© <a href='https://www.openstreetmap.org/copyright'>" +
"OpenStreetMap contributors</a>",
format: new ol.format.MVT(),
tileGrid: ol.tilegrid.createXYZ({maxZoom: 14}),
tilePixelRatio: 16,
url: "/maptiles/osm/{z}/{x}/{y}.vector.pbf"
}),
style: createMapboxStreetsV6Style()
});
Previously I was using a bit of a hack with a vector source and vector layers with GEOjson data. 以前,我对矢量源和带有GEOjson数据的矢量层使用了一些技巧。 I have several problems with the new method that OL3 seems to be moving towards:
OL3似乎正在朝着这种新方法提出一些问题:
If I set it to zoom level 14 as the max then as you pan around it will just request zoom level 14 and not request 8 that may only be available in that area. 如果将其设置为最大缩放级别14,则在您平移它时只会请求缩放级别14,而不会请求仅在该区域可用的8。 If I try to return the 8th zoom level data from the web server, then obviously the x and y are off and you get bad data.
如果我尝试从Web服务器返回第8个缩放级别数据,则显然x和y处于关闭状态,并且您得到了错误的数据。
The other issue I have is before since it was vector data it didn't matter how much you zoomed in, it still looked okay and I guess was re-rendered. 我遇到的另一个问题是以前,因为它是矢量数据,所以放大多少都没有关系,看起来还是可以的,我想是重新渲染了。 Now, if I zoom past zoom level 8 anywhere that doesn't have more than that (even if I set maxzoom to 8), it just gets blurry like a PNG tile would.
现在,如果我缩放到第8级缩放以上的位置(即使将maxzoom设置为8),它也会像PNG瓦片那样变得模糊。 It seems like there should still be a way to have it redraw the same vector data.
似乎仍然应该有办法重绘相同的矢量数据。 After all that's half the point of using vector data and not PNGs.
毕竟,这是使用矢量数据而非PNG的一半。
Blurry Image with max zoom level 8 最大缩放级别8的模糊图像
Any help and ideas would be appreciated. 任何帮助和想法,将不胜感激。 Thanks.
谢谢。
To resolve your first issue, the key to reusing tiles for different zoom levels is to define a custom tile grid with new ol.tilegrid.TileGrid()
instead of ol.tilegrid.createXYZ()
. 要解决您的第一个问题,针对不同缩放级别重复使用图块的关键是使用
new ol.tilegrid.TileGrid()
而不是ol.tilegrid.createXYZ()
定义自定义图块网格。 Depending on how you organise your zoom levels, you may also need a custom tileUrlFunction
configured on the ol.source.VectorTile
, to translate tile grid zoom levels (which are always 0,1,2,...) to the zoom levels your tile set uses. 这取决于你如何组织你的缩放级别,您可能还需要自定义
tileUrlFunction
上配置ol.source.VectorTile
,翻译tile网格缩放级别(这始终是0,1,2,...)的缩放级别您瓷砖设置用途。
Your second issue can be simply be resolved by configuring the ol.layer.VectorTile
with renderMode: 'vector'
. 您可以通过使用
renderMode: 'vector'
配置ol.layer.VectorTile
来解决第二个问题。
Both techniques are shown in the https://openlayers.org/en/latest/examples/mapbox-vector-tiles-advanced.html example. 两种技术都显示在https://openlayers.org/en/latest/examples/mapbox-vector-tiles-advanced.html示例中。 Your tile grid configuration will be a bit different though.
您的图块网格配置将有所不同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.