自定义信息控制和悬停功能 Choropleth 中的传单地图

Question

我使用 Leaflet 库制作了一张包含 API 数据的地图，我正在尝试按照 leaflet 教程添加交互功能。

https://leafletjs.com/examples/choropleth/

我可以在顶部右侧显示信息区域，但事件列表器不起作用。你能告诉我这些代码有什么问题吗？

var map = L.map('map').setView([40, 0], 2);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/light-v9',
        tileSize: 512,
        zoomOffset: -1
      //  layers: [geo,geojson]
    }).addTo(map);

    //  GET THE COVID DATA
    var geojson = L.geoJson(statesData).addTo(map);

    let covid;

    //  GET THE COVID DATA
    function setup(){
        loadJSON("https://disease.sh/v3/covid-19/countries",gotData);
    }

    let geo = L.geoJson(statesData, {style: style}).addTo(map);

    function gotData(data) {
      var covid = data;
        // add covid cases to states data
        for (let j = 0; j < data.length; j++) {
            for (let i = 0; i < statesData.features.length; i++) {
                if (statesData.features[i].properties.ADMIN === covid[j].country || statesData.features[i].properties.ISO_A3 === covid[j].country) {
                   statesData.features[i].properties.cases = covid[j].cases;
                        break;

                }
            }
        }

        geo.addData(statesData);
    };


    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>World Covid Cases</h4>' +  (props ?
            '<b>' + props.ADMIN + '</b><br />' + props.cases + ' cases'
            : 'Hover over a state');
    };

    info.addTo(map);


    function getColor(d) {
        return d > 10000000 ? '#800026' :
                d > 5000000 ? '#BD0026' :
                d > 1000000 ? '#E31A1C' :
                d > 70000 ? '#FC4E2A' :
                d > 50000 ? '#FD8D3C' :
                d > 30000 ? '#FEB24C' :
                d > 10000 ? '#FED976' :
                            '#FFEDA0';
      }

     // CREATE FUNCTION TO STYLE AND APPLY GET COLOR
     function style(feature) {
         return {
             // apply get color
             fillColor: getColor(feature.properties.cases),
             weight: 2,
             opacity: 1,
             color: 'white',
             dashArray: '1',
             fillOpacity: 0.7
         }
       }

       for(let i = 0; i< statesData.features.length;i++){
           console.log(statesData.features[i].properties.cases);
       }


    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

    var geojson;

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    }

    function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });
    }

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

    map.attributionControl.addAttribution('Population data &copy; <a href="http://census.gov/">US Census Bureau</a>');


    var legend = L.control({position: 'bottomleft'});

    legend.onAdd = function (map) {

        var div = L.DomUtil.create('div', 'info legend'),
            grades = [10000, 30000, 50000, 70000, 1000000, 5000000, 10000000],
            labels = [],
            from, to;


        for (var i = 0; i < grades.length; i++) {
            from = grades[i];
            to = grades[i + 1];

            labels.push(
                '<i style="background:' + getColor(from + 1) + '"></i> ' +
                from + (to ? '&ndash;' + to : '+'));
        }

        div.innerHTML = labels.join('<br>');
        return div;
    };

    legend.addTo(map);

参考： https://leafletjs.com/examples/choropleth/example.html

在此先感谢您。

Answer 1

你应该在这部分添加 onEachFeature 事件监听器，以便能够在悬停时显示每个国家名称和案例：

 let geo = L.geoJson(statesData, {
        style: style,        
        onEachFeature: onEachFeature
}).addTo(map);

自定义信息控制和悬停功能 Choropleth 中的传单地图

Custom Info Control and hover features Leaflet map in Choropleth

javascript

leaflet