React-Leaflet：添加 L.TileLayer 会破坏地图

Question

我的目标是将 leaflet-draw 添加到我的地图中。为此，我一直在使用 L 在组件安装时将控件和 drawnItem 层添加到地图。问题似乎出在 TileLayer 上。如果我将它添加到呈现的 div 中，它只会填充 80% 的地图，使新工具栏看起来很糟糕。如果我用 L.TileLayer 添加它，它会填满整个地图，但地图的大部分区域不可拖动。我会用图片来演示。

在渲染中添加 TileLayer div:

组件挂载时添加：

注意：蓝色区域是不能交互的区域。操作地图的唯一方法是在绘图工具栏下拖动。我将包括这个不可操作层的 div：

最后，重要的是要注意，如果我在浏览器开发工具中手动删除此元素，则地图工作正常。为了使这个问题更简洁，我将删除所有传单绘制代码，以便问题更明显。我现在将显示代码以及 index.html.

import React, {Component, useEffect, useState} from "react";
import {Map, Marker, Popup, TileLayer} from "react-leaflet";
import Style from './Map.css'
import * as L from 'leaflet'
import 'leaflet-draw'
import 'leaflet/dist/leaflet.css';


class MapSearch extends Component {
constructor(props) {
    super(props);
    this.state = {
        map: {}
    }
}


componentDidMount() {

    console.log('mounted');

    let map = L.map('mapsearch',).setView([51.505, -0.09], 6);

     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);


    
    this.setState({map: map});

}


render() {
    return (

        <div id='mapsearch'>
            <Map center={[51.505, -0.09]} zoom={6} ref={this.state.map}>
                <TileLayer
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' />


            </Map>
        </div>


    );
}

}



export default MapSearch;

index.html:

<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
  name="description"
  content="Media Search UI"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>

<title>React App</title>

总而言之，我要提到的是，到目前为止，我在传单方面遇到了多个问题。首先，在渲染中使用 L AND 声明 TileLayer 不会导致问题。我在所有情况下都尝试过with/without。此外，L.map 的 ID 必须匹配才能正确引用，因此我的 ref={this.state.map} 没有任何用处。没有这个，我会丢失地图容器。如果您查看左上角的 + & - 符号，您将能够看到插入的额外层。如果我删除 componentDidMount 方法，地图 returns 将恢复正常。问题一定出在我如何使用 L.map 创建地图，因为如果我只是

let map=L.map('mapsearch').setView([51.505,-0.09],6);
this.setState({map: map});

我仍然遇到叠加问题，但地图现在可以拖动了。如果我然后添加 L.TileLayer，那就是它再次变得不可操作的时候。

Answer 1

问题是我在 componentDidMount().

中创建的地图之上渲染了一张地图

我改为使用 let map = L.map('mapsearch',).setView([51.505, -0.09], 6); 中的 <map /> 来引用我自己的。愚蠢的错误，但真的让我失望。

React-Leaflet：添加 L.TileLayer 会破坏地图

React-Leaflet : Adding L.TileLayer breaks map

javascript

css

reactjs

leaflet

leaflet-draw