Question

我已经编写了一个转换程序（C＃），该程序将GitHub上《纽约时报》的美国COVID-19案例的州级数据和Leaflet Interactive Choropleth的us-states.js文件作为输入。地图。该程序将生成一个包含

的JSON文件

{
 "type":"Feature",
 "id":"01",
 "properties":{
               "name":"Alabama",
               "start":"01/21/2020",
               "count":81,
               "cases":[0,0,0,...]
              },
 "geometry":{...}
},...

原始数据中状态的密度被起始值和计数值以及case数组代替。如果特定州的案件与华盛顿州的日期不同（01/21/2020），则缺失日期的案件用零表示。这样就可以通过代表所有日期中特定日期的索引访问案例数组。现在，可以将COVID-19病例映射到整个美国。对于映射，我决定使用相同的Leaflet Interactive Choropleth Map软件作为模板（我对当前的映射软件没有经验，所以我几乎复制了Leaflet代码）。最后的目的是让setInterval计时器触发对地图的修订。代码如下。

<!DOCTYPE html>
<!-- from https://leafletjs.com/examples/choropleth/ -->
<html>
  <head>
    <title>By State COVID-19 Spread</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel='stylesheet' href='Leaflet-1.6.0/dist/leaflet.css' />
    <script src='Leaflet-1.6.0/dist/leaflet.js'></script>
  </head>
  <body>
    <div id='map' style='width:700px;height:500px'></div>
    <div style='display:table-cell;margin-top:100px;'>
      <button type='button' onclick='update()'>Update</button> 
      <label for='day_number' style='height:12pt;margin-left:30px;'>Day Number:</label>
      <span id='day_number' style='height:12pt; margin-left:5px;'></span>
    </div>
  <script src='cases-by-us-state.js'></script>
  <script>
    var case_index = 67;
    document.getElementById('day_number').innerHTML = case_index; 
    var maximum_cases = statesData.features[0].properties.count;
    var mapboxAccessToken = 'pk.eyJ1IjoiZ2dndXN0YWZzb24iLCJhIjoiY2s4a2RlOW42MDByYzNucGgxc2I0d2RqeCJ9.bB2UhdKKupjIXEV54N70pQ';
    var map = L.map('map').setView([37.8, -96], 4);

    function getColor ( d ) 
      {
      // colors from https://colorbrewer2.org
      return d > 10000 ? '#99000d' :
             d > 5000  ? '#cb181d' :
             d > 2000  ? '#ef3b2c' :
             d > 1000  ? '#fb6a4a' :
             d > 500   ? '#fc9272' :
             d > 200   ? '#fcbba1' :
             d > 100   ? '#fee0d2' :
                         '#fff5f0';
      }

    function style ( feature ) 
      {

      return {
        fillColor: getColor ( feature.properties.cases[case_index] ),
        weight: 2,
        opacity: 1,
        color: 'black',
        fillOpacity: 0.7
        };
      }

    L.tileLayer ( 
      'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + mapboxAccessToken, 
        {
        id: 'us_states_cases',
        attribution: '<a https://github.com/nytimes/covid-19-dataMap>NY Times</a>',
        tileSize: 512,
        zoomOffset: -1
        } ).addTo ( map );

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

    function update ( )
      {
      if ( case_index < ( maximum_cases - 1 ) )
        {
        case_index++; 
        }
      else 
        {
        case_index = 0;
        }
      document.getElementById('day_number').innerHTML = case_index; 
      map.invalidateSize()
      }
  </script>
  </body>
</html>

我的问题出现在更新功能中。它不会更新图形！无论何时单击“更新”按钮，“天数”都会增加，但是不会绘制该天数的数据图形。有想法吗？

保持安全。

Answer 1

您必须重新运行geojson：

  L.tileLayer ( 
      'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=' + mapboxAccessToken, 
        {
        id: 'us_states_cases',
        attribution: '<a https://github.com/nytimes/covid-19-dataMap>NY Times</a>',
        tileSize: 512,
        zoomOffset: -1
        } ).addTo ( map );

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


function update ( ){
      if ( case_index < ( maximum_cases - 1 ) )
        {
        case_index++; 
        }
      else 
        {
        case_index = 0;
        }
      document.getElementById('day_number').innerHTML = case_index; 

      data.removeFrom(map) // To remove the layers
      data = L.geoJson ( statesData, { style: style } ).addTo ( map );
}

如何在传单中重新渲染图形

1 个答案: