在地图组件中间隔标记

Question

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

参考图片：

代码沙箱：https://codesandbox.io/s/full-popup-mapbox-Whosebug-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>

Answer 1

您尝试做的事情并没有真正适应动态地图，因为元素在移动过程中必须在地图上永久重新定位（哎哟！）

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

使用 mapbox 中的所有样式选项，您可以本着您想要做的事情的精神轻松地在图形上接受一些东西。这里有一些想法：https://medium.com/@droushi/mapbox-cluster-icons-based-on-cluster-content-d462a5a3ad5c

在地图组件中间隔标记

Spacing out Markers in Map Component

javascript

maps

mapbox

reactjs