mapbox-gl-js icon indicating copy to clipboard operation
mapbox-gl-js copied to clipboard

fill-outline-color on borders of clipped tiles

Open Chen-913 opened this issue 1 year ago • 1 comments

mapbox-gl-js version:2.8.2

browser:Chrome version 103.0.5060.134

The data is that I use st through PostgreSQL and ST_ AsMVT SQL function is converted into vector slice and passed to the front end for rendering

For some reasons, I cannot provide test data, but I provide screenshots and code for reference

mapboxgl.accessToken =token;

const map = new mapboxgl.Map({
  container: 'app',
  antialias: true, 
  style: 'mapbox://styles/mapbox/dark-v10',
  center: [100.97923191113188, 66.589860256941634],
  zoom: 12,
});

map.on('load',()=>{
map.addSource('vectorSource', {
  type: 'vector',
  scheme: 'xyz',
  tiles: [
    `http://192.168.101.147:8888/tile/{z}/{x}/{y}`,
  ],
});
map.addLayer({
  id: 'vectorLayer',
  type:'fill',
  source: 'vectorSource',
  'source-layer': 'qwe',
  paint: {
                'fill-color': 'yellow',
            'fill-outline-color': 'red',
  },
});
})

It rendered me such a result that there are still redundant lines between some small squares

image

When I set the properties 'fill-translate': [20, 20], I saw the following phenomenon after separating each small tile

image

The square in the tile has no extra lines. Obviously, it will render the border of the tile

I checked some related issues, but I couldn't find any useful help

  • https://github.com/mapbox/mapbox-gl-js/issues/1738
  • https://github.com/ealgis/ealgis/issues/133
  • https://github.com/tilezen/vector-datasource/issues/119

Chen-913 avatar Aug 02 '22 08:08 Chen-913

These look like clipping artifacts on the PostGIS side. Can you try setting a bigger buffer for the MVT and seeing if it resolves the issue?

mourner avatar Aug 09 '22 16:08 mourner

In the sql function, setting the last parameter of the ST_AsMVTGeom function to false solved my problem, but I don't know the principle. If anyone knows, please let me know. Thank you. The approximate sql query statement is as follows:

st_asmvtgeom (geom,
st_makeenvelope (#{xmin,jdbcType=NUMERIC}, #{ymin,jdbcType=NUMERIC}, #{xmax,jdbcType=NUMERIC},#{ymax,jdbcType=NUMERIC}, 4326),
4096,
0,
FALSE
) AS geom

Chen-913 avatar Aug 12 '22 04:08 Chen-913

@Chen-913 see the docs here https://postgis.net/docs/ST_AsMVTGeom.html — you're setting the buffer to 0, meaning that clipping would cut geometries right at the tile border; the last FALSE just disables clipping altogether. Which should be fine for small and simple geometries like in the screenshot above.

mourner avatar Aug 12 '22 08:08 mourner