React-Leaflet：添加 L.TileLayer 中断 map

Question

My goal is to add leaflet-draw to my Map. To do this, I've been using L to add control and drawnItem layers to the map upon component mount.我的目标是将 leaflet-draw 添加到我的 Map。为此，我一直在使用 L 在组件安装时将控件和 drawnItem 层添加到 map。 The problem seems to be with the TileLayer.问题似乎出在 TileLayer 上。 If I add it in the rendered div, it only fills 80% of the map leaving the new toolbar looking awful.如果我将它添加到呈现的 div 中，它只会填充 map 的 80%，使新工具栏看起来很糟糕。 If I add it in with L.TileLayer, it fills the entire map but leaves the majority of the map un-draggable.如果我将它添加到 L.TileLayer 中，它会填满整个 map，但留下 map 的大部分不可拖动。 I will demonstrate with pictures.我会用图片来演示。

With adding TileLayer in rendered div:在渲染的 div 中添加 TileLayer：

When added upon component mount:在组件安装时添加：

NOTE: The blue area is the area which cannot be interacted with.注意：蓝色区域是不能交互的区域。 The only way to manipulate the map is by dragging under the draw toolbar.操作 map 的唯一方法是在绘图工具栏下拖动。 I will include the div of this in-operable layer:我将包含这个不可操作层的 div：

Finally, it is important to note that if I manually delete this element in the browser dev tools the map works fine.最后，重要的是要注意，如果我在浏览器开发工具中手动删除此元素，则 map 可以正常工作。 To make this issue more concise, I will remove all leaflet-draw code so that the issue can hopefully be more obvious.为了使这个问题更简洁，我将删除所有传单绘制代码，以便问题更明显。 I'll now show the code along with the index.html.我现在将显示代码以及 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:索引.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>

To conclude, I'll mention that I've had multiple issues with leaflet so far.最后，我要提到的是，到目前为止，我在 leaflet 上遇到了多个问题。 First, having TileLayer declared with L AND in the render does not cause the issue.首先，在渲染中使用 L AND 声明 TileLayer 不会导致问题。 I have tried with/without in all scenarios.我在所有情况下都尝试过有/没有。 Additionally, The the id's of L.map and have to match in order to reference properly, so my ref={this.state.map} serves no purpose.此外， L.map的 ID 必须匹配才能正确引用，因此我的ref={this.state.map}没有任何用处。 Without this, I get map-container missing.没有这个，我会丢失地图容器。 If you look at the + & - symbols in the top left, you'll be able to see that extra layer poking in. If I delete the componentDidMount method, the map returns to normal.如果您查看左上角的 + & - 符号，您将能够看到插入的额外层。如果我删除 componentDidMount 方法，map 将恢复正常。 The issue must be with how I am creating the map with L.map , because if I just问题一定出在我如何使用 L.map 创建L.map ，因为如果我只是

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

I still get the overlaying issue, however the map is now draggable.我仍然遇到重叠问题，但是 map 现在可以拖动了。 If I then add L.TileLayer , that's when it again becomes in-operable.如果我然后添加L.TileLayer ，那就是它再次变得不可操作的时候。

Answer 1

The issue was that I was rendering a map on top of the one I had created in componentDidMount().问题是我在componentDidMount().

I instead used <map /> from let map = L.map('mapsearch',).setView([51.505, -0.09], 6);我改为使用<map /> from let map = L.map('mapsearch',).setView([51.505, -0.09], 6); to reference my own.参考我自己的。 Silly mistake, but really threw me off.愚蠢的错误，但真的让我失望了。

React-Leaflet：添加 L.TileLayer 中断 map

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-09-23 18:08:08

React-Leaflet：添加 L.TileLayer 中断 map

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-09-23 18:08:08

解决方案1
0 已采纳 2020-09-23 18:08:08