时间戳

首页 > 解决方案 > LEAFLET + map.fitBounds

javascript - LEAFLET + map.fitBounds

问题描述

我正在尝试通过单击该点来放大地图。但由于某种原因，我遇到了错误“×错误：边界无效。”。我不知道我做错了什么来给出这个错误。如果没有，我该怎么做？在“点击”的动作中。错误在第 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;

标签： javascriptreactjsd3.jsleaflet

解决方案

如果你想使用fitBounds()你必须使用L.latLngBounds. 但是你必须在一个矩形中思考。您需要两个纬度点（角）。

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

要平移到 latlng，您可以使用map.flyTo(latlng, zoom)

推荐阅读