Leaflet地图自定义事件无法触发问题求助

问题根源 #

代码存在以下关键错误，导致交互事件无法触发：

1. 重复创建GeoJSON图层：先通过updateProvinceGeometries加载完省份几何数据后添加了无交互图层，之后又基于初始无几何数据的provinceData创建带事件的图层——这个带事件的图层实际是空的，无法响应鼠标操作。
2. 变量名大小写错误：resetProvince函数里的geoJson.resetStyle应为geojson.resetStyle（小写j），否则会报错导致样式重置失败。
3. 未定义style函数：创建带事件的GeoJSON图层时指定了style: style，但代码中未定义该函数，导致图层创建失败。
4. 属性获取方式错误：onClickProvince里通过e.target.properties.name获取省份名称是错误的，Leaflet中图层属性存储在e.target.feature.properties里。

修复步骤 #

1. 移除所有重复的GeoJSON图层创建代码，仅在省份几何数据加载完成后创建带交互的图层。
2. 修正resetProvince中的变量名错误。
3. 定义默认的style函数（或移除style选项）。
4. 修正点击事件中获取属性的逻辑。
5. 将事件绑定逻辑整合到几何数据加载完成后的图层创建流程中。

修复后的完整代码 #

// 省份基础数据，初始几何为空
var provinceData = {
    "type": "FeatureCollection",
    "features":[{
            "type": "Feature",
            "id": "4288",
            "properties": {"name": "Eastern Cape", "abbr": "EC"},
            "geometry": null
        },{
            "type": "Feature",
            "id": "4289",
            "properties": {"name": "Free State", "abbr": "FS"},
            "geometry": null
        },{
            "type": "Feature",
            "id": "4290",
            "properties": {"name": "Gauteng", "abbr": "GP"},
            "geometry": null
        },{
            "type": "Feature",
            "id": "4291",
            "properties": {"name": "KwaZulu-Natal", "abbr": "KZN"},
            "geometry": null
        },{
            "type": "Feature",
            "id": "4292",
            "properties": {"name": "Limpopo", "abbr": "LM"},
            "geometry": null
        },{
            "type": "Feature",
            "id": "4293",
            "properties": {"name": "Mpumalanga", "abbr": "MP"},
            "geometry": null
        },{
            "type": "Feature",
            "id": "4294",
            "properties": {"name": "Northern Cape", "abbr": "NC"},
            "geometry": null
        },{
            "type": "Feature",
            "id": "4295",
            "properties": {"name": "North West", "abbr": "NW"},
            "geometry": null
        },{
            "type": "Feature",
            "id": "4296",
            "properties": {"name": "Western Cape", "abbr": "WC"},
            "geometry": null
        }
    ]
};

// 获取页面元素
let provinceTitle = document.getElementById("province_name");
let provinceResult = document.getElementById("province_result");

// 初始化地图
let map = L.map('map').setView([-29.459, 24.785], 5);

// 添加底图瓦片
var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | <a href="https://mapit.code4sa.org/#api-by_area_id">Powered by MapIt</a>'
}).addTo(map);

// 获取单个省份的几何数据
async function fetchProvinceGeometry(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error("Error fetching province geometry:", error);
        return null;
    }
}

// 默认样式函数
function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: '#888'
    };
}

// 高亮省份函数
function highlightProvince(e) {
    const layer = e.target;
    layer.setStyle({
        weight: 5,
        color: '#689',
        dashArray: '',
        fillOpacity: 0.7
    });
    layer.bringToFront();
}

// 重置省份样式函数
function resetProvince(e) {
    geojson.resetStyle(e.target);
}

// 模拟获取省份政党数据（后续替换为AJAX请求）
function returnProvinceResults(abbr) {
    // 此处后续可替换为AJAX请求PHP接口
    switch (abbr) {
        case "WC":
            return ["政党A", "政党B", "政党C"];
        case "EC":
            return ["政党D", "政党E", "政党F"];
        // 其他省份同理
        default:
            return [];
    }
}

// 点击省份事件函数
function onClickProvince(e) {
    const feature = e.target.feature;
    provinceTitle.textContent = feature.properties.name;
    // 获取政党数据并展示
    const parties = returnProvinceResults(feature.properties.abbr);
    provinceResult.innerHTML = parties.map(party => `<p>${party}</p>`).join('');
}

// 事件绑定包装函数
function eventsWrapper(feature, layer) {
    layer.on({
        mouseover: highlightProvince,
        mouseout: resetProvince,
        click: onClickProvince
    });
}

// 加载所有省份几何数据并创建交互图层
async function updateProvinceGeometries() {
    // 遍历加载每个省份的几何数据
    for (let feature of provinceData.features) {
        const url = `https://mapit.code4sa.org/area/${feature.id}.geojson`;
        const geometry = await fetchProvinceGeometry(url);
        if (geometry) {
            feature.geometry = geometry;
        }
    }

    // 创建带交互的GeoJSON图层
    window.geojson = L.geoJson(provinceData, {
        style: style,
        onEachFeature: eventsWrapper
    }).addTo(map);
}

// 执行加载流程
updateProvinceGeometries();

效果说明 #

• 鼠标悬停省份时，该省份会高亮显示（边框加粗、颜色变化）。
• 点击省份时，页面上的province_name元素会显示省份名称，province_result会展示该省的政党列表（当前为模拟数据，后续可替换为AJAX请求PHP接口获取真实数据）。

内容的提问来源于stack exchange，提问作者PrimeBeat