Question

我正在使用Leaflet.js和geoJson数据开展项目。我正在制作一个等值线图，我试图将一个函数的结果传递给另一个函数。我不认为这种情况对Leaflet来说是独一无二的，我认为在将一个函数的结果作为另一个函数的参数传递时，我只是磕磕绊绊。

我有一个函数可以根据从API中提取的GDP值来设置地图中的国家/地区的样式：

 function getColor(d) {
      return d > 1000000 ? '#005824' :
          d > 500000  ? '#238b45' :
          d > 200000  ? '#41ae76' :
          d > 100000  ? '#66c2a4' :
          d > 50000   ? '#99d8c9' :
          d > 20000   ? '#ccece6' :
          d > 15000   ? '#edf8fb':
                       '#fff'
    }

此功能由第二个函数调用：

  function style(feature) {
      return {
          fillColor: getColor(100000),
          weight: 2,
          opacity: 1,
          color: 'white',
          //dashArray: '3',
          fillOpacity: 0.7,
          stroke: true,
          weight: .5,
          fill: true,
          clickable: true
      };
    }

如您所见，我目前有100000硬编码作为getColor函数的参数。我想改变它，以便API中的数据传递给getColor而不是这个硬编码的值。

我从API中提取了GDP数据，我可以使用此功能控制它。：

function getGDP(gdp) {
      for(var i = 0; i < countriesData.features.length; i++) {
       console.log(countriesData.features[i].properties.name + ' ' + countriesData.features[i].properties.gdp_md_est);
       return countriesData.features[i].properties.gdp_md_est;
      }
    }

如何将getGDP（）函数的结果传递给style（）函数中的getColor（）函数？

这是否必须涉及闭包？如果是这样，我如何使用闭包呢？我不相信这个问题是Leaflet或这个项目所独有的，我想我只是在解决如何将一个函数的返回值传递给另一个嵌套在第三个函数中的函数的问题。

getColor函数必须迭代 countriesData.features [i] .properties.gdp_md_est 元素。

这样的事情会起作用吗？

function style(feature) {
      return {
          //fillColor: getColor(100000),
          fillColor: getColor(function(d) {
            for(var i = 0; i < countriesData.features.length; i++) {
             var data =  countriesData.features[i].properties.gdp_md_est;
             return data;
            }
          }),
          weight: 2,
          opacity: 1,
          color: 'white',
          //dashArray: '3',
          fillOpacity: 0.7,
          stroke: true,
          weight: .5,
          fill: true,
          clickable: true
      };
    }

Answer 1

与其他recent question类似，如Leaflet choropleth map tutorial（“添加一些颜色”部分）所示，您只需要意识到Leaflet L.geoJSON工厂将循环通过提供您传递的数据，并为每个功能调用style函数，并将该单个功能数据作为style函数的参数，因为您问题中的代码已经是设置。

由于您确实希望使用与该单个功能相关联的数据调用您的getColor函数（以便后者根据其数据而不是根据所有其他功能的数据设置样式），您了解它是使用getGDP功能尝试使用<{1}}功能遍历所有功能，然后尝试使用style功能中的所有数据，从而适得其反。

function style(feature) { return { fillColor: getColor(feature.properties.gdp_md_est), // etc. }; }

Javscript将函数的结果传递给Leaflet.js项目中的另一个函数

1 个答案: