OnClick for mapbox 图层答案

【问题标题】：OnClick for mapbox LayerOnClick for mapbox 图层
【发布时间】：2022-06-13 11:00:27
【问题描述】：

我正在使用 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} />
  );
};

谢谢，罗伯特

【问题讨论】：

不确定您需要对 onClick 做什么，但这里有互动示例 visgl.github.io/react-map-gl/examples。

标签： javascript reactjs mapbox react-map-gl

【解决方案1】：

事实上，react-map-gl 肯定会支持 onClick 活动。

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

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

【讨论】：