reactjs - 如何从 react-leaflet 调用 getFeatureInfo？

Question

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

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

标签： reactjsleafletmapsopenstreetmapreact-leaflet

Answer 1

react-leafletWMSTileLayer组件实现L.TileLayer了不支持 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;
}

结果

演示