Mapbox 图层的 OnClick

Question

我正在使用

react-map-gl

将地图添加到我的 React 应用程序中。我想向我的

onClick

组件添加

Layer

事件，但

react-map-gl

似乎不支持它。 （此处的文档：https://visgl.github.io/react-map-gl/docs/api-reference/layer）

我最近发现

react-mapbox-gl

确实支持

onClick

组件的

Layer

事件，但我在通过

npm

安装它时遇到了麻烦（树依赖问题）。

我想知道这里是否有人设法使用

onClick

添加

react-map-gl

事件？有什么建议吗？

示例代码如下：

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

谢谢， 罗伯特

Answer 1

事实上，

react-map-gl

一定会支持

onClick

活动。

但是，该事件并非设计为响应每个单独的层，而是位于默认的

Map

组件下。您需要指定

interactiveLayerIds

属性才能使其在特定图层上工作。

请参阅react-map-gl文档中的

onClick事件

部分。

Answer 2

将其添加到您的handleClick函数中，并添加您想要做出反应的图层ID

const feature = event.features.find((f) => f.layer.id === "routeId");