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

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

leaflet

Leaflet 如何在传单中重新渲染图形,leaflet,Leaflet,我已经编写了一个转换程序（C#），该程序将来自GitHub上《纽约时报》的美国新冠病毒-19病例的州级数据和来自传单交互式Choropleth地图的us-States.js文件作为输入。该程序生成一个JSON文件，其中包含 { "type":"Feature", "id":"01", "properties":{ "name":"Alabama", "start":"01/21/2020", "cou

我已经编写了一个转换程序（C#），该程序将来自GitHub上《纽约时报》的美国新冠病毒-19病例的州级数据和来自传单交互式Choropleth地图的us-States.js文件作为输入。该程序生成一个JSON文件，其中包含

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

其中，原始数据中的状态密度被起始值和计数值以及案例数组替换。如果某一州的案件与华盛顿州（2020年1月21日）的起案日期不同，则缺失日期案件以零表示。这允许通过表示所有日期的特定日期的索引访问案例数组。现在有可能将新冠病毒-19病例绘制成在美国的传播图。对于映射，我决定使用相同的传单交互式Choropleth映射软件作为模板（我没有使用当前映射软件的经验，所以我几乎复制了传单代码）。最终目的是让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>


按州划分的新冠病毒-19传播
使现代化
日数：
var案例指数=67；
document.getElementById（'day_number'）。innerHTML=case_索引；
var maximum_cases=statesData.features[0].properties.count；
var mapboxAccessToken='pk.eyj1ijoiz2dndxn0ywzzb24ilcjhijoi2s4a2rlow42mdbyyznucgxc20d2rqecj9.bB2UhdKKupjIXEV54N70pQ'；
var map=L.map（'map'）.setView（[37.8，-96]，4）；
函数getColor（d）
{
//颜色来自https://colorbrewer2.org
返回d>10000？“#99000d”：
d>5000？“#cb181d”：
d>2000？“#ef3b2c”：
d>1000？“#fb6a4a”：
d>500？“#fc9272”：
d>200？“#fcbba1”：
d>100？“#fee0d2”：
"fff5f0",；
}
功能样式（特征）
{
返回{
fillColor:getColor（feature.properties.cases[case_index]），
体重：2，
不透明度：1，
颜色：'黑色'，
填充不透明度：0.7
};
}
L.tileLayer（
'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？access_token='+mapboxAccessToken，
{
id:“美国案件”，
署名：《纽约时报》，
tileSize:512，
Zoomofset:-1
}）。地址（地图）；
L.geoson（statesData，{style:style}）.addTo（map）；
函数更新（）
{
如果（案例索引<（最大案例-1））
{
case_index++；
}
其他的
{
病例指数=0；
}
document.getElementById（'day_number'）。innerHTML=case_索引；
map.invalidateSize（）
}

我的问题发生在更新函数中。它不会更新图形！每当单击“更新”按钮时，天数都会增加，但该天数的数据图形不会绘制。想法

保持安全。

您必须重新运行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 );
}

L.tillelayer（
'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？access_token='+mapboxAccessToken，
{
id:“美国案件”，
署名：《纽约时报》，
tileSize:512，
Zoomofset:-1
}）。地址（地图）；
var data=L.geoJson（statesData，{style:style}）.addTo（map）；
函数更新（）{
如果（案例索引<（最大案例-1））
{
case_index++；
}
其他的
{
病例指数=0；
}
document.getElementById（'day_number'）。innerHTML=case_索引；
data.removeFrom（map）//删除图层
data=L.geoJson（statesData，{style:style}）.addTo（map）；
}

谢谢。很好用。