Блог

Я создаю проект Ionic React, который использует react-leaflet для отображения маркеров на карте. Я следовал инструкциям из документов, чтобы начать, и, хотя все отображается идеально, маркер примера по умолчанию продолжает перемещаться при увеличении / уменьшении масштаба. Вот соответствующий код:

 import { MapContainer, Marker as LeafletMarker, Popup, TileLayer } from 'react-leaflet';

...
return (
<MapContainer id="mapId" center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
    <TileLayer
        attribution='amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <LeafletMarker position={[51.505, -0.09]}>
        <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
    </LeafletMarker>
</MapContainer>
);

 

CSS для mapId этого:

 #mapId {
    width: 100%;
    height: 500px;
    position: absolute;
    z-index: 0;
}
 

Он хорошо работает во всех других отношениях, поэтому кажется, что никаких шагов не пропущено. Мои зависимости следующие:

 "dependencies": {
"@types/react": "^17.0.0",
"@types/react-leaflet": "^2.5.2",
"leaflet": "^1.7.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-leaflet": "^3.0.5",
"typescript": "3.8.3"

...

"devDependencies": {
    ...
    "@types/leaflet": "^1.5.19"
},

 

и я включил как CSS, так и JS из документов листовки:

 <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>

 

Я повсюду искал ответ, и то, что продолжает появляться iconAnchor , iconSize — это проблема и, с которой сталкиваются пользователи при попытке использовать пользовательский значок для своих маркеров. Я даже пытался сделать это с маркером по умолчанию, создав пользовательский значок со свойствами значка по умолчанию. Это тоже не сработало. Ваша помощь будет оценена по достоинству.

ОБНОВЛЕНИЕ Так выглядит живой проект при использовании маркеров по умолчанию (маркеры по-прежнему отображаются некорректно, если они не увеличены полностью)

Изображение значка маркера и … изображения слоя плитки перемещаются при увеличении!

У вас есть правила CSS, которые применяются ко ВСЕМ вашим <img> , поэтому мешают изображениям слоев листов листовки:

 img {
    margin-top: -2rem;
    margin-bottom: -4rem;
}
 

Эффект можно незаметно увидеть при изменении уровня масштабирования: новые плитки не охватывают точно те же географические объекты, что и плитки из предыдущего масштабирования.

Как только вы отключите эти правила, слой плитки будет вести себя правильно, а эффект параллакса с маркерами значительно уменьшится… но не полностью удаляется, потому что…

… ваши изображения значков маркеров также имеют странную настройку iconAnchor, которая зависит от вашего уровня масштабирования:

 const markerIcon = new Icon({
    iconUrl: "/assets/icon/location.svg",
    iconSize: [50, 50],
    iconAnchor: [25, zoom > 15 ? 50 : 68   defaultZoom - zoom]
});
 

возможно, это была попытка компенсировать перемещение плиток при низком увеличении, но кажется контрпродуктивным после устранения предыдущей проблемы.