React-Leaflet：平移地图时标记消失

Question

我有一张用 react-leaflet 创建的地图。问题是当我在移动设备中移动地图时，靠近地图容器边缘的标记会消失。

我的地图上大约有 4000 个标记。我期望的是标记永远不会消失，即使它们离开了可见的地图区域。

地图组件：

<MapContainer
        ref={map}
        center={[31.89448, 54.36954]}
        zoom={5}
        worldCopyJump
        boundsOptions={{ padding: [50, 50] }}
        zoomControl={false}
        scrollWheelZoom={false}
        whenCreated={setMap}
        className={classes.leafletContainer}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {markerData ? (
          <MarkerClusterGroup>
            {markerData.map((singleMarker) => (
              <Marker
                key={`${singleMarker.organization_id}y`}
                icon={L.icon({
                  iconUrl: singleMarker.logo,
                  iconSize: [38, 95],
                  iconAnchor: [22, 94],
                  popupAnchor: [-3, -76],
                  shadowUrl: null,
                  shadowSize: [68, 95],
                  shadowAnchor: [22, 94],
                })}
                position={[singleMarker.lat, singleMarker.long]}
              >
                <Popup className={classes.popup}>
                  <MapCard organizationId={singleMarker.organization_id} />
                </Popup>
              </Marker>
            ))}
          </MarkerClusterGroup>
        ) : (
          <Grid item md={12} className={classes.mapLoading}>
            <Typography>در حال بارگذاری موسسه ها...</Typography>
          </Grid>
        )}

        {selectedOrganizationData && (
          <Marker
            key={selectedOrganizationData?.id}
            icon={L.icon({
              iconUrl: selectedOrganizationData?.logo,
              iconSize: [38, 95],
              iconAnchor: [22, 94],
              popupAnchor: [-3, -76],
              shadowUrl: null,
              shadowSize: [68, 95],
              shadowAnchor: [22, 94],
            })}
            position={[
              selectedOrganizationData?.addresses[0]?.lat,
              selectedOrganizationData?.addresses[0]?.long,
            ]}
          >
            <Popup className={classes.popup}>
              <MapCard organizationId={selectedOrganizationData?.id} />
            </Popup>
          </Marker>
        )}
      </MapContainer>

地图Css:

leafletContainer: {
    width: '100%',
    height: '100%',
    zIndex: 10,
    borderRadius: '0 0 21px 21px',
    boxShadow: '0 10px 15px 0 rgba(0, 0, 0, 0.16)',

    '& .leaflet-div-icon': {
      border: 'none',
      backgroundColor: 'transparent',
    },

    '& .leaflet-top': {
      bottom: '4px !important',
      top: 'unset !important',
    },

    '& img.leaflet-marker-icon': {
      background: 'url("../marker.svg")',
      backgroundSize: '100% 86%',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: '100% 100%',
      height: '38px !important',
      padding: '10px',
      borderRadius: '50%',
    },
  },

到目前为止，我已经测试了 worldCopyJump 属性但没有任何改变。

Answer 1

我们在平移地图时遇到了同样的问题。当离开屏幕大约 50% 时，每个标记都会消失。向相反方向平移会使它们出现，此时它们大约回到屏幕内的 50%。在我们的例子中，问题是由 MarkerClusterGroup 设置中的 'removeOutsideVisibleBounds' 参数引起的。

我们修改了参数： removeOutsideVisibleBounds={true}

收件人： removeOutsideVisibleBounds={false}

使用：react 17.0.2 + react-leaflet 3.2.0 + react-leaflet-markercluster 3.0.0-rc1

React-Leaflet：平移地图时标记消失

React-Leaflet: Markers disappear when panning the map

leaflet

reactjs

react-leaflet