Mapbox GL AddLayer: откуда берутся иконки

10

Многие примеры всегда загружают изображение значка следующим образом (например, здесь: https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ ):

map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

Где хранится этот значок и как я могу связаться с локальным PNG или SVG? Или как я могу поставить свой собственный markersисточник? Пример не очень хорошо задокументирован.

tobias47n9e
источник
Вы проверили раздел «ссылки на стиль» в документации по API?
Тангнар
3
Это не очень хорошо объяснено на мой взгляд. Хотелось бы увидеть хорошо объясненный рабочий пример.
tobias47n9e

Ответы:

13

Если вы будете следовать примерам, вы получите только те спрайты, которые загружаются с таблицей спрайтов вашего конкретного стиля, что НЕ ОБЯЗАТЕЛЬНО соответствует 1: 1 с любым другим стилем.

Например: в emerald-v8 НЕТ «icon-image»: «harbour-15», как в примере с улиц-v8.

Чтобы увидеть список доступных спрайтов из соответствующих стилей: https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites

Я могу выбрать значок "гавань" из их хранилища emerald-v8 следующим образом:

map.addLayer({
    "id": "pointclick",
    type: 'symbol',
    source: 'pointclick',
    "layout": {
        "icon-image": "harbor_icon",
        "icon-size":1.5
    },
    "paint": {}
});

Вот ресурс, который помог мне собрать все это вместе, и он объясняет, как создавать свои собственные значки: https://www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images

РЕДАКТИРОВАТЬ:

По сути, чтобы добавить один из ваших собственных значков, зайдите в Mapbox studio, создайте свой собственный стиль или отредактируйте один из них. Просто добавьте один из ваших собственных SVG-файлов, и этот значок станет вам доступен в вашем пользовательском спрайт-листе.введите описание изображения здесь

CCantey
источник
0

Как сказано в документах sprite : перейдите "sprite": "https://link"к своему стилю, где linkссылка на json генерируется с помощью spritezero-cli . spritezero-cli генерирует png sprite из списка ваших иконок в формате svg. Что вы можете использовать иконки в символьных слоях как 'icon-image'.

Microspace
источник