Mapbox如何在Linestring上添加标签？

Question

Mapbox如何在Linestring上添加标签？

11

我想在一条线上添加文本，就像谷歌地图中街道的名称显示方式一样。因此，如果我放大或移动地图，文本仍将显示在该线上。

我需要添加一个具有相同坐标的新层吗？

这是一个 jsfiddle供您参考。

<body>

<div id='map'></div>

</body>

mapboxgl.accessToken = '12345';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-88.4, 33.4],
    zoom: 10
});
    
map.on('load', function () {
    map.addSource("route", {
        "type": "geojson",
        "data": {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-88.451092, 33.325422],
                    [-88.248037, 33.436312]
                ]
            }
        }
    });

    map.addLayer({
        "id": "route",
        "type": "line",
        "source": "route",
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#888",
            "line-width": 8
        }
    });
    
    

});


        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

- okieBubba

2个回答

5

我能让它工作了 http://jsfiddle.net/brianssheldon/wm18a33d/8/

我添加了这段代码

map.addLayer({
    "id": "symbols",
    "type": "symbol",
    "source": "route",
    "layout": {
        "symbol-placement": "line",
        "text-font": ["Open Sans Regular"],
        "text-field": 'this is a test',
        "text-size": 32
    },
    "paint": {}
});

- okieBubba

1

这个答案真的很棒（：我使用了图标而不是文本，Mapbox会自动沿着线重复图标，这太酷了((: - AmirHossein Rezaei

1

为了避免重复，您可以在较新版本的GL JS中使用symbol-placement=line-center。示例请参见此处：http://jsfiddle.net/tsuzk/cft1v9ue/1/ - Taku

它并不能防止重复。如果你放大它，它会一直重复。 - derFrosty

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- okieBubba · Accepted Answer

更好的解决方案- http://jsfiddle.net/brianssheldon/wm18a33d/27/

使用 properties.title 给地理json数据添加属性，并在添加符号的 addlayer 中将 "text-field" 更改为 "{title}"

    "properties": {
      "title": 'aaaaaa' 
    }

对于符号的addLayer，请使用以下内容：

 "text-field": '{title}',