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

Question

我的目標是將 leaflet-draw 添加到我的 Map。為此，我一直在使用 L 在組件安裝時將控件和 drawnItem 層添加到 map。 問題似乎出在 TileLayer 上。 如果我將它添加到呈現的 div 中，它只會填充 map 的 80%，使新工具欄看起來很糟糕。 如果我將它添加到 L.TileLayer 中，它會填滿整個 map，但留下 map 的大部分不可拖動。 我會用圖片來演示。

在渲染的 div 中添加 TileLayer：

在組件安裝時添加：

注意：藍色區域是不能交互的區域。 操作 map 的唯一方法是在繪圖工具欄下拖動。 我將包含這個不可操作層的 div：

最后，重要的是要注意，如果我在瀏覽器開發工具中手動刪除此元素，則 map 可以正常工作。 為了使這個問題更簡潔，我將刪除所有傳單繪制代碼，以便問題更明顯。 我現在將顯示代碼以及 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;

索引.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>

最后，我要提到的是，到目前為止，我在 leaflet 上遇到了多個問題。 首先，在渲染中使用 L AND 聲明 TileLayer 不會導致問題。 我在所有情況下都嘗試過有/沒有。 此外， L.map的 ID 必須匹配才能正確引用，因此我的ref={this.state.map}沒有任何用處。 沒有這個，我會丟失地圖容器。 如果您查看左上角的 + & - 符號，您將能夠看到插入的額外層。如果我刪除 componentDidMount 方法，map 將恢復正常。 問題一定出在我如何使用 L.map 創建L.map ，因為如果我只是

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

我仍然遇到重疊問題，但是 map 現在可以拖動了。 如果我然后添加L.TileLayer ，那就是它再次變得不可操作的時候。

Answer 1

問題是我在componentDidMount().

我改為使用<map /> from let map = L.map('mapsearch',).setView([51.505, -0.09], 6); 參考我自己的。 愚蠢的錯誤，但真的讓我失望了。

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