在 React 中重新渲染 mapbox 时的地图大小

Question

我尝试使用 mapbox GL 在 React 中渲染地图。 我已经使用 Grid 将屏幕分为 4（2 col/crow），并使用以下 css：

    .container {
    font-family: sans-serif;
    margin: 0;
    display: grid;
    grid-template-rows: 1fr 7fr;
    grid-template-columns: auto;
    gap: 5px;
    grid-template-areas: "cr1 cr2"
                         "cr1 cr4";
    height: 100vh;
    width: 200vh;
    background-color: chartreuse;
}

.table {
    grid-area: cr1 ;
    background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tank-select {
    grid-area: cr2;
    background-color: grey;
}

.map {
    grid-area: cr4;
    display: flex;
    justify-content:space-around;
    align-items:stretch;
    background-color: blueviolet;
}

我想将地图放在 cr4 框中，代码如下：

  <div className="container">
      <div className="table">test</div>
      <div className="tank-select">test2</div>
      <div className="map">
        <Map />
      </div>
    </div>

地图是这样计算的：

const mapContainerRef = useRef(null)

  const [lng, setLng] = useState(5)
  const [lat, setLat] = useState(34)
  const [zoom, setZoom] = useState(1.5)

  // Initialize map when component mounts
  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat],
      zoom: zoom,
    })

    // Add navigation control (the +/- zoom buttons)
    map.addControl(new mapboxgl.NavigationControl(), 'top-right')

    map.on('move', () => {
      setLng(map.getCenter().lng.toFixed(4))
      setLat(map.getCenter().lat.toFixed(4))
      setZoom(map.getZoom().toFixed(2))
    })

    // const marker = new mapboxgl.Marker().setLngLat(TankLocationArray).addTo(map)
    //
    map.on('load', function () {
      map.addSource('route', {
        type: 'geojson',
        data: '../../assets/data/test.geoJSON',
      })

      map.addLayer({
        id: 'route',
        type: 'symbol',
        source: 'route',
        paint: {
          'circle-radius': 10,
          'circle-color': '#ff0000',
        },
      })
    })
    //

    // Clean up on unmount
    return () => map.remove()
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <div>
      <div className="sidebarStyle">
        <div>
          Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
        </div>
      </div>
      <div className="map-container" ref={mapContainerRef} />
    </div>

使用 css：

.map-container {
    position:relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  .sidebarStyle {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 12px;
    background-color: #404040;
    color: #ffffff;
    z-index: 1 !important;
    padding: 6px;
    font-weight: bold;
  }

当我将地图容器位置从相对更改为绝对时，地图将占据整个屏幕，否则它不可见。

我不知道如何设置样式以使地图仅出现在 .map(cr4) 框中。 感谢您的帮助

Answer 1

使用 React Map GL 库解决了这个问题。 工作得很好。 https://www.npmjs.com/package/react-map-gl