0

我的目标是将传单绘制添加到我的地图中。为此，我一直在使用 L 在组件挂载时将控件和drawedItem 层添加到地图中。问题似乎出在 TileLayer 上。如果我将它添加到渲染的 div 中，它只会填充 80% 的地图，让新工具栏看起来很糟糕。如果我用 L.TileLayer 添加它，它会填满整个地图，但会使大部分地图无法拖动。我会用图片来演示。

在渲染的 div 中添加 TileLayer：

在此处输入图像描述

在组件安装时添加时： 在此处输入图像描述

注意：蓝色区域是无法交互的区域。操作地图的唯一方法是在绘图工具栏下拖动。我将包含这个不可操作层的 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;

索引.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 不会导致问题。我在所有情况下都尝试过使用/不使用。此外， 和 的 idL.map必须匹配才能正确引用，所以我ref={this.state.map}没有任何用处。没有这个，我会丢失地图容器。如果您查看左上角的 + 和 - 符号，您将能够看到额外的层戳进来。如果我删除 componentDidMount 方法，地图将恢复正常。问题必须与我如何创建地图有关L.map，因为如果我只是

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

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

4

1 回答 1

0

问题是我在我创建的地图之上渲染了一张地图componentDidMount().

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

于 2020-09-23T18:08:08.873 回答