MapBoxGL добавить круговые маркеры GeoJSON с пользовательским цветом

Мне нужно добавить маркеры на карту mapboxgl, используя данные GeoJSON, которые я получаю через AJAX. Я добавить слой GeoJSON таким образом:MapBoxGL добавить круговые маркеры GeoJSON с пользовательским цветом

geoJSONSource = new mapboxgl.GeoJSONSource({ 
     data: geodata 
    }); 

    map.addSource('markers', geoJSONSource); 
    map.addLayer({ 
     "id": "markers", 
     "interactive": true, 
     "type": "symbol", 
     "source": "markers", 
     "layout": { 
      "icon-image": "{marker-symbol}-15", // stuff in {} gets replaced by the corresponding value 
      "icon-allow-overlap": true, 
      "icon-size": 1 // size of the icon 
     } 
    });

В самих данных GeoJSON, я поставил каждую функцию, чтобы иметь свойство «маркер-символ» к «ракете» в цикле, прежде чем я добавить в формат GeoJSON на карту. Однако мне нужны маленькие круговые изображения для каждой точки, а не ракеты. Я хотел бы установить точки на маленький круговой образ одного из трех цветов, в зависимости от данных, содержащихся в GeoJSON. Я планирую выбрать изображение svg в цикле, прежде чем добавить GeoJSON на карту.

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

Я использую стиль карточек street-v8; Я пытался экспериментировать с созданием своих собственных стилей, чтобы получить доступ пользовательских изображений для маркеров согласно этой ссылке:

https://www.mapbox.com/help/custom-markers/#use-images-in-mapbox-gl-js

Но я не мог понять.

источник

2016-03-22 stack_tom

Значки маркеров загружаются на основе current sprite sheet, установленных в стиле.

Чтобы загрузить пользовательское изображение значка, вам нужно указать пользовательский спрайт json-файл в вашем стиле. Json. Вот соответствующий GitHub обсуждение с подробной информацией: https://github.com/mapbox/mapbox-gl-js/issues/822

Вот пример использования пользовательских спрайтов: http://codepen.io/znak/pen/PqOEyV

Карта использует пользовательский стиль определен в файле с именем customstyle.json:

var map = new mapboxgl.Map({ 
    container: 'map', 
    center: center, 
    zoom: 8, 
    style: 'http://www.lenart.pl/assets/codepen/customstyle.json' 
});

где customstyle.json относится к customsprite.json

"sprite": "http://www.lenart.pl/assets/codepen/customsprite",

customsprite.json определяет, как обрезать соответствующий PNG spritesheet, расположенный здесь:

http://www.lenart.pl/assets/codepen/customsprite.png

Вы также можете использовать эту утилиту: https://github.com/mapbox/spritezero-cli для создания спрайтов JSON и соответствующий PNG spritesheet из каталога, полный SVG-файлов.

источник

2016-03-24 13:07:36 kmandov

Есть ли способ отредактировать стиль. Json стиля, созданного с использованием студии boxbox? Мне нужен один из предварительно построенных шаблонов для создания карты и просто добавить значок справки для использования с маркерами. Я предполагаю, что другой вопрос: если я использую пользовательский файл стиля json, как вы упомянули, смогу ли я легко иметь базовую карту карт в качестве базы (с дорогами, границами и т. Д.), К которой я могу добавить свой собственный спрайт для маркер? Или я должен предоставить все, чтобы нарисовать основную карту, если я поеду на customstyle.json? –

Не пробовал, но вы должны иметь возможность дублировать существующий стиль картона и изменять ссылку спрайта. Поскольку style.json относится к тем же источникам векторных данных, он должен работать. Если вы используете Mapbox Studio, вы можете загрузить свои svgs напрямую, и он создаст электронную таблицу для вас: https://www.mapbox.com/help/define-sprite/ – kmandov

Я загрузил стиль style.json стиля, который я сделал в MapBox. Затем я создал sprite.json и sprite.png моего svg-файла, используя этот инструмент, который вы связали, а также изменив переменную sprite в style.json, чтобы указать на sprite.json, который я создал с помощью этого инструмента. Он отлично поработал, спасибо за подробный ответ. –

MapBoxGL добавить круговые маркеры GeoJSON с пользовательским цветом

ответ

Смежные вопросы