react-leaflet：尝试将 onEachFeature 道具添加到 GeoJSON 但它不会工作

Question

我正在使用 react-leaflet 和 GeoJSON 在地图上指示一个区域。我想在 GeoJSON 的道具中添加 onEachFeature，这样当它点击或悬停在地图上时，一些信息就会弹出（例如：feature.geometry.type）。我将在下面举例说明我要实现的目标：

import React from 'react';
import { MapContainer, TileLayer, LayersControl, GeoJSON } from 'react-leaflet'

const { BaseLayer } = LayersControl;
const geoData = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -142.734375,
              -6.315298538330033
            ],
            [
              158.203125,
              -6.315298538330033
            ],
            [
              158.203125,
              67.47492238478702
            ],
            [
              -142.734375,
              67.47492238478702
            ],
            [
              -142.734375,
              -6.315298538330033
            ]
          ]
        ]
      }
    }
  ]
}
export default class GeoExample extends React.Component {
  
  onEachFeature(feature, layer) {
        layer.bindPopup(feature.geometry.type);
}

  style() {
    return ({
      weight: 2,
      opacity: 1,
      color: "blue",
      dashArray: "3",
      fillOpacity: 0.7
    });
  }

  
  render() {
    return (
      <div>
        <MapContainer center={[42.09618442380296, -71.5045166015625]} zoom={2} zoomControl={true}>
          <LayersControl position='topright'>
            <BaseLayer checked name='OpenStreetMap.Mapnik'>
              <TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"/>
            </BaseLayer>
            <GeoJSON data={geoData} style={this.style} onEachFeature={this.onEachFeature}/>
          </LayersControl>
        </MapContainer>
      </div>
    )
  }
}

你可以尝试编译它，style prop 正常工作，onEachFeature 是我的问题，因为我悬停并点击但似乎没有弹出任何东西。包中的版本：

"react-leaflet": "^3.0.5",
"react": "^15.0.0 || ^16.0.0 || ^17.0.0",
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0",

Answer 1

经过几个小时的调查，为什么它不能在我的机器上本地工作，问题是我为传单包含了错误的 css，如果我猜是 z-index 的问题，包括对 css 一切正常感谢支持:)

react-leaflet：尝试将 onEachFeature 道具添加到 GeoJSON 但它不会工作

react-leaflet : trying to add onEachFeature props to GeoJSON but it wont work

geojson

reactjs

react-leaflet