reactjs - 有没有办法在地图上的反应传单中显示下拉菜单

Question

我试图在反应传单地图上显示一个简单的下拉列表，以显示某些数据的标记。一旦用户从下拉列表中选择一个选项，我希望在地图上显示一些数据。目前我还没有找到一个直接的方法来做到这一点。或任何在线示例代码。

我尝试了一个模块 react-leaflet-control 但由于一些打字稿错误，我假设它无法正常工作。我曾尝试使用 react-leaflet 显示复选框而不是下拉列表，LayerControl.Overlay但我认为这不是我需要的，它对我的​​情况并不真正有用。任何建议和示例代码将不胜感激。

标签： reactjsreact-leaflet

Answer 1

你试过LayersControl吗？你可以在这里找到一些文档

这就是它的工作原理。您定义一个LayersControl标签，并且可以将Overlay标签与您的 GeoJSON 数据一起添加。每个Overlay标签将是一个不同的层。所以你可以有多个 GeoJSON 层。每个图层将是下拉菜单中的一项。

<LayersControl position="topright" collapsed={false}>
    {this.state.layersName.map((layerName, i) => {
        return (
            <Overlay key={i} name={`${layerName}`} checked>
                <GeoJSON
                    data={this.state.layersData[i]}
                />
            </Overlay>
        )
    })}
</LayersControl>