地图组件中的间距标记

目前我使用MapboxGL作为我的地图组件。我有一组记号笔聚集在同一地点，这使得我很难看到记号牌。我想要一个算法，可以检查彼此的区域中是否有任何标记，并自动将其自身转移到随机位置，同时仍在其原始位置保留一个较小的标记。

参考图片：

CodeSandbox：https://codesandbox.io/s/full-popup-mapbox-stackoverflow-forked-v9xgb

目前这是我的代码，我从API获取经度和纬度并将其映射出来：

const [viewport, setViewport] = useState({
    latitude: 50.826758,
    longitude: 4.380197,
    width: "100vw",
    height: "100vh",
    zoom: 1,
    scrollZoom: "false"
  });

  const [selectedProperty, setSelectedProperty] = useState(null);
  const [isPopupShown, setIsPopupShown] = useState(false);

  return (
    <div className="root">
      <div className="map">
        <ReactMapGL
          {...viewport}
          mapboxApiAccessToken={YOURMAPBOXTOKEN}
          mapStyle="mapbox://styles/mapbox/dark-v9"
          onViewportChange={(viewport) => {
            setViewport(viewport);
          }}
        >
          <HTMLOverlay
            redraw={(props) => {
              return (
                <div
                  style={{
                    backgroundColor: "rgba(255, 0, 0, 0.5)",
                    width: isPopupShown ? props.width : 0,
                    height: isPopupShown ? props.height : 0,
                    transition: "all .2s ease-in-out",
                    transform: "scale(1.1)",
                    overflow: "hidden",
                    alignItems: "center",
                    justifyContent: "center"
                  }}
                >
                  {/* todo: text/content position */}
                  <h1>Text</h1>
                </div>
              );
            }}
          />

          {posts &&
            posts.map((item) => (
              <Marker
                key={item.id}
                latitude={item.latitude}
                longitude={item.longitude}
              >
                <button className="marker-btn">
                  <Icon
                    style={{
                      width: 48,
                      height: 48
                    }}
                    onMouseEnter={() => {
                      setSelectedProperty(item);
                      setIsPopupShown(true);
                    }}
                    onMouseOut={() => {
                      setSelectedProperty(null);
                      setIsPopupShown(false);
                    }}
                    alt="Marker"
                  />
                </button>
              </Marker>
            ))}
        </ReactMapGL>

---

解决方案

您尝试做的并不是真正适用于动态地图，因为元素在移动期间必须在地图上永久重新定位(哎呀！)

最相关的是使用聚类原理，它非常适合于关注点的分组。 https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/

使用Mapbox中的所有样式选项，您可以根据您想要做的事情，轻松地以图形方式接受某些内容。 以下是一些想法：https://medium.com/@droushi/mapbox-cluster-icons-based-on-cluster-content-d462a5a3ad5c