选择提交后无法更新Mapbox图层透明度，报setPaintProperty非函数错

核心问题分析 #

1. 变量作用域错误：map实例是在fetch回调里用const声明的局部变量，外部updateMap函数无法访问到正确的Mapbox实例，导致调用map.setPaintProperty时报错“不是函数”。
2. 透明度更新逻辑错误：遍历每个Feature时重复调用setPaintProperty，会把整个图层的透明度统一设为最后一个Feature的计算值，无法实现多边形单独的透明度差异，需用Mapbox数据驱动样式实现动态渲染。

修复步骤 #

1. 修正map变量作用域 #

将map声明为全局变量，确保updateMap能访问到正确实例：

// 全局作用域声明map变量
let map;

fetch('https://vizibalmaps.s3.amazonaws.com/2023_zipcode_20mb.json')
  .then(response => response.json())
  .then(data => {
    // 赋值给全局map变量
    map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      center: [-74.5, 40],
      zoom: 4,
    });

    geojsonData = data;

    map.on('load', function () {
      map.addSource('polygons', {
        type: 'geojson',
        data: geojsonData,
      });

      map.addLayer({
        id: 'polygons',
        type: 'fill',
        source: 'polygons',
        paint: {
          'fill-color': '#FF5733',
          // 配置数据驱动表达式，读取feature的opacity属性
          'fill-opacity': ['get', 'opacity'],
          'fill-outline-color': '#088',
        },
      });
    });
  })
  .catch(error => console.error('Error fetching GeoJSON:', error));

2. 修正updateMap函数逻辑 #

去掉遍历中的setPaintProperty调用，改为更新GeoJSON数据后刷新数据源：

function updateMap(data) {
  var outputData = data.output;
  var values = outputData.map(entry => parseInt(entry.output_value));
  var minValue = Math.min(...values);
  var maxValue = Math.max(...values);

  // 遍历更新每个feature的opacity属性
  geojsonData.features.forEach(feature => {
    if (feature.properties.hasOwnProperty('ZCTA5CE20')) {
      var zipcode = feature.properties.ZCTA5CE20;
      var value = getValueFromData(outputData, zipcode);
      
      if (value !== null) {
        var normalizedValue = normalize(value, minValue, maxValue);
        feature.properties.opacity = normalizedValue;
      } else {
        // 无匹配值时设置默认透明度
        feature.properties.opacity = 0.1;
      }
    }
  });

  // 刷新数据源触发地图重新渲染
  map.getSource('polygons').setData(geojsonData);
}

3. 补充类型匹配检查 #

GeoJSON中ZCTA5CE20为字符串类型，需与outputData中的zipcode统一类型后再匹配：

function getValueFromData(outputData, zipcode) {
  // 统一转为字符串避免类型不匹配
  var zipStr = String(zipcode);
  var entry = outputData.find(entry => String(entry.zipcode) === zipStr);
  return entry ? parseInt(entry.output_value) : null;
}

最终效果 #

修改后，每次调用updateMap会先更新所有多边形的opacity属性，再刷新数据源，Mapbox通过数据驱动样式自动读取每个多边形的透明度值，实现不同邮政编码区域的透明度差异。

内容的提问来源于stack exchange，提问作者Tyler McBeth