LEAFLET + map.fitBounds

Question

Я пытаюсь увеличить карту, нажимая на точку. но по какой-то причине у меня появляется ошибка «× Ошибка: границы недействительны». Я не знаю, что я делаю неправильно, чтобы выдавать эту ошибку. Если нет, как я могу это сделать? В действии «на клик». Ошибка в строке 152.

Объяснение экрана: на экране есть карта, на q есть несколько выводов, при нажатии на этот вывод часть экрана перезагружается и должна запускать экран уже с увеличением контакт, который я выбрал.

function MapWellscreen() {
  const mapref = useRef(null);
  const [map, setMap] = useState(null);
  const [polygon, setPolygon] = useState(null);
  const [wellheads, setWellhead] = useState([]);
  const { rootState, rootDispatch } = useRootContext();
  const { wellState, wellDispatch } = useWellContext();

  useEffect(() => {
    async function getPolygonF() {
      const getPolygon = rootState.polygonsList;
      const getWellhead = rootState.wellsList;
      const polygonModel = new Polygon(getPolygon.data);
      setPolygon(polygonModel.geoJson);
      if (wellState.selectedWell.fieldIdentifier) {
        let x = getWellhead.filter(
          (x) => x.fieldIdentifier === wellState.selectedWell.fieldIdentifier
        );
        setWellhead(x);
      } else setWellhead(getWellhead);

      const wellMap = L.map(mapref.current, {
        maxZoom: 12,
        zoomSnap: 1,
        zoomDelta: 1,
        maxBounds: L.latLngBounds([-90, -180], [90, 180]),
      }).setView([-25.7, -43.2], 6);
      setMap(wellMap);
    }

    if (rootState.polygonsList && rootState.wellsList.length) {
      getPolygonF();
    }
  }, [rootState.polygonsList, rootState.wellsList]);

  useEffect(() => {
    if (map) {
      L.tileLayer(
        'https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}.png',
        {
          id: 'equinor/psa/data-inventory',
        }
      ).addTo(map);

      L.geoJSON(polygon, {
        style: function (feature) {
          return {
            stroke: true,
            fillColor: '#229922',
            color: '#229922',
            fillOpacity: 0.4,
            opacity: 1.0,
            weight: 3,
          };
        },
      })
        .bindPopup(function (layer) {
          return layer.feature.properties.name;
        })
        .addTo(map);

      L.control
        .graphicScale({
          fill: true,
          doubleLine: true,
          showSubunits: true,
          position: 'bottomright',
          labelPlacement: 'below',
          maxUnitsWidth: 160,
        })
        .addTo(map);

      const svg = d3.select(map.getPanes().overlayPane).select('svg');
      const g = svg.select('g');

      wellheads.forEach(function (d) {
        d.LatLng = new L.latLng(d.latitude, d.longitude);
      });

      const groupWells = g
        .selectAll('g')
        .data(wellheads)
        .enter()
        .append('g')
        .attr('pointer-events', 'visible');

      const points = groupWells
        .append('circle')
        .attr('class', 'black')
        .attr('id', (d) => `id-${d.wellboreGUID}`)
        .attr('r', 1.7)
        .on('click', function (d) {
          handleChangeZoom(d);
          console.log(d);
          handleSelectedWell(d);
        });

      const label = groupWells
        .append('text')
        .style('display', 'none')
        .text((d) => d.uniqueWellboreIdentifier);

      update();
      map.on('viewreset', update);
      map.on('zoom', update);
    }
  }, [map, polygon, wellheads]);

  const handleSelectedWell = (well) => {
    Promise.resolve(
      wellDispatch({
        type: 'SET_SELECTED_WELL',
        payload: { label: 'Select Well', guid: null, fieldIdentifier: null },
      })
    ).then(() => wellDispatch({ type: 'SET_SELECTED_WELL', payload: well }));
  };

  const handleChangeZoom = (well) => {
    const wellBounds = new L.latLng(well.latitude, well.longitude);
    map.fitBounds(wellBounds);
  };

  return <div ref={mapref} className="mapdiv" id="map"></div>;
}

export default MapWellscreen;

Answer 1

Если вы хотите использовать fitBounds(), вы должны использовать L.latLngBounds. Но вы должны думать в прямоугольнике. Вам нужно две точки (углы).

const wellBounds = new L.latLngBounds([latlng1,latlng2]);
map.fitBounds(wellBounds);

Для панорамирования на широту вы можете использовать map.flyTo(latlng, zoom)