mapbox, как я могу добавить метку к строке?

Я хотел бы добавить текст в строку. В основном так же, как название улицы отображается на картах Google. Поэтому, если я увеличиваю масштаб или перемещаю карту, текст все равно отображается на линии.

Мне нужно добавить какой-то новый слой с теми же координатами?

Вот jsfiddle для начала.

<body>

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

</body>

mapboxgl.accessToken = 'pk.eyJ1Ijoib2tpZWJ1YmJhIiwiYSI6ImNpdHZscGs3ajAwNXYyb284bW4ydWUzbGsifQ.1PoNrSP0F65WolWgqKhV4g';

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%; }

mapbox mapbox-gl
person okieBubba    schedule 04.11.2016    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Гораздо лучшее решение — http://jsfiddle.net/brianssheldon/wm18a33d/27/.

Добавьте свойства в geojson с помощью properties.title и в addlayer для символов измените «текстовое поле» на «{title}»

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

и в addLayer для символов используйте это

 "text-field": '{title}',
person okieBubba    schedule 30.11.2016
comment
Текст заголовка появляется только после определенного уровня масштабирования; можно ли установить внешний вид метки для меньших уровней масштабирования? - person Ritambhara Chauhan; 19.04.2019
comment
Я понимаю что ты имеешь ввиду. Кажется, что jsfiddle перестает показывать текст где-то между 7 и 8. В этот момент вы, возможно, смотрите на группировку/кластеры - docs.mapbox.com/mapbox-gl-js/example/cluster - person okieBubba; 20.04.2019
comment
Кластеризация не работает с типом данных Linestring. - person Ritambhara Chauhan; 01.05.2019
comment
Верно. Я просто думаю, что если вы так сильно уменьшите масштаб, вам придется использовать что-то еще... или иметь возможность установить размер шрифта в зависимости от уровня масштабирования. - person okieBubba; 01.05.2019

arrow_upward
3
arrow_downward

Мне удалось заставить его работать 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": {}
});
person okieBubba    schedule 29.11.2016
comment
Этот ответ действительно блестящий (: я использовал значок вместо текста, и картографический блок автоматически повторяет значок вдоль строки, и это так здорово ((: - person AmirHossein Rezaei; 13.04.2021
comment
Чтобы предотвратить повторение, вы можете использовать symbol-placement=line-center в более новых версиях примера GL JS здесь: jsfiddle.net/tsuzk /cft1v9ue/1 - person tsuz; 15.06.2021