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