在单页应用程序中重绘或重新初始化 windyAPI

Question

我将 Windy 地图和 Leaflet 添加到我的项目中，效果很好，但是当我更改路线时，它无法加载并再次显示。

const ReportMap = () => {

    return (
        <div>
            <div id="windy" style={{width: "100%", height: "96vh"}}></div>
        </div>
    );
};

export default ReportMap;

这是我在 public 文件夹中的 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>

Answer 1

首先：

   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='&amp;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;

非常适合我。

在单页应用程序中重绘或重新初始化 windyAPI

Redrawing or reinitialising windyAPI in a single page app

javascript

leaflet

reactjs

react-leaflet