基于合并表数据实现Fusion Tables多边形颜色填充的Choropleth地图开发

嘿，我帮你梳理了实现这个需求的具体步骤，直接修改你的现有Google Maps代码就能搞定：

1. 先定义颜色映射规则 #

首先咱们得明确百分比对应的颜色区间，你可以根据实际需求调整阈值，这里给个示例：

• 绿色：PERCENTAGE ≥ 70%（代表高占比）
• 黄色：30% ≤ PERCENTAGE < 70%（中等占比）
• 红色：PERCENTAGE < 30%（低占比）

然后写一个函数来根据百分比返回对应颜色：

function getColor(percentage) {
  if (percentage >= 70) {
    return '#2ecc71'; // 亮绿色
  } else if (percentage >= 30) {
    return '#f1c40f'; // 明黄色
  } else {
    return '#e74c3c'; // 深红色
  }
}

2. 修改地图初始化代码，加载带样式的Fusion Table图层 #

把你现有的initMap函数改成下面这样，核心是给Fusion TablesLayer添加动态样式逻辑，让每个多边形的填充色响应PERCENTAGE列的数据：

var map;
function initMap() {
  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(51.41467424448992, 16.737563625000007),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map'), myOptions);

  // 加载合并后的Fusion Table图层
  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry', // 选择你的多边形几何列（如果列名不同要替换）
      from: 'YOUR_MERGED_TABLE_ID', // 务必替换成你合并后的Fusion Table实际ID
      // 可选：如果要过滤掉无数据的区域，加where条件：where: "PERCENTAGE IS NOT NULL"
    },
    styles: [{
      polygonOptions: {
        // 动态计算填充颜色
        fillColor: function(row) {
          // 获取当前行的PERCENTAGE值，列名要和表中完全一致（大小写敏感！）
          var percentage = parseFloat(row['PERCENTAGE'].value);
          // 处理空值或非数字的情况，默认设为灰色
          if (isNaN(percentage)) {
            return '#bdc3c7';
          }
          return getColor(percentage);
        },
        fillOpacity: 0.7, // 调整填充透明度，让地图底图可见
        strokeColor: '#ffffff', // 多边形边框用白色，区分不同区域
        strokeWeight: 1 // 边框宽度，不用太粗
      }
    }],
    map: map
  });
}

// 颜色映射函数
function getColor(percentage) {
  if (percentage >= 70) {
    return '#2ecc71';
  } else if (percentage >= 30) {
    return '#f1c40f';
  } else {
    return '#e74c3c';
  }
}

3. 几个关键注意点 #

• 替换Table ID：一定要把YOUR_MERGED_TABLE_ID换成你合并后的Fusion Table的实际ID，这个ID可以在Fusion Table的页面URL里找到。
• 列名大小写敏感：row['PERCENTAGE']里的列名必须和你表中的列名完全一致（包括大小写），否则会取不到值。
• 阈值自定义：如果你的百分比区间需要调整，直接修改getColor函数里的数值就行，比如把绿色阈值改成≥80%，黄色改成50%-80%都可以。
• 空值处理：代码里默认把无数据的区域设为灰色，你也可以改成其他颜色，或者在query里加where条件过滤掉这些区域。

内容的提问来源于stack exchange，提问作者Luc Steinberg