3

Recently I have deployed WMTS with GeoServer, using MVT (PBF) format tiles.

I use Leaflet JS parsing PBF tiles.

Layer displaying and interactions are normal. I have generated level 1-13 tiles beforehand,did not generated level 14 tiles and other bigger level tiles.

I use setting maxNativeZoom value to realize displaying level 14 and other bigger level.

But I have another problem: When I zoom to level 16 with leaflet, I wrote following code:

var vectorTileOptions = { layerURL: url, rendererFactory: L.canvas.tile, wtms: true, tileSize:256, vectorTileLayerStyles: vectorTileStyling, interactive: true, //开启VectorGrid触发mouse/pointer事件 //zoom: 11, maxZoom: 18, minNativeZoom:6, maxNativeZoom:13, getFeatureId: function (f) { return f.properties.ID; } }; var vectorTile = new L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);

The dispalying style like blow:

enter image description here

The lines are so fuzzy.

But when I use Openlayers in the same place,the dispalying style like blow:

enter image description here

The lines are so normal.

How can I generate the same normal result with Leaflet?

Improve this question
2
  • 1
    Coding question on GIS SE site should include relevant existing code, otherwise it's most likely to be closed as not compliant with the site policy. Please edit your question and add relevant existing code. Commented Aug 23, 2021 at 6:47
  • I have added the code.Thank you . Commented Aug 24, 2021 at 2:28

1 Answer 1

Reset to default
2

You are using Leaflet.VectorGrid plugin to display PBF tiles. Unless author of the plugin @Ivan Sanchez has some trick upon his sleeve, it seems like there is no way in Leaflet to achieve the same behavior as in OpenLayers.

There is one way though to improve the behavior when using maxNativeZoom option. This option simply tells Leaflet to resize tile images of the last native layer. When using L.canvas.tile layer renderer, this means pixel by pixel resize, thus the effect you see.

You can much improve image by not using canvas renderer option (leaving option rendererFactory: L.canvas.tile out), if that's acceptable to you. In this case what gets resized is vector image, so there is no pixelation effect, but there is of course still enlargement of styles.

For example, original image that would without setting `maxNativeZoom: 12' look like this at zoom 14:

enter image description here

would with setting maxNativeZoom: 12 look like this at zoom 14:

enter image description here

Much better than in your case, but lines are four times as wide.

Improve this answer
3
  • I have try your method,it can solve my requirement very well.Thank you very much.You say the lines are four times as wide,can I set the times number for example 2 times ?Thank you. Commented Aug 25, 2021 at 1:49
  • @stevenma If answer helped you solve your problem, it's customary on GIS se site to mark it as accepted, to let other users with similar questions/problems know that problem was resolved. Commented Aug 25, 2021 at 6:18
  • ok,I have mark it as accepted.I am a new user on GIS se site ,thank you. Commented Aug 25, 2021 at 8:41

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.