1

我想知道是否有人知道如何更新本教程（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;
4

2 回答 2

0

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 新手来说非常干净。做得好。

于 2021-09-27T15:38:05.713 回答
0

这是用更正的 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),
  });
};

然后注意使用refto call 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();
};
于 2021-12-21T03:48:23.717 回答