react-leaflet 是否支持处理室内地图楼层层级管理功能？

React-Leaflet 可以实现你需要的室内楼层层级处理功能，它本身基于Leaflet生态，结合React的状态管理能力就能快速实现楼层切换效果，对新手门槛不高。

• 提前准备每个楼层的地图数据，可以是GeoJSON矢量图层或者瓦片图层，所有楼层图层使用同一套地理坐标系校准，确保同一个物理位置在不同楼层的经纬度完全一致，切换时不会出现偏移。
• 用React状态管理当前选中的楼层编号，控制对应楼层图层的显隐。
• 自定义楼层切换UI控件，样式可以按照你的需求自由调整。

import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet'
import { useState } from 'react'

// 示例：不同楼层的地理数据，实际使用时替换为你的真实数据
import floor1Data from './geojson/floor1.json'
import floor2Data from './geojson/floor2.json'
import floor3Data from './geojson/floor3.json'

const IndoorMap = () => {
  // 管理当前激活的楼层
  const [currentFloor, setCurrentFloor] = useState(1)
  const floorMap = {
    1: floor1Data,
    2: floor2Data,
    3: floor3Data
  }

  return (
    <div>
      {/* 楼层切换控件，可自行修改样式适配你的设计需求 */}
      <div className="floor-switcher" style={{ position: 'absolute', top: 20, right: 20, zIndex: 999 }}>
        {[1,2,3].map(floor => (
          <button 
            key={floor}
            onClick={() => setCurrentFloor(floor)}
            style={{
              display: 'block',
              margin: '4px 0',
              padding: '8px 12px',
              border: '1px solid #ccc',
              background: currentFloor === floor ? '#1890ff' : '#fff',
              color: currentFloor === floor ? '#fff' : '#333'
            }}
          >
            {floor}F
          </button>
        ))}
      </div>
      <MapContainer center={[你的地图中心点经纬度]} zoom={18} style={{ height: '100vh', width: '100%' }}>
        {/* 底图图层，替换为你自己的底图服务地址即可 */}
        <TileLayer url="你的底图服务地址" />
        {/* 仅渲染当前选中楼层的图层 */}
        <GeoJSON data={floorMap[currentFloor]} />
      </MapContainer>
    </div>
  )
}

export default IndoorMap

• 如果你的楼层数据量较大，优先使用瓦片图层替代GeoJSON，加载性能会更好。
• 室内定位坐标要和楼层图层的坐标系保持一致，确保定位点在切换楼层时可以准确落在对应位置。
• 不需要额外安装特殊的react-leaflet插件，基础能力就能覆盖你的需求。

内容的提问来源于stack exchange，提问作者Mauricio De armas