使用反应叶在传单中切换BaseLayer时的稀有效果

Question

我的应用程序显示带有react-leaflet的地图，并使用LayersControl在OSM TileLayer和HERE TileLayer之间切换。代码如下：

 <LayersControl position="topright">

      <LayersControl.BaseLayer
                    name={this.props.intl.formatMessage({id:'map.normal_map'})}
                    checked={true}
                >
                    { tileLayerOSM }
                </LayersControl.BaseLayer>
                <LayersControl.BaseLayer name={this.props.intl.formatMessage({id:'map.terrain_map'})}>
                  { tileLayerHERE }
                </LayersControl.BaseLayer>
</LayersControl>

我看到的问题如下：移动OSM地图时，从HERE下载了一些“正方形”，而他们还没有准备好OSM。查看网络跟踪：

我想避免这种行为，因为这对于用户来说很烦，他们会在短时间内看到可视化的变化。

Answer 1

我没有在React中使用Leaflet的经验，但是显然这不是理想的行为。

在Leaflet中（同时检索两个基本层）在将它们都添加到地图时发生。像这样：

const accessToken = 'foo';
let osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
const mapbox = 'https://api.mapbox.com/styles/v1/mapbox/basic-9/tiles/256/{z}/{x}/{y}?access_token={accessToken}';

const map = L.map('map').setView([42.2, -8.8], 12);

map.addLayer(osm);
map.addLayer(mapbox); // only one should be added to the map

或直接在实例化地图时：

let map = L.map('map', {
        center: [42.2, -8.8],
        zoom: 12,
        layers: [osm, mapbox] // only one should be added to the map
    });

使用这种基本图层，您只需要将一个添加到地图上，并使用图层控件在一个或另一个之间切换。如果仅添加一个，则仅请求其中一张地图的图块，以节省带宽。

作为“暗中射击”，我将尝试使所有层的显示值都明确。首先，两者均为误报错误，因此地图上不应显示任何内容。然后一个带有checked=true的被编码，另一个带有false的，依此类推。可能的麻烦是如何管理这些属性。