2

I'm trying to show in Leaflet a WMS map served with QGIS Server. As you can see in this fiddle below there's a problem with the items in the map; they appear to be clipped somehow. The data which are given by QGIS Server are geographical multipolygons with associated their id in the postgis database.

https://jsfiddle.net/maurizioricci95/vydseLzq/1/

enter image description here

The map is working correctly if imported in QGIS Desktop using directly the WMS URL (http://quegis.labcd.unipi.it/cgi-bin/qgis_mapserv.fcgi). I also tried in Leaflet to request image in PNG format with the transparency but didn't fix the problem.

This is the GetCapabilities of the WMS:

http://quegis.labcd.unipi.it/cgi-bin/qgis_mapserv.fcgi?SERVICE=WMTS&VERSION=1.3.0&REQUEST=GetCapabilities , everything appears to be ok.

It looks like there's some strange behavior/options set in Leaflet but I am not able to figure it out.

Improve this question
2
  • Service works for me when loaded as an external layer in an OpenLayers client (portal.onegeology.org/OnegeologyGlobal) so it doesn't look like a service issue. My guess would be that this is some tiling artefact introduced by leaflet. Perhaps tile size is too small? Looking at your fiddle (note code should really be in the question), I'm wondering too why you fix the zoom. Zoom is an artificial thing for WMS (there's no such thing) so possibly you're trying to render data at the wrong scale.
    – nmtoken
    Jan 3, 2020 at 22:26
  • @nmtoken The OL client you linked to uses an untiled WMS strategy (i.e. openlayers.org/en/latest/apidoc/… , openlayers.org/en/latest/examples/wms-image-custom-proj.html ) and yet there are still bounding box artifacts (see imgur.com/a/MGwrkW6 ). Service issue, not client issue.
    – IvanSanchez
    Jan 4, 2020 at 8:39

1 Answer 1

Reset to default
7

You're hitting tiling artifacts. Namely, the labels are being cut between tiles (and the circle markers for the points probably as well); this is easily seen by adding a border to the Leaflet tiles by adding a bit of CSS like .leaflet-tile-loaded { border: 1px dashed red; }, e.g.:

tile artifacts with tile borders

This happens when the rendering engine uses data strictly inside the bounds of the requested image/tile to render said image/tile. Imagine a data point which should be one two pixels away from a tile boundary and that is represented by a 8-pixel radius circle: there should be 6 pixels worth of circle in a tile that doesn't really contain that point.

There are some usual approaches to tile artifacts:

  • Use a bigger tile size for your L.TileLayer.WMS. However, this will only make the artifacts appear a bit less frequently, not prevent them.

  • Use L.WMS.Overlay for displaying "untiled" WMS images. This will get rid of those artifacts, but will introduce new ones (the rendering will be different depending on the bounding box in some circumstances, antimeridian issues) and will put a lot more strain on the WMS server (as each map pan will trigger a new uncacheable re-render of the map).

  • Change the rendering style on the WMS server itself, so that data just outside of the requested bounding box is used on the rendering. This means that points that are not on the current tile should be fetched and their labels rendered, just in case a tiny bit of that label is visible even though the point itself is not.

The third technique is the preferred IMO, but you need to be able to tweak the WMS server itself, and depends on what software is powering the WMS service. (e.g. see for QGIS or for mapserver or for geoserver)

Improve this answer
1
  • Thanks, your third solution for qgis server worked like a charm, i spent days trying to solve the problem.
    – Maurizio Ricci
    Jan 5, 2020 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.