如何在 ReactJS Leaflet 中移动 BasemapGallery 位置？

Question

我想将 Basemap Gallery Leaflet 中的位置移动到地图上 Leaflet 缩放附近的顶部，但对如何移动编码感到困惑，这里是：

Basemap Gallery Brochure 想要向上移动并靠近 Zoom。

示例图片：Images

所需底图库位置示例： Example of Basemap Gallery position

这是我的代码以及我需要更改的代码：

import { React, useState, useEffect } from 'react'
import {
  LayersControl,
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  useMapEvents,
} from 'react-leaflet'
import List from '../Component/List'
import L from 'leaflet'
import SearchControl from './SearchControl'

const { BaseLayer } = LayersControl

function LocationMarker() {
  const [position, setPosition] = useState(null)
  const map = useMapEvents({
    locationfound(e) {
      setPosition(e.latlng)
      map.flyTo(e.latlng, map.getZoom())
    },
  })

  return position === null ? null : (
    <Marker position={position}>
      <Popup>Location Me</Popup>
    </Marker>
  )
}

function MyLocationMe() {
  const [map, setMap] = useState(null)
  const [position, setPosition] = useState(null)

  useEffect(() => {
    if (!map) return

    L.easyButton('fa-map-marker', () => {
      map.locate().on('locationfound', function (e) {
        setPosition(e.latlng)
        map.flyTo(e.latlng, map.getZoom())
      })
    }).addTo(map)
  }, [map])

  return (
    <div className="flex ml-auto">
      <List />
      <div className="w-4/5">
        <MapContainer
          center={{ lat: 51.505, lng: -0.09 }}
          zoom={20}
          style={{ height: '100vh' }}
          whenCreated={setMap}
        >
          <SearchControl className="MarkerIcon" position="topright" />
          <LayersControl position="topleft">
            <BaseLayer checked name="OpenStreetMap">
              <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png "
              />
            </BaseLayer>
          </LayersControl>
          <LocationMarker />
        </MapContainer>
      </div>
    </div>
  )
}
export default MyLocationMe

Answer 1

最简单的方法是通过使位置成为绝对

来更改相关cssclass的左侧css属性

将此添加到您的 styles.css

.leaflet-control-layers.leaflet-control {
  position: absolute;
  left: 50px;
}

Demo

如何在 ReactJS Leaflet 中移动 BasemapGallery 位置？

How to move BasemapGallery position in ReactJS Leaflet?

javascript

reactjs

leaflet

react-leaflet