ответная листовка с функциональными компонентами и ImageOverlay - PullRequest
Новая
       7

ответная листовка с функциональными компонентами и ImageOverlay

0 голосов
/ 13 марта 2020

Я впервые использую Leaflet, поэтому я немного растерялся, пытаясь понять документы. Я пытаюсь создать пользовательскую карту с помощью ответной листовки с помощью компонента ImageOverlay. Я изо всех сил стараюсь, чтобы размер компонента карты был таким же, как мой рисунок. Боюсь, я не совсем понимаю bounds, но я думаю, что это то, что я должен использовать здесь. Я попытался использовать getBounds(), чтобы увидеть, могут ли они получить необходимые мне границы, но я не думаю, что моя реализация с refs верна. Вот мой код: 

import React, { useState, useRef, useEffect } from "react";
import { Map, ImageOverlay } from "react-leaflet";
import { CRS, getBounds } from "leaflet";

export default () => {
    const [bounds, setBounds] = useState([]);
    const mapRef = useRef(null);

    useEffect(() => {
        setBounds(mapRef.current.leafElement.getBounds());
    }, []);

    return (
        <Map
            center={initialPos}
            zoom={0}
            ref={mapRef}
            minZoom={0}
            crs={CRS.Simple}
        >
            <ImageOverlay url="https://i.imgur.com/Ion6X7C.jpg" />
        </Map>
    );
};

Записывая новый bounds в useEffect, я получаю объект, который выглядит следующим образом: 

LatLngBounds {
  _southWest: LatLng {lat: -110, lng: -95},
  _northEast: LatLng {lat: 290, lng: 565}
}

Но я все еще получаю следующая ошибка: 

Cannot read property 'lat' of undefined

Я ссылался на этот вопрос и на этот вопрос , чтобы помочь мне понять, как установить границы таким образом, чтобы соответствовать Сопоставьте с размером моего изображения, но изо всех сил пытались преобразовать их в функциональные компоненты

1 Ответ

0 голосов
/ 13 марта 2020

Вы ищете экземпляр карты, который можно взять из mapRef.current.leafletElement вместо mapRef.current.

Вы можете добиться этого более простым способом, не пропуская границы несколько раз в качестве реквизита. Также вы не можете извлечь границы карты до монтирования компонента, потому что просто он не был инициализирован, поэтому у него нет center и zoom к тому времени, когда вы пытаетесь получить его границы. Вы получите соответствующую ошибку, если попытаетесь ее получить:

Ошибка. Установите центр карты и сначала увеличьте масштаб.

Поэтому вам нужно создать экземпляр imageOverlay, например это с использованием функционального компонента: 

const mapRef = useRef(null);

  useEffect(() => {
    const map = mapRef.current.leafletElement;
    const bounds = [[-26.5, -25], [1021.5, 1023]];
    const image = L.imageOverlay("https://i.imgur.com/Ion6X7C.jpg", bounds).addTo(
      map
    );
    // this is what you were looking for
    map.fitBounds(image.getBounds());
  }, []);

Демо

...