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

Question

Я ищу подход, который позволил бы мне создать простой пользовательский маркер на моей карте, например 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" 
}); 

Как вы можете догадаться, моя карта не отображает значки.

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

Answer 1

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

1. Там в документации здесь о создании пользовательских маркеров в студии и добавить их на карту 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

Answer 2

Ну ...

Решения было проще, чем я думал, благодаря @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"

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