Pesquisa de site

javascript - onPress é acionado quando clico fora do Mapbox ShapeSource/CircleLayer

Estou usando a biblioteca Mapbox do @rnmapbox/maps e estou enfrentando um problema com o evento onPress. Quando clico um pouco fora do shapesource ou do circlelayer, o evento onPress é acionado, mas eu quero que ele seja acionado apenas quando o usuário clicar especificamente no objeto circlelayer. Aqui está uma versão simples do código que estou usando e a função handleOnPress que é chamada quando o evento onPress é acionado:

<Mapbox.ShapeSource 
  hitbox={false}
  id="heatmapAlcoSource" 
  shape={{ type: 'FeatureCollection', features: alcoData }} 
  options={{ cacheKey: `${Date.now()}` }}
  onPress={handleOnPress}
>
  <Mapbox.CircleLayer
    id="heatmapCircle"
    style={{
      circleRadius: 10,
      circleOpacity: 1,
      circleBlur: 1.1,
      circleColor: '#ff6161',
      circleStrokeWidth: 2,
      circleStrokeColor: '#ff6161',
    }}
  />
</Mapbox.ShapeSource>

const handleOnPress = (event) => {
  const feature = event.features[0];
  console.log(event);
  setSelectedFeature(feature);
};

O problema pode ser entendido a partir da imagem de exemplo dada abaixo, onde, se eu clicar na posição amarela (fora da camada do círculo), a camada do círculo (marcação branca) é acionada.

Estou procurando ideias ou sugestões sobre como modificar o código para que o evento onPress seja acionado apenas ao clicar no objeto circlelayer dentro do shapesource. A estrutura do objeto de evento recebida pela função handleOnPress é assim:

{
  "coordinates": {
    "latitude": 12.345678910111212,
    "longitude": 1.234567891011121
  },
  "features": [
    {
      "geometry": {...},
      "properties": {...},
      "type": "Feature"
    }
  ],
  "point": {
    "x": 170.3333282470703,
    "y": 286.3333282470703
  }
}

Resposta #1

Duas possibilidades que eu vejo. Eu não conheço a biblioteca, então só posso fornecer informações com base em suposição e uma rápida pesquisa nos documentos deles.

  1. O ShapeSource deve ter uma propriedade "hitbox", que permite definir a altura e a largura. O padrão é 44x44 pixels. Supondo que o raio 10 que você forneceu seja medido em px, a hitbox seria assim duas vezes maior que a forma exibida. https://github.com/rnmapbox/maps/blob/main/docs/ShapeSource.md#hitbox

  2. Se isso não funcionar, eu pensaria em tentar ver se, no evento onClick, você pode verificar manualmente se as coordenadas X e Y que você tem estão próximas o suficiente do ponto que deveria ter sido clicado. Infelizmente, os documentos não parecem mencionar informações suficientes sobre o evento ou como os recursos são definidos para que eu possa afirmar definitivamente se isso é possível.

Artigos relacionados