Javascript 传单+；map.fitbunds

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

函数MapWellscreen（）{
const mapref=useRef（null）；
const[map，setMap]=useState（null）；
const[polygon，setPolygon]=useState（null）；
常数[井口，设置井口]=使用状态（[]）；
const{rootState，rootDispatch}=useRootContext（）；
const{wellState，wellDispatch}=useWellContext（）；
useffect（（）=>{
异步函数getPolygonF（）{
const getPolygon=rootState.polygonsList；
const gethough=rootState.wellsList；
const polygonModel=新多边形（getPolygon.data）；
setPolygon（polygonModel.geoJson）；
if（wellState.selectedWell.fieldIdentifier）{
设x=get0.filter(
（x） =>x.fieldIdentifier===wellState.selectedWell.fieldIdentifier
);
设置井口（x）；
}否则设置井口（Get井口）；
常量井图=L.map（mapref.current{
maxZoom:12，
zoomSnap:1，
zoomDelta:1，
maxBounds:L.latLngBounds（[-90，-180]，[90180]），
}).setView（[-25.7，-43.2]，6）；
setMap（井图）；
}
if（rootState.polygonsList&&rootState.wellsList.length）{
getPolygonF（）；
}
}，[rootState.polygonsList，rootState.wellsList]）；
useffect（（）=>{
如果（地图）{
蒂莱耶(
'https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z} /{y}/{x}.png'，
{
id:‘equinor/psa/数据清单’，
}
).addTo（地图）；
L.geoJSON（多边形{
风格：功能（特征）{
返回{
中风：是的，
填充颜色：“#229922”，
颜色：“#229922”，
填充不透明度：0.4，
不透明度：1.0，
体重：3，
};
},
})
.bindPopup（功能（层）{
返回layer.feature.properties.name；
})
.addTo（地图）；
L.控制
.图形比例({
填充：是的，
双线：对，
是的，
位置：'bottomright'，
标签位置：'下方'，
最大单位宽度：160，
})
.addTo（地图）；
const svg=d3.select（map.getPanes（）.overlypane）.select（'svg'）；
const g=svg.select（'g'）；
井口.前端（功能（d）{
d、 LatLng=新的L.LatLng（d.纬度，d.经度）；
});
const groupWells=g
.selectAll（'g'）
.数据（井口）
.输入（）
.append（'g'）
.attr（'pointer-events'，'visible'）；
常数点=群井
.append（'圆'）
.attr（'class'，'black'）
.attr（'id'，（d）=>`id-${d.wellboreGUID}`）
.attr（'r'，1.7）
.on（'点击'）功能（d）{
手摇变焦（d）；
控制台日志（d）；
无柄选井（d）；
});
常量标签=groupWells
.append（'文本'）
.style（'显示'，'无'）
.文本（（d）=>d.唯一标识符）；
更新（）；
地图打开（“视图重置”，更新）；
地图显示（'缩放'，更新）；
}
}，[地图、多边形、井口]；
const handleSelectedWell=（well）=>{
承诺，决心(
油井调度({
键入：“设置所选井”，
有效负载：{label:'Select Well'，guid:null，fieldIdentifier:null}，
})
)然后（（）=>wellDispatch（{type:'SET_SELECTED_WELL'，payload:WELL}））；
};
常量handleChangeZoom=（井）=>{
const wellBounds=新的L.latLng（井纬度、井经度）；
边界图（井界）；
};
返回；
}
导出默认MapWellscreen；

如果要使用

fitBounds（）

必须使用

L.latLngBounds

。但是你必须在一个长方形中思考。您需要两个车削点（角）

---

要平移到latlng，可以使用

map.flyTo（latlng，zoom）

如果要使用

fitBounds（）

则必须使用

L.latLngBounds

。但是你必须在一个长方形中思考。您需要两个车削点（角）

---

要平移到latlng，可以使用map.flyTo（latlng，zoom）

我按照您告诉const handlechangezom=（well）=>{const wellBounds=new L.latLngBounds（well.lation，well.longitude）；map.fitBounds（wellBounds）；}；我仍然得到错误：×错误：边界无效。@RayssaRocha，您仍然使用一个点的纬度和经度，而不是两个

latlng

s。你需要有两个点来围绕你感兴趣的点构建一个矩形，因为一个点是无量纲的，你不能缩放单个点的边界；我仍然得到错误：×错误：边界无效。@RayssaRocha，您仍然使用一个点的纬度和经度，而不是两个

latlng

s。你需要有两个点来围绕你感兴趣的点构建一个矩形，因为一个点是无量纲的，你不能缩放单个点的边界。你想“放大针”-但放大多少？你想“放大针”-但放大多少？

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