onPress 会触发

Question

我正在使用 @rnmapbox/maps 的 Mapbox 库，并遇到 onPress 事件问题。当我在 shapesource 或 CircleLayer 外部稍微单击时，会触发 onPress 事件，但我只希望当用户专门单击 CircleLayer 对象时触发它。这是我正在使用的代码的简单版本以及触发 onPress 事件时调用的 handleOnPress 函数：

<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);
};

这个问题可以从下面给出的示例图像中理解，如果我单击黄色位置（圆圈层之外），则会触发圆圈层（白色标记）。

我正在寻找有关如何修改代码的想法或建议，以便仅在单击 shapesource 中的 Circlelayer 对象时才触发 onPress 事件。由handleOnPress函数接收到的事件对象结构如下所示：

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

Answer 1

我看到两种可能性。我不了解该库，所以我只能根据假设提供信息并快速搜索他们的文档。

1. ShapeSource 应该有一个“hitbox”属性，它允许您设置高度和宽度。默认值为 44x44 像素。假设您提供的 10 半径以 px 为单位测量，则碰撞箱将是所示形状的两倍大。 https://github.com/rnmapbox/maps/blob/main/docs/ShapeSource.md#hitbox

2. 如果这不起作用，我会考虑尝试看看在 onClick 事件中是否可以手动检查您拥有的 X 和 Y 坐标是否足够接近应该单击的点。可悲的是，文档似乎没有足够多地提及该事件或如何定义功能，让我无法明确地说这是否可能。