#javascript #html #reactjs #leaflet #react-leaflet
#javascript #HTML #reactjs #листовка #react-листовка
Вопрос:
Я работал над компонентом карты, который отображает точки результатов, поступающих из поиска. Я получил большую часть работы, пока не начал передавать реквизиты для оператора return. Я использую свой собственный компонент, а не компонент react-leaflet. Я заметил, что если я использую <Map ... /> и визуализирую с props.locations.map( ... ним, он работает нормально. Если я ссылаюсь на свой map = L.map(...) с <map ref={map} > помощью и пытаюсь выполнить рендеринг <Marker .../> с помощью props, он прерывается, как только он пытается создать слой и добавить его на карту. 
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: 'amp;copy; <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/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>
<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>
Довольно озадачен этим. Почему он может отображать и отображать <Markers> при использовании <Map> , но не мой <map /> ?
РЕДАКТИРОВАТЬ: скриншот использования <Map ref={map} ... /> . Добавляет повторяющиеся слои, делая 80% карты недоступными для перетаскивания. 
Комментарии:
1. Вам нужно использовать компонент react-leaflet
Mapили использовать vanilla leaflet для инициализации карты. Не имеет смысла инициализировать карту с использованием собственного кода листовки и использовать затем абстрактные компоненты react-leaflet. Используйтеreact-leafletкомпонент Map и amapRef.2. <Map ref={map}> это не исправляет, вместо этого это возвращает меня к более старой проблеме, которая у меня была. Кажется, что он перекрывает карту. Я вижу, что есть две панели масштабирования друг над другом, и, следовательно, это отключает перетаскивание большей части карты. При решении этой проблемы ранее, кажется, что атрибут ref не работал. Я вижу свой код рисования листовки, поэтому он должен его как-то распознать. Я добавлю скриншот к сообщению @kboul
3. Возможно, это как-то связано с моим первым div, <div id’mapsearch’ …> Если я удалю его, я получу сообщение об ошибке: контейнер карты не найден.
4. Можете ли вы сделать демонстрацию, чтобы воспроизвести проблему?
5. Не в состоянии этого сделать, я попытался, но не имею ни малейшего представления, что я делаю в codepen. Если это еще не очевидно, я новичок во всем этом. Приведенный выше код повторит проблему, изменив <map> на <Map ref={map} , а также удалив div с идентификатором ‘mapsearch’ (поскольку это не требуется, поскольку <Map> отображает свой собственный div). Я должен указать, что я не могу выполнить const map = this.leafletMap.leafletElement; а затем ссылаться на него как ref={m => { this.leafletMap = m; }} Он просто понятия не имеет, что это.leafletMap
Ответ №1:
Итак, как я упоминал в комментариях, вы должны использовать react'leaflet ‘s Map и использовать ссылку, чтобы добавить любой плагин, который вы хотите, используя собственный код листовки.
...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='amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
... your code should go here regarging markers
</Map>
а затем при использовании эффекта, когда компонент монтируется, возьмите ссылку на карту и используйте ее соответствующим образом для инициализации любого другого плагина листовки:
useEffect(() => {
console.log("mounted");
if (mapRef amp;amp; 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 });
}
}, []);