开发者问题收集

Mapbox 图层的 OnClick

2022-03-25
6467

我正在使用 react-map-gl 向我的 React 应用添加地图。我想向我的 Layer 组件添加 onClick 事件,但 react-map-gl 似乎不支持它。 (文档在此处: https://visgl.github.io/react-map-gl/docs/api-reference/layer

我最近发现 react-mapbox-gl 确实支持 Layer 组件的 onClick 事件,但我无法通过 npm 安装它(树依赖性问题)。

我想知道这里是否有人设法使用 react-map-gl 添加 onClick 事件?有什么建议吗?

示例代码如下:

import React from "react";
import { Layer, LayerProps } from "react-map-gl";

export const MapLayer: React.FunctionComponent<LayerProps> = ({
  id,
  type,
  paint,
  source,
  layout,
}) => {
  return (
    <Layer id={id} type={type} paint={paint} source={source} layout={layout} />
  );
};

谢谢, 罗伯特

2个回答

事实上, react-map-gl 肯定会 支持 onClick 事件。

但是,该事件并非设计用于响应每个单独的图层,而是位于默认的 Map 组件下。您需要指定 interactiveLayerIds 属性才能使其在特定图层上工作。

请参阅 react-map-gl 文档中的 onClick 事件 部分。

Ethan
2022-06-13

将其添加到您的 handleClick 函数中,并使用您想要响应的图层 ID

const feature = event.features.find((f) => f.layer.id === "routeId");
Dobány Réka
2023-12-06