Question

此Leaflet.js choropleth example根据geoJSON文件密度值指定多边形颜色。

function getColor(d) {
    return d > 1000 ? '#800026' :
           d > 500  ? '#BD0026' :
           d > 200  ? '#E31A1C' :
           d > 100  ? '#FC4E2A' :
           d > 50   ? '#FD8D3C' :
           d > 20   ? '#FEB24C' :
           d > 10   ? '#FED976' :
                      '#FFEDA0';
}

这会更新function style(feature)

中每个多边形的颜色

function style(feature) {
    return {
        fillColor: getColor(feature.properties.density),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

并将此新样式添加到地图

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

但是在我的情况下，我相当于示例的statesData geoJSON文件并没有密度值。

相反，我将密度值放在一个单独的数据文件中，用于创建新数组。此数组具有状态name值和密度值

var my_array = [
    ['name': 'alabama', 'density': 59], 
    ['name': 'alaska', 'density': 30], 
    etc 
]

问题是如何关联geoJSON文件和单独数据文件中的name字符串值，以便我可以将关联的密度值转换为function style(feature)以更改多边形颜色？

这可能不一定是Leaflet.js的问题，但可以是一般的Javascript＆＃39;如何＆＃39;问题

到目前为止，我可以遍历my_array并创建一个包含name和颜色值的新数组。

color_array = []
for(var i=0; i < my_array.length; i++) {
   color_array.push([my_array[i][0] + ', ' +  getColor(my_array[i][1])]);
}

获取新的color_array

color_array = [ 
['alabama', '#FFEDA0'],
['alaska', '#FEB24C'],
etc
]

现在我如何将这个新的color_array与function style(feature)一起使用，以便为每个name正确设置颜色？

在SQL中，我会在name上进行联接，并将name及相关密度值提供给getColor函数，输出为name，密度和颜色。

如何在javascript中完成？

Answer 1

您可以跳过预先创建颜色数组的步骤，除非出于性能原因需要缓存它。

这样做：

＆＃13;

var my_array = [{
  'name': 'alabama',
  'density': 59
}, {
  'name': 'alaska',
  'density': 30
}];

function getColor(density) {
  if (density > 30) return 'blue';
  return 'red';
}

function getStateColor(stateName) {
  var color;
  for (var i = 0; i < my_array.length; i++) {
    if (my_array[i].name === stateName) {
      color = getColor(my_array[i].density);
      break;
    }
  }
  return color;
}

alert("alabama = " + getStateColor('alabama'));

＆＃13;

然后你可以这样做

function style(feature) {
    return {
        fillColor: getStateColor(feature.properties.stateName),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

Leaflet.js choropleth示例 - 根据单独的数据文件更新颜色

1 个答案: