在我的 react-leaflet map 应用程序中，我正在从 JSON 文件中获取标记位置，并希望将位于附近的标记聚类。使用 react-leaflet-markercluster 库，集群标记按要求成功呈现。但是，如果有一个标记不是集群的一部分或靠近集群，则它不会在 map 上呈现。当将标记作为数组传递给 markers prop 以及直接在 MarkerClusterGroup 中定义 Markers 组件时(如示例所示)，这是可重现的。

在下面的代码片段中，前 6 个标记被呈现为一个簇，因为它们距离很近。但是，最后一个标记 (position={[42.2793, -71.4162]}) 根本不显示，因为它不属于任何集群。解决此问题的最佳方法是什么？

“传单”:“^ 1.5.1”， "leaflet.markercluster": "^1.4.1", “ react 传单”:“1.9.1”， “react-leaflet-markercluster”:“^1.1.8”

MarkerClusterGroup 之外的单个标记有效。但是，不会显示 MarkerClusterGroup 内的单个标记。

项目中导入了Leaflet和react-leaflet-markercluster所需的样式。我已将以下内容添加到 head 部分中的 index.html 页面(如此处建议的 https://www.npmjs.com/package/react-leaflet-markercluster#getting-started ):

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
<!--Make sure you put this AFTER Leaflet's CSS-->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
    integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
    crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css" />

  render() {
    const mapCenter = [this.center.lat, this.center.lng];
    return (
      <LeafletMap 
        center={mapCenter} 
        zoom={this.center.zoom}
        maxZoom={10}
        minZoom={2.5}
        maxBounds={[[-85,-180],[85,180]]}
        maxBoundsViscosity={0.1}
        bounceAtZoomLimits={true}     
        easeLinearity={0.35} 
        >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />

        <MarkerClusterGroup
              showCoverageOnHover={false}
              spiderfyDistanceMultiplier={2}
              animate={true}
              zoomToBoundsOnClick={true}
              spiderfyOnMaxZoom={false}
              maxClusterRadius={60}
            >
            <Marker position={[50.0647, 19.9450]} />
            <Marker position={[48.9226, 24.7111]} />
            <Marker position={[48.7164, 21.2611]} />
            <Marker position={[51.5, -0.09]} />
            <Marker position={[51.5, -0.09]} />
            <Marker position={[51.5, -0.09]} />
            <Marker position={[42.2793, -71.4162]} />
         </MarkerClusterGroup>
      </LeafletMap>
    );
  }

最佳答案

我已经使用 Leaflet 和 Leaflet 集群几个月了，我遇到了同样的问题。

如果你查看你的 minZoom，它是 2.5 如果你查看 leaflet.markercluster 源代码，特别是在行:

https://github.com/Leaflet/Leaflet.markercluster/blob/master/src/MarkerCluster.js#L275

您会注意到 this._group._map.getMinZoom() 或 zoomLevel 不是四舍五入或底线 - 使用 Math.round 或 Math.准确地说是地板。 (虽然有一些代码部分其中一个或两个)

从更大的角度来看，当此函数递归运行时 - 它将到达必须匹配的点:https://github.com/Leaflet/Leaflet.markercluster/blob/master/src/MarkerCluster.js#L382

由于该值未取底或四舍五入，它将尝试匹配 (0.5 === 0) 并且此条件将失败。因此，一些标记永远不会添加到 map 和呈现。

我通过将 map 的 minZoom 设置为整数 -3 来修复此问题。因此，您也应该使用 Integer - 在您的情况下，它将是 minZoom={3} 或 minZoom={2}

我希望这能回答您的问题并对您有所帮助。

https://stackoverflow.com/questions/57383443/