我将Windy地图和传单添加到我的项目中，效果非常好，但当我更改路线时，它无法再次加载和显示。
const ReportMap = () => {
return (
<div>
<div id="windy" style={{width: "100%", height: "96vh"}}></div>
</div>
);
};
export default ReportMap;
这是我在公共文件夹中的index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="https://api.windy.com/assets/map-forecast/libBoot.js"></script>
<script>
windyInit({
key: "KL"
}, function() {})
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
第一个：
npm i react-windy-leaflet
npm i leaflet@1.4.0 --save-dev
这是我的地图文件：
import React, {useEffect, useRef, useState} from 'react';
import {Map, LayersControl, TileLayer, Marker, Popup} from "react-windy-leaflet";
const ReportMap = () => {
const [state, setState] = useState({
lat: 0,
lng: 0,
zoom: 1,
pickerOpen: true,
pickerLat: -23,
pickerLng: -42,
overlay: "wind"
});
const position = [state.lat, state.lng];
const { BaseLayer, Overlay } = LayersControl;
useEffect(() => {
let interval = setInterval(() => {
setState(s => ({
...s,
pickerLat: state.pickerLat + 1,
pickerLng: state.pickerLng + 1
}));
}, 1000);
setTimeout(() => {
clearInterval(interval);
setState(s => ({...s, pickerOpen: false}));
}, 6000);
setTimeout(() => {
setState(s => ({...s, pickerOpen: true, pickerLat: 25, pickerLng: 40}));
}, 7000);
}, [])
return (
<div>
<Map
className="leaflet-container"
style={{width: "100%", height: "96vh"}}
windyKey={"KLq"}
windyLabels={false}
windyControls={false}
overlay={state.overlay}
overlayOpacity={0.5}
particlesAnim={false}
zoom={state.zoom}
center={[state.lat, state.lng]}
removeWindyLayers
onWindyMapReady={() => {
console.log("Windy Map Loaded!");
}}
pickerPosition={
state.pickerOpen
? [state.pickerLat, state.pickerLng]
: null
}
onPickerOpened={latLng => console.log("Picker Opened", latLng)}
onPickerMoved={latLng => {
console.log("Picker Moved", latLng);
this.setState({
pickerLat: latLng.lat,
pickerLng: latLng.lon
});
}}
onPickerClosed={() => console.log("Picker Closed")}
mapElements={
<React.Fragment>
<LayersControl>
<BaseLayer checked name="OSM">
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</BaseLayer>
</LayersControl>
<Marker position={position}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</React.Fragment>
}
/>
</div>
);
};
export default ReportMap;
这对我很管用。