Получить экземпляр функции маркера в MapBox - PullRequest
Новая
       18

Получить экземпляр функции маркера в MapBox

0 голосов
/ 29 октября 2018

Я новичок в mapbox GL JS и следую этому примеру: Добавление пользовательских маркеров в Mapbox GL JS https://www.mapbox.com/help/custom-markers-gl-js/

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

Пример: изменение свойства перетаскивания маркера собаки.

Было бы неплохо сделать что-то вроде этого: map.getMarker ( 'собака') setDraggable (истина);.

Я не вижу способа запросить какие-либо маркеры, добавленные на мою карту, или изменить свойства определенного маркера, такие как setLatLng, setDraggable после того, как они были добавлены на карту. Нет способа добавить коллекцию маркеров на карту. Спасибо за любую помощь!

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

Вы правы: Mapbox GL JS не хранит ссылки на маркеры . Однако вы можете хранить свои собственные ссылки на маркеры в массиве во время их создания.

В этом примере ниже я зацикливаюсь на наборе точечных объектов GeoJSON и создаю собственный HTML-маркер для каждого: 

let markersArray = [];

geojson.features.forEach(feature => {
  // create a HTML element for each feature
  let el = document.createElement("div");
  el.className = "marker";
  el.innerHTML = `
    <img src="custom-marker.png" height="20px" width="20px" />
    <span class="marker-label">${feature.properties.name}</span>
  `;

  // make a marker for each feature and add to the map
  let marker = new mapboxgl.Marker({
    element: el,
    anchor: "top"
  })
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);

  // add to my own array in an object with a custom 'id' string from my geojson
  markersArray.push({
    id: feature.properties.id,
    marker
  });
});

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

markersArray.push({
  id: feature.properties.id,
  coordinates: feature.geometry.coordinates,
  marker
});

Затем, если я хочу получить доступ к членам экземпляра маркера (например, setDraggable), я могу использовать Array.find(), чтобы вернуть первый экземпляр, который соответствует моим параметрам поиска в markersArray 

let someIdQuery = "some-id";

let queriedMarkerObj = markersArray.find(
  marker => marker.id === someIdQuery
);
queriedMarkerObj.marker.setDraggable(true);

(Обратите внимание, что Array.find() просто возвращает первый экземпляр в массиве, который соответствует вашему условию. Используйте что-то вроде Array.filter(), если вы хотите иметь возможность запрашивать более одного маркера.)

0 голосов
/ 29 октября 2018

Для изменения свойства маркера, например перетаскивания, проверьте его API. IE https://www.mapbox.com/mapbox-gl-js/api/#marker#setdraggable

Пользовательский маркер Mapbox строится по элементу html. Если вы хотите изменить визуальное отображение пользовательского элемента маркера, вы должны обновить его внутри HTML. Например, вот две функции, которые я использую, чтобы создать div с фоном изображения, а затем вернуть его в качестве маркера изображения 

    /**
     *  @function CustomMarkerWithIcon(): constructor for CustomMarker with image icon specify
     *  @param lnglat: (LngLat) position of the marker
     *            map: (Map) map used on
     *           icon: (image) object for custom image
     */
    function CustomMarkerWithIcon(lnglat, map, icon) {
        var el = document.createElement('div');
        el.className = 'marker';
        el.style.backgroundImage = 'url("' + icon.url + '")';
        el.style.backgroundSize = 'cover';
        el.style.width = icon.size.width;
        el.style.height = icon.size.height;
        el.style.zIndex = icon.zIndex;

        return new mapboxgl.Marker(el)
                    .setLngLat(lnglat)
                    .addTo(map);
    }


    /**
     *  @function ChangeMarkerIcon(): change marker icon
     *  @param marker: (marker) marker
     *           icon: (image) object for custom image
     */
    function ChangeMarkerIcon(marker, icon) {
        var el = marker.getElement();
        el.style.backgroundImage = 'url("' + icon.url + '")';
    }
...