html - IDK 为什么我的 mapbox 地图不是交互式的。县城应该可以点击

Question

所以我很确定问题出在代码的以下部分中。更具体地说，点击地图功能。但我不知道为什么。它应该让我地图上的每个县都能够被点击并将他们的数据显示在侧边栏上。但是我的县都不是可点击的。

map.on('load', function() {   // Map legend labelling and interaction with sidebar
  // legend labelling
  var layers = ['< 4.5%', '4.5% to 6%', '6% to 7.5%', '7.5% to 9%', '9% to 10.5%', '10.5% to 12%', '12% to 13.5%','13.5% to 15%','> 15%'];
  var colors = ['#fff2b8', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#8E0101', '#49000E'];
  for (i = 0; i < layers.length; i++) {
    var layer = layers[i];
    var color = colors[i];
    var item = document.createElement('div');
    var key = document.createElement('span');
    key.className = 'legend-key';
    key.style.backgroundColor = color;
    var value = document.createElement('span');
    value.innerHTML = layer;
    item.appendChild(key);
    item.appendChild(value);
    legend.appendChild(item);
  }
  
  // This for the life of me just refues to run. Something with the layer name, id is making it not run the clicking functionality.
  map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ["countyData"] });
    for (i in features) {
      if (features[i].layer.id == "countyData") {
         document.getElementById('tooltip').innerHTML = 
         ('<b>Selected County:</b>' + (features[i].properties.COUNTY_LAB).toFixed(0) + '<br/> ' + 
         '<br/>Total Population in 2014:  ' + (features[i].properties.totPop14).toFixed(0) + 
         '<br/>Percent of Population in Poverty 2014:  ' + (features[i].properties.povPercent14).toFixed(0) + '%' + 
         '<br/>Total Population in 2019:  ' + (features[i].properties.totalPop19).toFixed(0) + 
         '<br/>Percent of Population in Poverty 2019:  ' + (features[i].properties.povPercent19).toFixed(0) + '%' + 

         '<br/> ' + '</br><b>Change for each Race:</b>' + '<br/> ' + 

         '<br/>Change in total White population:  ' + (features[i].properties.whiteTotDelta).toFixed(1) + 
         '<br/>Change in White population in Poverty:  ' + (features[i].properties.whitePovDelta).toFixed(1) + '<br/> ' + 

         '<br/>Change in total Hispanic population:  ' + (features[i].properties.hispTotDelta).toFixed(1) + 
         '<br/>Change in Hispanic population in Poverty:  ' + (features[i].properties.hispPovDelta).toFixed(1) + '<br/>' +

         '<br/>Change in total Black population:  ' + (features[i].properties.blackTotDelta).toFixed(1)  + 
         '<br/>Change in Black population in Poverty:  ' + (features[i].properties.blackPovDelta).toFixed(1) + '<br/> ' + 

         '<br/>Change in total Asian population:  ' + (features[i].properties.asianTotDelta).toFixed(1)  + 
         '<br/>Change in Asian population in Poverty:  ' + features[i].properties.asianPovDetlta).toFixed(1) + '<br/> ' + 

         '<br/>Change in total Native American population:  ' + (features[i].properties.nativeTotDelta).toFixed(1) + 
         '<br/>Change in Native American population in Poverty:  ' + (features[i].properties.nativePovDelta).toFixed(1) + '<br/> ' +

         '<br/>Change in total Other population:  ' + (features[i].properties.otherTotDelta).toFixed(1)  + 
         '<br/>Change in Other population in Poverty:  ' + (features[i].properties.otherPovDelta ).toFixed(1);
        
         if (clickedStateId) {
           map.setFeatureState({sourceLayer: "County_Boundaries_of_NJ_EDITE-5q8kmm", id: clickedStateId, source:"composite"}, {"click":false})
        }
        clickedStateId = features[i][id];
        map.setFeatureState({sourceLayer: "County_Boundaries_of_NJ_EDITE-5q8kmm", id: clickedStateId, source:"composite"}, {"click":true})
        return;
      }
    }
 });
     map.getCanvas().style.cursor = 'default';
}

编辑： 访问令牌设置为只读，所以我不担心任何人能够修改任何东西，而且我的地图样式无论如何都是私有的。如果我认为问题出在哪里是错误的，那么有人无法指出。

标签： htmlmapbox

Answer 1

通过以下方式修复它：

1. features=features[0]在 map.queryRenderedFeatures 行之后添加
2. 摆脱了for i in features循环
3. 将所有提及的内容更改features[i]为 just features。