The drawing line looks like broken

zhaojinkun commented 5 years ago

I use the following code to draw line, but the lines looks like broken,could you help to check it.Thank you. my code is:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Add an image</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<your token>';
var mapStyle = {
    "version": 8,
    "name": "Dark",
    "sources": {
        "mapbox": {
            "type": "vector",
            "tiles": ["https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"],
        },
    },
    "sprite": "mapbox://sprites/mapbox/dark-v10",
    "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    "layers": [
        {
            "id": "background",
            "type": "background",
            "paint": {"background-color": "#111"}
        },
        {
            "id": "ext_lane_boundary",
            "source": "mapbox",
            "source-layer": 'mapillary-sequences',
            "type": "line",
            "layout": {
                "line-cap": "butt",
                "line-join": "miter",
            },
            paint: {
                'line-color': 'red',
                'line-width': {
                    base: 1.55,
                    stops: [[6, 4], [14, 7]],
                },
            },
        },
    ]
};

var map = new mapboxgl.Map({
    container: 'map',
    maxZoom: 14,
    minZoom: 6,
    zoom: 12,
    center: [-87.622088, 41.878781],
    style: mapStyle
});

</script>

</body>
</html>

ansis commented 5 years ago

It looks like the data in your tiles is clipped exactly to the tile boundaries. There needs to be some extra padding in order to avoid these artifacts. For example, if you have a line going across a tile with an extent of 4096 it should extend a bit past 0 on the left side and a bit past 4096 on the right side.

zhaojinkun commented 4 years ago

Dear ansis： if i can fix this issue by setting the mapbox style,as I can't change the vector data in the service.

kkaefer commented 4 years ago

No, that's not something Mapbox GL can do.

mapbox / mapbox-gl-js

The drawing line looks like broken #8951