mapbox-gl-js
mapbox-gl-js copied to clipboard
fill-outline-color on borders of clipped tiles
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
When I set the properties 'fill-translate': [20, 20]
, I saw the following phenomenon after separating each small tile
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
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?
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 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.