如何从react-leaflet调用getFeatureInfo？

Question

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

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

Answer 1

react-leaflet

WMSTileLayer

组件实现了核心传单

L.TileLayer

，但不支持

GetFeatureInfo

：

没有 GetCapability 支持，没有图例支持，也没有 获取功能信息支持。

您可以考虑使用Leaflet的WMS插件，它支持

GetFeatureInfo

，例如

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

结果

演示

Answer 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;
}

Answer 3

这里也一样：

import React, { Component } from 'react';
import { render } from 'react-dom';
import {
  withLeaflet,
  useLeaflet,
  MapContainer,
  TileLayer,
  useMap,
} from 'react-leaflet';
// import CustomWMSLayer from './CustomWMSLayer';
// import { } from 'react-leaflet';
import * as WMS from 'leaflet.wms';

function CustomWMSLayer(props) {
  const { url, options, layers } = props;
  const ctx = useMap();

  if (!ctx) {
    // Handle the case where useMap() returns undefined
    console.error('Map context is undefined.');
    return null;
  }
  const map = ctx.map;

  if (!map) {
    // Handle the case where the map object is undefined
    console.error('Map object is undefined.');
    return null;
  }

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

  if (source) {
    for (let name of layers) {
      const layer = source.getLayer(name);
      if (layer) {
        layer.addTo(map);
      } else {
        console.error(`Layer '${name}' not found in WMS source.`);
      }
    }
  } else {
    console.error('WMS source is undefined.');
  }

  return null;
}

export default function Map() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={3}>
      <TileLayer
        attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />

      <CustomWMSLayer
        layers={['TOPO-WMS']}
        options={{
          format: 'image/png',
          transparent: 'true',
          attribution:
            "<a href='https://ows.terrestris.de/'>terrestris</a>",
          info_format: 'text/html',
        }}
        url="https://ows.terrestris.de/osm/service"
      />
    </MapContainer>
  );
}