Стилизация маркеров MapBox GL

Я пытаюсь перейти от использования Mapbox.js с Leaflet к Mapbox GL.

У меня есть следующий геоджсон, который должен отображаться в соответствии с прикрепленным изображением. К сожалению, после прочтения множества статей и документации, связанной с визуализацией, управляемой данными, я наткнулся на стену. Интересно, может ли кто-нибудь помочь с примером ?!

Вот геоджсон:

{ "type":"Feature",geometry: { "type":"Point","coordinates":[1.1147,51.7829] },properties: { "title":"Paul","marker-color":"#0094F7","marker-size":"large","marker-symbol":"star" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.34851,52.6123] },properties: { "title":"Will","marker-color":"#F9883E","marker-size":"large","marker-symbol":"1" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.76389,53.0232] },properties: { "title":"Mark","marker-color":"#F1574E","marker-size":"large","marker-symbol":"13" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-.127211,51.6014] },properties: { "title":"David","marker-color":"#83C736","marker-size":"large","marker-symbol":"20" } },
{ "type":"Feature",geometry: { "type":"Point","coordinates":[-2.06682,53.4986] },properties: { "title":"Adam","marker-color":"#FC5C53","marker-size":"large","marker-symbol":"rocket" } }

Значения цвета устанавливаются конечным пользователем и могут быть любыми, поэтому я не могу просто создать много подходящих изображений, а числа относятся к датам, поэтому будут 1-31.

Вот как это сейчас выглядит в Mapbox.js:  mapbox_markers

Спасибо всем!


person Neil Simpson    schedule 08.03.2017    source источник
comment
Вы нашли легкий способ?   -  person anvarik    schedule 04.12.2018
comment
Ответ ниже сработал. Придется перебирать каждую точку с помощью HTML-элемента стилей. Не рекомендую делать это по большому количеству точек, но сработало для моего варианта использования.   -  person Neil Simpson    schedule 04.12.2018


Ответы (1)


Используя маркеры, у вас есть полный контроль над отображением любого HTML-элемента, который вы как - так что вы можете использовать CSS для создания круга или слезы правильного цвета или значка SVG.

См. Этот пример: https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

По сути, вместо добавления GeoJSON непосредственно в качестве источника в карту, вы захотите перебрать каждую точку и добавить маркеры на карту.

person Steve Bennett    schedule 08.03.2017
comment
Одна вещь, которую нужно добавить для людей, которые все еще ищут способ простого создания создателей, как на прикрепленном изображении: текущая версия Mapbox GL js (0.51.1), к сожалению, не поддерживает создание маркеров с любыми символами, кроме круга (docs.mapbox.com/mapbox-gl-js/example/marker- from-geocode) внутри выдрать из коробки. - person Yurii Bratchuk; 28.01.2019