沃梦达 / 编程问答 / 前端问题 / 正文

地图组件中的间距标记

沃梦达教程前端问题

2022-01-01

Spacing out Markers in Map Component(地图组件中的间距标记)

本文介绍了地图组件中的间距标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

目前我使用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 *

地图