如何从 react-leaflet 调用 getFeatureInfo？答案

【问题标题】：How to call getFeatureInfo from react-leaflet?如何从 react-leaflet 调用 getFeatureInfo？
【发布时间】：2020-04-09 14:31:48
【问题描述】：

我有来自 github 的示例如何添加 wms 层： https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/wms-tile-layer.js

但是如何从 wms 层点击获取FeatureInfo？

【问题讨论】：

标签： reactjs leaflet maps openstreetmap react-leaflet

【解决方案1】：

react-leaflet WMSTileLayer 组件实现了核心传单 L.TileLayer 其中 does not support GetFeatureInfo ：

没有 GetCapabilities 支持，没有图例支持，也没有 GetFeatureInfo 支持。

您可以考虑使用支持GetFeatureInfo的Leaflet的WMS插件，例如leaflet.wms

安装步骤：

安装leaflet.wms 包：

npm i leaflet.wms

为WMS层引入一个组件：

import React, { Component } from 'react';
import { withLeaflet, useLeaflet } from "react-leaflet";
import * as WMS from "leaflet.wms";

function CustomWMSLayer(props) {
    const { url, options,layers } = props;
    const ctx = useLeaflet()
    const map = ctx.map;


    // Add WMS source/layers
    const source = WMS.source(
        url,
        options
    );

    for(let name of layers){
        source.getLayer(name).addTo(map)
    }

    return null;
}

结果

Demo

【讨论】：

【解决方案2】：

在 React-Leaflet V3 中，useLeaflet 和 withLeaflet Hooks 被替换为 useMap。 @Vadim Gremyachev 代码的更新如下。

import React from 'react';
import {  useMap } from "react-leaflet";
import * as WMS from "leaflet.wms";

function GetFeatureInfoWms(props) {
    const { url, options,layers } = props;
    const map = useMap()

// Add WMS source/layers
const source = WMS.source(
    url,
    options
);

for(let name of layers){
    source.getLayer(name).addTo(map)
}
return null;
}

【讨论】：