react-leaflet瓦片乱序/加载不全

1 问题描述

环境：webpack+react-leaflet

使用react-leaf加载地图时，浏览器加载完毕后发现地图始终乱序，瓦片位置不正确，并且有一部分瓦片加载失败，如下图所示：

2 解决方案

瓦片加载失败原因有两点：
1. 在index.html中未引入相应css

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">

2.index.js对应的css缺少对应样式

.leaflet-container {
    height: 100vh;
    width: 100%;
}

完成上述配置后，地图正确加载