Leaflet for React：将 Leaflet 的覆盖图转换为 Leaflet for React

Question

我有以下用于传单的代码：

      const TileLayerNOAA = L.TileLayer.extend({
  getTileUrl(coords) {
    var z = coords.z -2;
    if (z<0) z=0;
    return 'https://gis.charttools.noaa.gov/arcgis/rest/services/MarineChart_Services/NOAACharts/MapServer/WMTS/tile/1.0.0/MarineChart_Services_NOAACharts/default/GoogleMapsCompatible/'+(coords.z-2)+'/'+coords.y+'/'+coords.x+'.png';
  }
});

  var charts = new TileLayerNOAA(curl, {
    attribution: 'NOAA Marine Charts',
    maxZoom: 17,
    tms: false,
    opacity: .4
  })

我目前有以下内容：

 const TileLayerNOAA = ({ coords, chartsEnabled, setChartsEnabled, ...props }) => {
    const adjustedZoom = Math.max(0, coords.z - 2);
    const url = `https://gis.charttools.noaa.gov/arcgis/rest/services/MarineChart_Services/NOAACharts/MapServer/WMTS/tile/1.0.0/MarineChart_Services_NOAACharts/default/GoogleMapsCompatible/${adjustedZoom}/${coords.y}/${coords.x}.png`;
  
    return (
      <TileLayer
        url={url}
        attribution="NOAA Marine Charts"
        maxZoom={17}
        tms={false}
        opacity={0.4}
        checked={chartsEnabled}
        onLoad={() => setChartsEnabled(true)}
        {...props}
      />
    );
  };



  const overlayMaps = {
    "NOAA Charts": (
      <TileLayerNOAA
      chartsEnabled={chartsEnabled}
      setChartsEnabled={() => setChartsEnabled(true)}
    />
    )
  };

在我的退货声明中我有：

    <LayersControl position="bottomright">
          {Object.entries(baseMaps).map(([name, layer]) => (
            <BaseLayer key={name} checked={name === 'Satellite'} name={name}>
              <TileLayer url={layer._url} attribution={layer.options.attribution} {...layer.options} />
            </BaseLayer>
          ))}
          {Object.entries(overlayMaps).map(([name, layer]) => (
            <Overlay key={name} checked={false} name={name}>
  {layer}
</Overlay>
          ))}
        </LayersControl>

棘手的部分是获取 z 并为每个 url 减去 2，或者如果 z 为负则将其设置为 0。当前的 React Leaflet 代码目前无法运行。给出未捕获的运行时错误：无法读取未定义的属性（读取“z”） 类型错误：无法读取未定义的属性（读取“z”）

如果我将 url 硬编码为以下内容，它可以工作，但在放大或缩小后就会消失，因此确认 url 可以工作：

const url = `https://gis.charttools.noaa.gov/arcgis/rest/services/MarineChart_Services/NOAACharts/MapServer/WMTS/tile/1.0.0/MarineChart_Services_NOAACharts/default/GoogleMapsCompatible/11/{y}/{x}.png`; 

Answer 1

能够得到它：

import { TileLayer, useMap } from 'react-leaflet';
import { useEffect, useState } from 'react';

const TileLayerNOAA = ({ chartsEnabled, setChartsEnabled, ...props }) => {
  const [adjustedZoom, setAdjustedZoom] = useState(0);
  const map = useMap();

  useEffect(() => {
    const updateZoom = () => {
      const currentZoom = map.getZoom();
      setAdjustedZoom(Math.max(0, currentZoom - 2));
    };

    // Attach the zoom update function to the Leaflet map's zoomend event
    map.addEventListener('zoomend', updateZoom);

    // Initial update
    updateZoom();

    // Cleanup function to remove the event listener when the component unmounts
    return () => {
      map.removeEventListener('zoomend', updateZoom);
    };
  }, [map]);

  const url = `https://gis.charttools.noaa.gov/arcgis/rest/services/MarineChart_Services/NOAACharts/MapServer/WMTS/tile/1.0.0/MarineChart_Services_NOAACharts/default/GoogleMapsCompatible/${adjustedZoom}/{y}/{x}.png`;

  return (
    <TileLayer
      url={url}
      attribution="NOAA Marine Charts"
      maxZoom={17}
      tms={false}
      opacity={0.4}
      checked={chartsEnabled}
      onLoad={() => setChartsEnabled(true)}
      {...props}
    />
  );
};

export default TileLayerNOAA;

基本上你需要使用mapRef来访问react-leaflet中的缩放