React Leaflet：动态标记，无法读取属性“addLayer”
2020-09-29
2885
我一直在开发一个地图组件，用于渲染从搜索中流出的结果点。我已经完成了大部分工作，直到我开始为 return 语句传递 props。我使用的是自己的组件，而不是 react-leaflet 的。我注意到，如果我使用
<Map ... />
并使用
props.locations.map( ...
进行渲染，它会正常工作。如果我使用
<map ref={map} >
引用我的
map = L.map(...)
并尝试使用 props 渲染
<Marker .../>
，它会在尝试创建图层并将其添加到地图时立即中断。
组件的 JS 文件如下如下：
import React, {Component, useEffect, useState} from "react";
import {Map, Marker, Popup, TileLayer} from "react-leaflet";
import * as L from 'leaflet'
import 'leaflet-draw'
import 'leaflet/dist/leaflet.css';
import 'leaflet-easybutton'
import 'leaflet-easybutton/src/easy-button.css';
import Style from './MapSearch.css'
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
const MapSearch = (props) => {
const [layers,setLayers] = useState([]);
const [results,setResults] = useState([]); //Not used
const [map,setMap]=useState({});
useEffect(()=> {
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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
/** Add the feature group and draw control to the map. */
let drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({
position: 'topright',
draw: {
polyline: false,
rectangle: false,
circlemarker: false,
polygon: false,
circle: true,
marker: true,
},
edit: {
featureGroup: drawnItems,
remove: true,
},
});
map.addControl(drawControl);
/** On shape drawn, add the new layer to the map. */
map.on(L.Draw.Event.CREATED, (e) => {
const type = e.layerType;
const layer = e.layer;
if (type === 'marker') {
layer.bindPopup('popup');
}
console.log('LAYER ADDED:', layer);
drawnItems.addLayer(layer);
// this.setState({layers: drawnItems.getLayers()});
let testArr=drawnItems.getLayers(); /**BROKEN SECTIoN TODO */
// setLayers(layers=> [...layers,layer]);
//console.log({layers});
console.log('GEO JSON', drawnItems.toGeoJSON());
console.log(' LAYERS', drawnItems.getLayers());
});
L.easyButton('fa-search', () => {
isWithinPolygon(props); //Removed because not relevant to question
}, 'Search Current Results within drawn layers', {position: 'topright'}).addTo(map);
map.on(L.Draw.Event.EDITED, (e) => {
const layers = e.layers;
let countOfEditedLayers = 0;
console.log('LAYER EDITED:', layers);
layers.eachLayer((layer) => {
countOfEditedLayers++;
});
});
setMap(map); //hook to set map
//this.setState({map: map});
console.log("map:",{map}); }
,[]);
return (
<div id='mapsearch'>
<map center={[0, 0]} zoom={0}>
{props.locations.map(marker => (
(marker.props.isLocationEnabled === true ?
(marker.props.isMarkerClicked === true ?
(<Marker
key={marker.props.id}
position={ [
marker.props.lat,
marker.props.long
]}
opacity= '1.0'>
<Popup>
<b>Media ID:</b> {marker.props.values.mediaId}
<br/>
<b>Created Date:</b> {marker.props.values.createdDate}
<br/>
<b>Media URL:</b> <button onClick={()=> window.open(marker.props.values.mediaURL)}>Link</button>
</Popup>
</Marker>) :
(<Marker
key={marker.props.id}
position={ [
marker.props.lat,
marker.props.long
]}
opacity= '0.5'>
<Popup>
<b>Media ID:</b> {marker.props.values.mediaId}
<br/>
<b>Created Date:</b> {marker.props.values.createdDate}
<br/>
<b>Media URL:</b> <button onClick={()=> window.open(marker.props.values.mediaURL)}>Link</button>
</Popup>
</Marker>)
) : (<div></div>)
)
))}
</map>
</div>
);
};
export default MapSearch;
索引：
<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" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/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>
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
对此感到困惑。为什么使用
<Map>
时可以映射和渲染
<Markers>
，但使用
<map />
时却不行？
编辑：
使用
<Map ref={map} ... />
的屏幕截图。添加重复图层，导致 80% 的地图无法拖动。
1个回答
正如我在评论中提到的，您应该使用
react'leaflet
的 Map，并使用 ref 来使用本机 leaflet 代码添加您想要的任何插件。
...other imports
const mapRef = useRef();
<Map center={position} zoom={13} style={{ height: "100vh" }} ref={mapRef}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
... your code should go here regarging markers
</Map>
然后在 useEffect 上，当组件挂载时获取地图引用并相应地使用它来初始化任何其他 leaflet 插件：
useEffect(() => {
console.log("mounted");
if (mapRef && mapRef.current) {
const map = mapRef.current.leafletElement;
/** Add the feature group and draw control to the map. */
let drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
const drawControl = new L.Control.Draw({
position: "topright",
draw: {
polyline: false,
rectangle: false,
circlemarker: false,
polygon: false,
circle: true,
marker: true
},
edit: {
featureGroup: drawnItems,
remove: true
}
});
map.addControl(drawControl);
...
setMap(map); //hook to set map
//this.setState({map: map});
console.log("map:", { map });
}
}, []);
kboul
2020-09-30