Leaflet choropleth - 除非悬停，否则不会出现 geoJSON 样式颜色

Question

我正在使用 Leaflet.js 开发交互式等值线地图，使用 geoJSON 基础层并使用从 Socrata API 端点提取的 JSON 数据对多边形进行符号化。它基于 here 发布的 Leaflet.js choropleth 示例。

我被一个问题难住了——当我使用最初是 JSON 数据一部分的属性（例如 pop）为 geoJSON 多边形着色（即样式）时，多边形颜色会在地图加载时加载。但是，当我使用附加到 geoJSON 图层的属性（例如估计）对 geoJSON 多边形进行样式设置时，多边形颜色不会在地图加载时加载，并且仅在我将鼠标悬停在每个多边形上时才会出现。我的实时地图可以查看here。

这是相关代码，谁能看到我的问题是什么？由于我对学习 JavaScript 比较陌生，我假设我缺少一些简单的语法或程序顺序规则，这些规则会阻止 Leaflet 映射基于附加属性为多边形着色。我重新排列了代码的顺序并更改了许多内容，但一次又一次地得到相同的结果。非常感谢您帮助新手学习 JavaScript！

//Initiate geojson variable so listeners can access
var geojson;

//Add TopoJSON layer and append SODA data to symbolize polygons

//Use d3.js to pull in TopoJSON, convert to geoJSON, and add to Leaflet map
d3.json("hrabasetopo.json", function(error, topology) {
    var collection = topojson.feature(topology, topology.objects.layer1);
    var hraData = [collection];

    //Pull summary data from SODA

    //Variable to select desired indicator
    var where = "$where=indicator='uninsure'";
    //Variable to order HRA and zip by VID to match order of features in geoJSON base
    var order = "&$order=vid";
    //Variable to concatenate queries with URL
    var url = "http://data.kingcounty.gov/resource/ajpg-dges.json?"+where+order;
    //jQuery GET request to pull data from SODA and feed to callback function with geoJSON
    $.get(url, 
    function(soda) {
        //Output SODA JSON and hra base geoJSOn to external function
        symbolize(soda);
        }, 
    "json");    

    //Function to append SODA data to TopoJSON converted to geoJSON
    function symbolize(soda) {

         //Loop to copy all of SODA JSON properties to HRA base geoJSON
         for (var i = 0; i<hraData[0].features.length; i++) {
            hraData[0].features[i].properties.estimate = Number(soda[i].estimate);
        }
    };

    //Get color depending on selected estimate
    function getColor(d) {
        return d > 20.1 ? '#e31a1c' :
               d > 16.2 ? '#fd8d3c' :
               d > 11.3 ? '#fecc5c' :
                           '#ffffb2';
    }

    //Incorporate getColor function into overall style function for HRA layer
    function style(feature) {
        return {
            weight: 1,
            opacity: 1,
            color: 'white',
            dashArray: '5',
            fillOpacity: 0.8,
            fillColor: getColor(feature.properties.estimate)
        };
    }

    //Add hraData as geoJSON layer to Leaflet map
    geojson = L.geoJson(hraData, {
        style: style,
        onEachFeature: onEachFeature
    }).addTo(map);

})

Answer 1

我自己想出来的！学习 JavaScript 的一个挑战（对我来说）是习惯异步程序流，因为我习惯的所有统计软件编码语言（Stata、R、SAS 等）都使用同步编程。我的问题是我没有强制 Leaflet.js 地图等待加载，直到我的 API 端点的 JSON 数据被调用并附加到我的 geoJSON 层。解决方案是将地图设置函数包装在一个名为 mapSetup 的大函数中，并使用 jqXHR Object .done 方法，如下代码所示：

    //jQuery GET request to pull data from SODA and feed to callback function with geoJSON
        $.get(url) 
            .done(function(soda) {
            //Output SODA JSON and hra base geoJSOn to external function
            symbolize(soda);        
            })
            .done(function() {
            mapSetup();
            }); 

    //Function to append SODA data to TopoJSON converted to geoJSON
    function symbolize(soda) {

        //Loop to copy all of SODA JSON properties to HRA base geoJSON
        for (var i = 0; i<hraData[0].features.length; i++) {
            hraData[0].features[i].properties.estimate = Number(soda[i].estimate);
        }
    };

        function mapSetup() {
        //Functions to add geoJSON to leaflet map, add controls, legends, etc.
        };