Карта с использованием CRS Simple в листовке React не центрируется - PullRequest
Новая
       18

Карта с использованием CRS Simple в листовке React не центрируется

0 голосов
/ 17 июня 2020

Совсем недавно начал использовать response-leaflet как возможное решение для работы с картами на основе пользовательских изображений. У меня проблема, когда карта не центрируется на каких-либо кооперативах, которые я ей даю при использовании CRS.Simple, но, похоже, работает со стандартной картой TileLayer. Коорды корректно работают с другими компонентами, я тестировал его на [0,0] с помощью простого круга.

Любая помощь будет принята с благодарностью! Ожидая, что это будет что-то глупое, что я сделал. 

import React from 'react';
import { Circle, Map, Marker, TileLayer, Popup, ImageOverlay } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css';
import icon from '../assets/icons/person.svg';
import { Box } from '@material-ui/core';

export default function LocationHub(props) {

    const personIcon = new L.icon({
        iconUrl: icon,
        iconRetinaUrl: icon,
        iconAnchor: [20, 40],
        popupAnchor: [0, -35],
        iconSize: [60, 60]
    })

    const bounds = [[0, 0], [4734, 7000]]
    const style = { height: '80vh', width: '75vw' }

    return (
        <Box display='flex' justifyContent='center'>
            <Map crs={L.CRS.Simple} center={[0, 0]} minZoom={-2} bounds={bounds} style={style}>
                <Marker icon={personIcon} position={[bounds[1][0] - 1830, 3083]}>
                    <Popup>
                        A pretty CSS3 popup. <br /> Easily customizable.
                    </Popup>
                </Marker>
                <ImageOverlay
                    bounds={bounds}
                    url='https://ddimagecollection.s3-eu-west-1.amazonaws.com/maps/PhanDay.jpg'
                />
                <Circle center={[0, 0]} radius={200} fillColor='blue' />
            </Map>
        </Box>
    )
}
...