使用Datamaps为法国地图各行政省按票数区间配置对应填充色的实现方法

解决方法 #

你当前的代码只在循环里计算了每个省对应的区间，但没有将省和区间的对应关系存储为Datamap要求的对象格式，同时你的区间判断存在边界值遗漏的问题，调整方法如下：

修正步骤

1. 初始化一个空对象用于存储每个省的填充配置
2. 修正区间判断逻辑，补全边界值覆盖
3. 循环过程中把每个省的配置写入空对象
4. 将生成的配置对象传入Datamap的data属性

完整修正代码

import departement_list from "../data/departements-list.json";

var jsonData = JSON.parse(JSON.stringify(departement_list));
const dataValues = jsonData.map((data) => data.Departement);
const uniqueValues = [...new Set(dataValues)];
// 初始化存储省配置的空对象
const mapData = {};

for (const valeur of uniqueValues) {
  const nb_votes = dataValues.filter((v) => v == valeur).length;
  let interval;
  // 修正边界判断，避免遗漏等于区间端点的数值
  if (nb_votes <= 0) {
    interval = "defaultFill";
  } else if (nb_votes >= 1 && nb_votes <= 50) {
    interval = "1-50";
  } else if (nb_votes >= 51 && nb_votes <= 100) {
    interval = "51-100";
  } else if (nb_votes >= 101 && nb_votes <= 150) {
    interval = "101-150";
  } else if (nb_votes >= 151 && nb_votes <= 200) {
    interval = "151-200";
  } else if (nb_votes >= 201 && nb_votes <= 300) {
    interval = "201-300";
  } else if (nb_votes >= 301 && nb_votes <= 400) {
    interval = "301-400";
  } else {
    interval = "401-";
  }
  // 将当前省的配置写入mapData
  mapData[valeur] = {
    fillKey: interval
  }
}

var map = new Datamap({
  scope: "fra",
  element: document.getElementById("map-france"),
  responsive: true,
  fills: {
    defaultFill: "#EDE8D6",
    "1-50": "#F4F1E6",
    "51-100": "#EDE8D6",
    "101-150": "#E2DABF",
    "151-200": "#CEC191",
    "201-300": "#BCAE7C",
    "301-400": "#9D893E",
    "401-": "#827131",
  },
  // 传入生成好的mapData即可
  data: mapData
});

补充说明

如果渲染后颜色不匹配，需要确认你的departements-list.json里的Departement字段值，和Datamap法国地图内置的省ID命名规则一致，否则需要额外做字段映射。

内容的提问来源于stack exchange，提问作者Meryem ACHEMLAL