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

如何解决React-Leaflet：平移地图时标记消失

我有一个使用 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,shadowAnchor: [22,})}
                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,})}
            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.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 属性，但没有任何变化。

解决方法

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

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

致： removeOutsideVisibleBounds={false}

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