将 Chloropleth 教程更新为 react-leaflet v3，使用函数 React 组件

Question

我想知道是否有人知道如何更新本教程 (https://leafletjs.com/examples/choropleth/) 以使用 react-leaflet v3 以及 React 函数组件。我无法工作的部分是当您将鼠标移出图层时重置 GeoJSON 样式，以及在您单击图层时放大图层。这是我现在的代码（我现在不太担心教程的实际着色部分）。另外，我一般不太擅长 React 或 JS，所以如果你发现任何不好的做法，请向我指出！谢谢！

import '../App.css';
import caMapData from '../data/caProvince.json'
import mxMapData from '../data/mxStates.json'
import usMapData from '../data/usStates.json'

import {MapContainer, TileLayer, Marker, Popup, GeoJSON} from 'react-leaflet'

function MainMap() {
  const geoStyleCA = {
    fillColor: 'white',
    weight: 2,
    opacity: 1,
    color: 'red',
    dashArray: '3',
    fillOpacity: 0.5
  }

  const geoStyleUS = {
    fillColor: 'white',
    weight: 2,
    opacity: 1,
    color: 'blue',
    dashArray: '3',
    fillOpacity: 0.5
  }

  const geoStyleMX = {
    fillColor: 'white',
    weight: 2,
    opacity: 1,
    color: 'green',
    dashArray: '3',
    fillOpacity: 0.5
  }

  const onEachFeature = ((feature, layer) => {
    layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight,
      click: zoomToFeature
    });
  })

  const highlightFeature = ((e) => {
    e.target.bringToFront();
    e.target.setStyle({
      weight: 5,
      color: '#666',
      dashArray: '',
      fillOpacity: 0.7
    });
  })

  const resetHighlight = ((e) => {
    // update this to work with react-leaflet 3 and functional react components
    e.target.resetStyle();
  })

  const zoomToFeature = ((e) => {
    // update this to work with react-leaflet 3 and functional react components
    e.fitBounds(e.target.getBounds());
  })

  return(
    <MapContainer
      center={[44.967243, -103.771556]}
      zoom={4}
      scrollWheelZoom={true}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[44.967243, -103.771556]}>
        <Popup>
          Middle of US.
        </Popup>
      </Marker>
      <GeoJSON data={caMapData.features} style={geoStyleCA}/>
      <GeoJSON data={usMapData.features} style={geoStyleUS} onEachFeature={onEachFeature}/>
      <GeoJSON data={mxMapData.features} style={geoStyleMX}/>
    </MapContainer>
  );
}

export default MainMap;

Answer 1

fitBounds 是要在传单地图上调用，而不是在目标上调用：

import { ... useMap } from 'react-leaflet';

const map = useMap();
const zoomToFeature = ((e) => {
  // update this to work with react-leaflet 3 and functional react components
  map.fitBounds(e.target.getBounds());
})

resetStyle 是指在 GeoJSON 对象上调用：

  const onEachFeature = ((feature, layer) => {
    layer.on({
      mouseover: highlightFeature,
      mouseout: () => resetHighlight(layer),
      click: zoomToFeature
    });
  })

  const resetHighlight = ((layer) => {
    // update this to work with react-leaflet 3 and functional react components
    layer.resetStyle();
  })

总的来说，对于 JS 新手来说，您的代码非常干净。干得好。

Answer 2

这是 Chloropleth 的重写，更正了 resetStyle()。请注意，要使用 resetStyle()，您必须使用 useRef() 并将其传递给事件。

import { useRef } from "react";

并且在使用GeoJSON时注意它的用法：

const geoJson = useRef();
return (
  <GeoJSON
    data={states}
    onEachFeature={(feature, layer) =>
      onEachFeature(geoJson, feature, layer)
    }
    ref={geoJson}
    style={applyStyle}
  />
);

然后在事件函数中：

const onEachFeature = (geoJson, feature, layer) => {
  layer.on({
    mouseover: () => highlightFeature(feature, layer),
    mouseout: () => resetHighlight(geoJson, layer),
  });
};

然后注意使用ref调用resetStyle():

const resetHighlight = (geoJson, layer) => {
  geoJson.current.resetStyle(layer);
};

const highlightFeature = (feature, layer) => {
  layer.setStyle({
    weight: 5,
    color: "#666",
    dashArray: "",
    fillOpacity: 0.7,
  });
  layer.bringToFront();
};

将 Chloropleth 教程更新为 react-leaflet v3，使用函数 React 组件

Updating the Chloropleth Tutorial to react-leaflet v3 With Function React Components

reactjs

react-leaflet

react-leaflet-v3