传单地图没有触发我创建的任何事件？

问题描述 投票：0回答：1

对于我正在制作的网站，我添加了南非的 Leaflet.js 地图，其中各省遵循 Leaflet 文档中的示例分区统计图。我已尽力遵循文档但无济于事。

各省表现良好，但我的活动没有启动，我不知道为什么。这个想法是让悬停在其他省份上的颜色与其他省份不同，当点击该省份时，会返回其名称以及在该省份投票的三个政党。

稍后我将向我的 PHP 页面执行一些 AJAX 请求，我只想在事件未触发之前解决这个问题。

我正在使用的代码和我正在使用的地图的图像。

// This object is used to create the interactive provinces on the map
// The IDs for every feature are taken from the results of every province from 
// https://mapit.code4sa.org/#api-by_area_id
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
        }
    ]
};

// Get the province title h1 and province result div
let provinceTitle = document.getElementById("province_name");
let provinceResult = document.getElementById("province_result");

// initialize the map on the "map" div with a given center and zoom
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);

// Fetch province geometries and assign them to the features
async function fetchProvinceGeometry(url) {
    try {
        // Do async await to retrieve GeoJSON of every province
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error("Error fetching province geometry:", error);
        return null;
    }
}

// Update provinceData with fetched geometries
async function updateProvinceGeometries() {
    // Loop through the provinceData object and get the ids from every feature to
    // get the GeoJSON of every province and put it on the map
    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;
        }
    }

    // Once all geometries are fetched, add GeoJSON data to the map
    L.geoJson(provinceData).addTo(map);
}

// Call the function to update province geometries
updateProvinceGeometries();

// PROBLEM STARTS HERE ///////////////////////////////////////////

// Create the mouseout, onclick and mouseover event
// Also create the function that takes a feature's province abbr and returns the parties to be displayed for
// the province.
var geojson;
geojson = L.geoJson(provinceData).addTo(map);

function highlightProvince(e)
{
    e.target.setStyle(
        {
            weight: 5,
            color: '#689',
            dashArray: '',
            fillOpacity: 0.7
        }
    );

    e.target.bringToFront();
}

function resetProvince(e)
{
    geoJson.resetStyle(e.target);
}

function returnProvinceResults(abbr)
{
    switch (abbr)
    {
        case "WC":
            console.log(69);
            break;
        case "EC":
            console.log(70);
            break;
        case "NC":
            console.log(71);
            break;
        case "KZN":
            console.log(72);
            break;
        case "FS":
            console.log(73);
            break;
        case "NW":
            console.log(74);
            break;
        case "GP":
            console.log(75);
            break;
        case "MP":
            console.log(76);
            break;
        case "LM":
            console.log(77);
            break;
    }
}

function onClickProvince(e)
{
    console.log("ONLINE");
    provinceTitle.textContent = e.target.properties.name;
}

// Bring all the events together in one function that is then fired in the geojson variable.

function eventsWrapper(feature, layer) {
    layer.on({
        mouseover: highlightProvince,
        mouseout: resetProvince,
        click: onClickProvince
    });
}

geojson = L.geoJson(provinceData, {
    style: style,
    onEachFeature: eventsWrapper
}).addTo(map);

javascript leaflet gis
1个回答
0
投票

您希望将 

onEachFeature
用于 
L.geoJSON()
上的事件，其中几何图形实际上是 drawn，这将在 
updateProvinceGeometries()
函数中。

// This object is used to create the interactive provinces on the map
// The IDs for every feature are taken from the results of every province from 
// https://mapit.code4sa.org/#api-by_area_id
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
        }
    ]
};

// Get the province title h1 and province result div
let provinceTitle = document.getElementById("province_name");
let provinceResult = document.getElementById("province_result");

// initialize the map on the "map" div with a given center and zoom
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);

// Fetch province geometries and assign them to the features
async function fetchProvinceGeometry(url) {
    try {
        // Do async await to retrieve GeoJSON of every province
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error("Error fetching province geometry:", error);
        return null;
    }
}

// Update provinceData with fetched geometries
async function updateProvinceGeometries() {
    // Loop through the provinceData object and get the ids from every feature to
    // get the GeoJSON of every province and put it on the map
    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;
        }
    }

    // Once all geometries are fetched, add GeoJSON data to the map
    L.geoJson(provinceData, {
      onEachFeature: eventsWrapper
    }).addTo(map);
}

// Call the function to update province geometries
updateProvinceGeometries();

// PROBLEM STARTS HERE ///////////////////////////////////////////

// Create the mouseout, onclick and mouseover event
// Also create the function that takes a feature's province abbr and returns the parties to be displayed for
// the province.
var geojson;
geojson = L.geoJson(provinceData).addTo(map);

function highlightProvince(e)
{
    e.target.setStyle(
        {
            weight: 5,
            color: '#689',
            dashArray: '',
            fillOpacity: 0.7
        }
    );

    e.target.bringToFront();
}

function resetProvince(e)
{
    geoJson.resetStyle(e.target);
}

function returnProvinceResults(abbr)
{
    switch (abbr)
    {
        case "WC":
            console.log(69);
            break;
        case "EC":
            console.log(70);
            break;
        case "NC":
            console.log(71);
            break;
        case "KZN":
            console.log(72);
            break;
        case "FS":
            console.log(73);
            break;
        case "NW":
            console.log(74);
            break;
        case "GP":
            console.log(75);
            break;
        case "MP":
            console.log(76);
            break;
        case "LM":
            console.log(77);
            break;
    }
}

function onClickProvince(e)
{
    console.log("ONLINE");
    provinceTitle.textContent = e.target.properties.name;
}

// Bring all the events together in one function that is then fired in the geojson variable.

function eventsWrapper(feature, layer) {
    layer.on({
        mouseover: highlightProvince,
        mouseout: resetProvince,
        click: onClickProvince
    });
}

geojson = L.geoJson(provinceData, {
    onEachFeature: eventsWrapper
}).addTo(map);
#map {
  width: 90vw;
  height: 90vh;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" integrity="sha512-h9FcoyWjHcOcmEVkxOfTLnmZFWIH0iZhZT1H2TbOq55xssQGEJHEaIm+PgoUaZbRvQTNTluNOEfb1ZRy6D3BOw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js" integrity="sha512-BwHfrr4c9kmRkLw6iXFdzcdWV/PGkVgiIyIWLLlTSXzWQzxuSg4DiQUCpauz/EWjgk5TYQqX/kvn9pG1NpYfqg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="map"></div>
<div id="province_name"></div>
<div id="province_result"></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.