Mapbox GL: getLayer ('id') всегда неопределен - PullRequest
Новая
       10

Mapbox GL: getLayer ('id') всегда неопределен

0 голосов
/ 24 января 2019

Я создал слой mapbox для добавления пользовательских пинов.Это добавляет булавки к моей карте.Однако, когда я присоединяю событие onClick к этому слою, map.getLayer ('custom-pins') всегда возвращает undefined. 

export const drawCustomPinsToMap = (map: mapboxgl.Map, pin: 
IPinJson) => {
  const userGeolocationLayer = map.getLayer('user-geolocation- 
  shadow');

  const userGeolocationLayerId = userGeolocationLayer && 
  userGeolocationLayer.id;

  const { iconUrl, iconSize } = pin;

  map.loadImage(iconUrl, (error: string, image: HTMLImageElement) => 
    {
     if (error) throw error;
    map.addImage('custom-pin', image);
    map.addLayer(
      {
        id: 'custom-pins',
        type: 'symbol',
        interactive: true,
        source: 'pins-and-clusters',
        filter: ['!has', 'point_count'],
        layout: {
          'icon-image': 'custom-pin',
          'icon-size': iconSize
        }
      },
      userGeolocationLayerId
    );
  });
};

export const bindPinsClickHandlers = (
  map: mapboxgl.Map,
  handleLocationClick: (slug: string) => void,
  layerId: string
) => {
  if (map.getLayer(layerId)) {
    map.on('click', layerId, (event: any) => {
      if (!deviceMatch('phablet')) {
       map.flyTo({
          center: event.features[0].geometry.coordinates,
          zoom: 16
        });
      }
      handleLocationClick(event.features[0].properties.slug);
    });

    map.on('mouseenter', layerId, () => {
      map.getCanvas().style.cursor = 'pointer';
    });

    map.on('mouseleave', layerId, () => {
      map.getCanvas().style.cursor = '';
    });
  }
};

layerId определен и возвращает ожидаемый layerId, 'custom-pins».Но map.getLayer ('custom-pins') возвращает неопределенное значение, поэтому событие onClick не прикреплено к нему.

Есть идеи о том, что мне здесь не хватает?

1 Ответ

0 голосов
/ 25 января 2019

Разобрался - это была асинхронная проблема.map.loadImage является асинхронным, поэтому оно должно быть заключено в обещание.

...