Question

我使用geoJSON基础层开发了一个与Leaflet.js的交互式等值区域图，并使用从Socrata API端点提取的JSON数据对多边形进行符号化。它基于Leaflet.js等值范例发布here。

我在一个问题上难以理解 - 当我使用最初属于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.
        };

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

1 个答案: