在ajax传单中获取geojson值的问题答案

【问题标题】：problem to get geojson value in ajax leaflet在ajax传单中获取geojson值的问题
【发布时间】：2019-12-20 13:36:20
【问题描述】：

我刚接触传单中的映射。现在我正在使用本教程来构建我的项目https://leafletjs.com/examples/choropleth/ 当我将 var 添加到 geojson 的开头并将其保存到 js 文件中时。鼠标悬停控制正常when my mouse hover the polygon.

在悬停时显示状态信息的控件

    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>dry mass density</h4>' + (props ?
            '<b>' + props.n_mean + '</b><br />' + props.grid + ' hexagrid ID'
            : 'Hover over a state');
    };

    info.addTo(map);

但是，出于某些实际原因，我需要仍为 geojson 格式的地图数据。所以我使用这个 ajax-leaflet 插件来调用数据https://github.com/calvinmetcalf/leaflet-ajax。

function getColor(nitrogen) {
        return nitrogen >= 3 ? '#8904b1' :
            nitrogen >= 2.8 ? '#2980b9' :
            nitrogen >= 2.4 ? '#4cd137' :
            nitrogen >= 2.3 ? '#f1c40f' :
            nitrogen >= 0 ? '#c0392b' :
            '#bdc3c7';
    }

    var geojsonLayer = new L.GeoJSON.AJAX(base_url + "/assets/geojson/nitrogen_2019.geojson", {
        style: function(feature) {
            p = feature.properties.n_mean;
            return {
                fillColor: getColor(p),
                fillOpacity: 0.8,
                color: "black",
                dashArray: '3',
                weight: 1,
                opacity: 0.7
            }
        },
        onEachFeature: function(feature, layer) {
            layer.on({
                mouseover: function(e) {
                    e.target.setStyle({
                        fillOpacity: 0.8,
                        dashArray: '',
                        weight: 2,
                        opacity: 1
                    });
                    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                        e.target.bringToFront();
                    }
                },
                mouseout: function(e) {
                    geojsonLayer.resetStyle(e.target);
                },
                click: function(e) {
                    map.fitBounds(e.target.getBounds());
                }
            });
        }
    });
    /* geojsonLayer.bindPopup(function(e) {
        return e.feature.ayam.properties.n_mean;
    }); */
    geojsonLayer.bindPopup('marker');
    //geojsonLayer.bindPopup('LatLng: ' + geojsonLayer.getLatLng())
    geojsonLayer.addTo(map);
    geojsonLayer.on('data:loaded', function() {
        map.fitBounds(geojsonLayer.getBounds());
    });
    // testing

    /* testing */
    // control that shows state info on hover
    var info = L.control({
        position: 'bottomright'
    });

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

    info.update = function(info) {
        this._div.innerHTML = '<h4>Density of Makronutrient</h4>' + (info ?
            '<b>' + info.n_mean + '</b><br />' + info.grid + ' Hexagrid ID' :
            'Hover over a state');
    };

    info.addTo(map);

文件映射已完美加载。但悬停鼠标控件无法显示 the value of geojson polygon。这是我的 geojson data的结构。有时我将格式更改为“info.properties.n_mean”，但什么也没发生。我的代码有什么问题吗？

【问题讨论】：

请确保您提供足够的详细信息，以便人们能够重现您的问题（例如，请参阅 MCVE）。我怀疑您没有根据需要正确使用 AJAX 插件。

标签： javascript ajax leaflet geojson choropleth

【解决方案1】：

抱歉回答晚了希望这对寻找这个的人有所帮助

// make a request with your "url"
var geojsonLayer = new L.GeoJSON.AJAX("url");

// define your functions to interact with data
function thingToDoBeforeLoadingStarts () {
   // do stuff
}
function thingToDoForEachFileDownloaded () {
   // do stuff
}
function thingToDoAfterAllDownloadEnds () {
   // do stuff
}

// attach listeners
geojsonlayer.on("data:loading",thingToDoBeforeLoadingStarts);
geojsonLayer.on("data:progress",thingToDoForEachFileDownloaded)
geojsonLayer.on("data:loaded",thingToDoAfterAllDownloadEnds);

【讨论】：