在React Leaflet中构建地理区域图：GeoJSON数据加载与渲染指南

import React, { useEffect, useRef, useState } from 'react';
import { MapContainer, TileLayer, GeoJSON, FeatureGroup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css'; // 导入Leaflet样式

// 假设OSMProvider提供基础地图瓦片服务的URL和attribution
// 例如：
const OSMProvider = {
  maptiler: {
    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }
};

// 导入GeoJSON文件，此时spainGeoJSON变量很可能包含了文件的公共URL路径
import spainGeoJSONPath from '../sources/spainregions.geojson';

const SpainMap = () => {
  // 定义状态来存储解析后的GeoJSON数据
  const [geoJSONData, setGeoJSONData] = useState(null);
  const mapRef = useRef(); // 用于获取MapContainer实例的引用
  const ZOOM_LEVEL = 6;
  const center = { lat: 40.4165000, lng: -3.7025600 }; // 西班牙中心坐标

  useEffect(() => {
    // 定义异步函数来获取GeoJSON数据
    const fetchData = async () => {
      try {
        // 使用fetch API通过文件路径获取GeoJSON内容
        const response = await fetch(spainGeoJSONPath);
        // 将响应解析为JSON对象
        const data = await response.json();
        // 更新状态，使组件重新渲染并显示GeoJSON数据
        setGeoJSONData(data);
      } catch (error) {
        console.error('Error fetching GeoJSON data:', error);
      }
    };

    fetchData(); // 调用数据获取函数
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <div className="row">
      <div className="col text-center">
        <div className="col">
          <MapContainer center={center} zoom={ZOOM_LEVEL} ref={mapRef} style={{ height: '600px', width: '100%' }}>
            {/* 添加基础地图瓦片层 */}
            <TileLayer url={OSMProvider.maptiler.url} attribution={OSMProvider.maptiler.attribution} />

            {/* 使用FeatureGroup包裹GeoJSON，方便管理多个地理特征 */}
            <FeatureGroup>
              {/* 当geoJSONData存在时，渲染GeoJSON组件 */}
              {geoJSONData && (
                <GeoJSON 
                  data={geoJSONData} 
                  // 可以通过style prop自定义GeoJSON的样式
                  style={() => ({
                    fillColor: '#FFD700', // 填充颜色
                    weight: 1, // 边框粗细
                    opacity: 1, // 边框不透明度
                    color: 'white', // 边框颜色
                    fillOpacity: 0.7 // 填充不透明度
                  })}
                  // 也可以通过onEachFeature prop为每个特征添加交互
                  onEachFeature={(feature, layer) => {
                    if (feature.properties && feature.properties.name) {
                      layer.bindPopup(feature.properties.name); // 绑定弹出窗口显示区域名称
                    }
                    layer.on({
                      mouseover: (e) => {
                        e.target.setStyle({
                          weight: 3,
                          color: '#666',
                          dashArray: '',
                          fillOpacity: 0.9
                        });
                      },
                      mouseout: (e) => {
                        e.target.setStyle({
                          weight: 1,
                          color: 'white',
                          dashArray: '',
                          fillOpacity: 0.7
                        });
                      },
                      click: (e) => {
                        // console.log('Clicked on:', feature.properties.name);
                        // 可以添加点击事件处理逻辑
                      }
                    });
                  }}
                />
              )}
            </FeatureGroup>
          </MapContainer>
        </div>
      </div>
    </div>
  );
};

export default SpainMap;