Mapbox GL JS, Добавить пользовательские маркеры

Я ищу подход, который позволил бы мне создать простой пользовательский маркер на моей карте, как это делает Mapbox JS.

Глубоко заглянул в Интернет, и кажется, что нет очевидного или довольно простого способа добиться этого. Я полагаю, что это довольно функциональная возможность, которую упускают.

Было несколько попыток поработать с Mapbox Studio, но все равно не повезло, так как довольно сложно понять, как я могу загружать пользовательские SVG и иметь возможность ссылаться на них.

Чтобы привести пример, я создал специальную карту с Mapbox Studio, и, насколько я могу судить, нет значков, которые я мог бы использовать. Я пытался найти что-то, называемое листом спрайтов, но поскольку я никогда не работал с таким подходом, я не знаю, как это сделать.

Думаю, это очень важно не только для меня, но и для многих людей, которые только начали изучать что-то новое, например Mapbox GL JS, иметь в приложении хорошее руководство.

Итак, это часть моего кода в отношении создания некоторых пользовательских маркеров.

markers = {

  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "marker-symbol": "golf",
      "type": "journey-step",
      "previous": "0",
      "current": "1",
      "next": "2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.98114013671872,
        19.70207180765683
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#7f201e",
      "marker-size": "medium",
      "marker-symbol": "music",
      "type": "journey-step",
      "previous": "1",
      "current": "2",
      "next": "3"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.67352294921875,
        19.01278705937288
      ]
    }
  }, {
    "type": "Feature",
    "properties": {

      "icon-symbol": "Four",
      "type": "journey-step",
      "previous": "2",
      "current": "3",
      "next": "4"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.2423095703125,
        19.42644883261674
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#7f201e",
      "marker-size": "medium",
      "marker-symbol": "theatre",
      "type": "journey-step",
      "previous": "3",
      "current": "4",
      "next": "5"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.10223388671875,
        19.698193071745962
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#7f201e",
      "marker-size": "medium",
      "marker-symbol": "alcohol-shop-12",
      "type": "journey-step",
      "previous": "4",
      "current": "5",
      "next": "6"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.38787841796872,
        20.04303061200023
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#7f201e",
      "marker-size": "medium",
      "marker-symbol": "theatre",
      "type": "journey-step",
      "previous": "5",
      "current": "6",
      "next": "7"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.8575439453125,
        20.229986070955245
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "marker-color": "#7f201e",
      "marker-size": "medium",
      "marker-symbol": "theatre",
      "type": "journey-step",
      "previous": "6",
      "current": "7",
      "next": "8"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-155.89599609375,
        19.46400263520258
      ]
    }
  }]

};
map.addSource("markers", {
  "type": "geojson",
  "data": markers
});

map.addLayer({
  "id": markers,
  "type": "symbol",
  "source": "markers"
});

Как вы понимаете, на моей карте не отображаются значки.

Может ли кто-нибудь предложить хороший и понятный способ достижения чего-то жизненно важного для библиотеки карт?


mapbox-gl-js mapbox-gl
person Andrejs Gubars    schedule 22.05.2016    source источник
comment
Как вы инициализируете свою карту?   -  person So4ne    schedule 23.05.2016
comment
Я действительно нашел ответ сам, скоро отправлю ответ. Сделаю небольшой гайд в ответ для новичков вроде меня.   -  person Andrejs Gubars    schedule 23.05.2016

Ответы (2)


arrow_upward
3
arrow_downward

Хорошо...

Решение оказалось проще, чем я думал, спасибо @tristen за размещение полезных ссылок, и я очень надеюсь, что люди сочтут их полезными.

Я обнаружил, что самый простой способ сделать это - выполнить следующие простые шаги.

1) Создайте собственную карту, используя Mapbox Studio

2) Загрузите свои пользовательские маркеры / значки к изображениям (просто отредактируйте свойства щелчка по карте (нижний левый угол) -> щелкните любой слой -> значок -> добавьте изображения SVG (если вы сами создали собственные значки, как я) используя Adobe Illustrator, убедитесь, что сохраните их в старом формате (что-то устаревшее ...), иначе ваши значки будут черно-белыми) -> и нажмите "Сохранить")

3) Ссылайтесь на карту, которую вы создали в своем JavaScript файле, как это

map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/username/aasdasdassdfsdfsdfsdf131', //stylesheet location
      center: [ -115.15628814697266,
          36.173079792635654], // starting position
      zoom: 10.5
        // starting zoom
    });

4) Теперь вы можете ссылаться на свои маркеры / значки, например, я загрузил, и SVG называется golf.svg, поэтому, когда я определяю свой слой, я могу сделать это: "marker-symbol": "golf"

И это в значительной степени все.

person Andrejs Gubars    schedule 10.03.2017

arrow_upward
2
arrow_downward

Некоторые ссылки:

  1. Здесь есть документация по созданию пользовательских маркеров в Studio и добавлению их в карту Mapbox GL JS: https://www.mapbox.com/help/custom-markers/

  2. Хотя я бы не рекомендовал делать это таким образом, вот пример, который отображает точку на карте с использованием настраиваемого элемента DOM: http://bl.ocks.org/tristen/10b69f89b600ca0433fdc472db6a6cab

  3. Этот комментарий (и обсуждение!) Предоставляет предысторию того, почему такой вариант использования, как отображение настраиваемого маркера, требует пары дополнительных шагов: https://github.com/mapbox/mapbox-gl-js/issues/656#issuecomment-216305579

person tristen    schedule 23.05.2016