Recherche de site Web

typescript - React-leaflet : le marqueur par défaut se déplace lors du zoom

Je crée un projet Ionic React qui utilise react-leaflet pour afficher des marqueurs sur une carte. J'ai suivi les instructions des documents pour commencer et bien que tout s'affiche parfaitement, le marqueur d'exemple par défaut continue de se déplacer lorsque je fais un zoom avant/arrière. Voici le code pertinent :

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

Le CSS pour mapId est le suivant :

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

Ça fonctionne bien de toutes les autres manières, donc il semble qu'il ne manque aucune étape. Mes dépendances sont les suivantes :

"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"
},

et j'ai inclus à la fois le CSS et le JS des documents de Leaflet :

<link rel="stylesheet" href="https://unpkg.com/[email /dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />

<script src="https://unpkg.com/[email /dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

J'ai cherché partout une réponse et ce qui revient sans cesse est le problème de iconAnchor et iconSize auquel les utilisateurs sont confrontés lorsqu'ils essaient d'utiliser une icône personnalisée pour leurs marqueurs. J'ai même essayé de faire cela avec le marqueur par défaut en créant une icône personnalisée avec les propriétés de celui par défaut. Cela n'a pas non plus fonctionné. Votre aide sera appréciée.

MISE À JOUR Voici à quoi ressemble le projet en direct lorsqu'on utilise les marqueurs par défaut (les marqueurs ne sont toujours pas corrects lorsqu'on n'est pas complètement zoomé)

Réponse n°1

À la fois votre image d'icône de repère et... vos images de couche de tuiles bougent avec le zoom !

Vous avez des règles CSS qui s'appliquent à TOUS vos <img>, interférant donc avec les images des calques de tuiles Leaflet :

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

L'effet peut être subtilement observé lors du changement du niveau de zoom : les nouvelles tuiles ne couvrent pas exactement les mêmes caractéristiques géographiques que les tuiles du zoom précédent.

Une fois que vous désactivez ces règles, la couche de tuiles se comporte correctement, et l'effet de parallaxe avec les marqueurs est fortement diminué... mais pas totalement supprimé, parce que...

...vos images d'icône de repère ont également un paramètre iconAnchor étrange, qui dépend de votre niveau de zoom :

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

cela a peut-être été une tentative de compenser le mouvement des tuiles à faible zoom, mais cela semble contre-productif après que le problème précédent ait été résolu.

Articles connexes