Значок Mapbox - изображение Динамический символ (значок) Загрузка с помощью Sprite

Я пытаюсь сделать что-то, что мне кажется очень простым, но, похоже, я явно неправильно понимаю важную часть функции mapbox addlayer.

Цель

Создавайте динамически идентифицируемые значки на основе значения данных функций (например, vale данных объектов geojson title: "walmart"). По сути, просто добавление динамических значков магазина из изображения спрайта, когда эти местоположения запрашиваются через tilequery. изображение здесь

Проблема

Я все время получаю сообщение об ошибке при попытке использовать значения спрайта из стиля. Ошибка: util.js:349 Image "airport-11" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

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

Пример кода:

      map.addLayer({
    id: "tilequery-points",
    type: "symbol",
    source: "tilequery", // Set the layer source
    layout: {
      "icon-image": [
        "match",
        ["get", "title"],
        ["HEB"],
        "H-E-B_logo",
        ["Pilot Flying j"],
        sprite.Pilot_Travel_Centers_logo,
        // "Pilot_Travel_Centers_logo",
        ["Dollar General"],
        "Dollar_General_logo",
        ["Cumberland Farms Corp"],
        "Cumberland_Farms_logo (1)",
        ["CEFCO"],
        "CEFCO-convenience-stores-Logo_510px",
        ["BJs Wholesale Inc"],

Вопрос

Как мне получить доступ к значениям спрайтов и не получить ошибку? !!! Спасибо за помощь! Я бы не стал спрашивать, не нужно ли мне это!

ОБНОВЛЕНИЕ

Я понял, что для использования изображений спрайтов внутри любого слоя изображения будут автоматически доступны, если они есть в вашей коллекции изображений спрайтов студии Mapbox. Путаница заключалась в том, что раньше я не мог использовать их по ссылке. Однако он должен работать автоматически.

Надеюсь, это поможет!


maps mapbox mapbox-gl-js mapbox-gl mapbox-marker
person DOZBORNE    schedule 21.04.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это правда, что документация по спрайтам не очень понятна. Попробую подвести итог (немного упростив).

Стиль Mapbox GL имеет один спрайт. Это PNG, содержащий все значки, плюс файл JSON, в котором указывается, как называется каждый значок (его идентификатор значка) и где он расположен в PNG. Спрайт указывается путем указания URL-адреса в качестве свойства sprite: https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/

Вы также можете динамически добавлять изображения в спрайт после загрузки карты, используя map.loadImage и map.addImage, указывая идентификатор значка.

Чтобы отобразить значок, вы используете тот же идентификатор в слое символа: "icon-image": "myicon".

У вас могут возникнуть проблемы, когда вы попытаетесь объединить свои собственные значки с иконками в базовой карте Mapbox (которые представляют собой значки Maki с именами вроде «airport-11»).

Чтобы объединить их, вы можете сделать одно из следующих трех:

  • загрузите свои значки в стиль в Mapbox Studio
  • загружайте ваши значки динамически
  • создать новый лист спрайтов в автономном режиме, используя что-то вроде mbsprite

Я не знаю, что вы имели в виду, говоря о нотации через точку, но нет, это неправильный путь.

person Steve Bennett    schedule 22.04.2021
comment
Спасибо, что ответил, Стив! Сейчас я понимаю это немного лучше, однако я все еще немного запутался в основной проблеме. Куда мне вставить ссылку на спрайт, поскольку это позволит мне ссылаться на эти изображения по имени внутри символа. Это где-то внутри символа addLayer или свойства символа? Или он запрашивается автоматически с использованием стиля? Или на него нужно ссылаться как-то иначе? Спасибо еще раз! - person DOZBORNE; 22.04.2021
comment
Если вы создаете весь свой стиль с нуля (т. Е. У вас есть файл my-style.json), то он идет в самом верху. Прочтите спецификацию стиля, включая предоставленную мной ссылку. - person Steve Bennett; 22.04.2021
comment
Достаточно понятно. Прошу прощения за то, что затянул это, но я действительно не могу этого понять. Я хочу использовать изображения спрайтов внутри элемента tilequery map.addLayer. Сможете ли вы посмотреть мой код в этом коде по этой ссылке codepen? В нем есть то место, с которым я борюсь, поэтому мы все находимся на одной странице относительно того, в чем именно заключается проблема. Если ссылка на спрайт не используется в vanilla JS или в чем-то еще, как нам тогда ссылаться на нее изначально из студии mapbox? Спасибо еще раз!!! - person DOZBORNE; 23.04.2021
comment
Пожалуйста, прочтите внимательно документ. Есть один файл спрайтов для каждого стиля. Нет, вы не можете передать спрайт addLayer. - person Steve Bennett; 23.04.2021