Mapbox gl js - перекрывающиеся слои и обработка событий мыши

Question

Существует ли какой-либо понятный и надежный (и описанный) механизм управления событиями мыши для перекрывающихся слоев в Mapbox GL JS?Например, у меня есть 3 перекрывающихся слоя, но хочу, чтобы обработчик щелчков вызывался только для слоя, который находится сверху, но не для всех 3 слоев - это возможно как-то?В настоящее время, в качестве обходного пути, я отслеживаю события MouseEnter и MouseLeave и вызываю соответствующий обработчик на основе этого.Но мне это решение совсем не нравится, потому что оно портит мой код излишней логикой.

Answer 1

Не очень понятно, с какой проблемой вы столкнулись.Если у вас есть три слоя (layer1, layer2, layer3), где верхний слой - layer1, и вы хотите отвечать только на события щелчка для него, вы делаете:

map.on('click', 'layer1', function(e) {...})

Если вы не это имеете в виду,возможно, уточнить, что вы подразумеваете под «перекрывающимися слоями» и «хотите, чтобы обработчик кликов вызывался только для слоя, который находится сверху».Кроме того, предоставьте свой текущий код с примером проблемы.

РЕДАКТИРОВАТЬ

Таким образом, вы хотите одно событие щелчка, которое применяется к нескольким слоям и взаимодействует с самым верхним элементом:

map.on('click', function(e) {
  let f = map.queryRenderedFeatures(e.point, { layers: ['layer1','layer2','layer3'] };
  if (f.length) {
    showPopup(f[0]);  //topmost feature
  }
});

Если вы хотите различное поведение в зависимости от того, какой слой был поражен:

map.on('click', function(e) {
  let f = map.queryRenderedFeatures(e.point, { layers: ['layer1'] };
  if (f.length) {
    handleLayer1(f[0]);
  } 
  return;
  f = map.queryRenderedFeatures(e.point, { layers: ['layer2'] };
  if (f.length) {
    handleLayer2(f[0]);
  }
  return;
  f = map.queryRenderedFeatures(e.point, { layers: ['layer3'] };
  if (f.length) {
    handleLayer3(f[0]);
  }
});