typescript - React-leaflet:默认标记在缩放时移动

Question

我正在创建一个 Ionic React 项目，该项目使用 react-leaflet 在 map 上显示标记。我按照文档中的说明开始使用，虽然一切都完美呈现，但默认示例标记在放大/缩小时继续移动。相关代码如下:

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

mapId 的 CSS 是这样的:

#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 问题对于他们的标记。我什至尝试通过创建具有默认标记属性的自定义图标来使用默认标记来做到这一点。那也没用。您的帮助将不胜感激。

更新 这是使用默认标记时实时项目的样子(未完全放大时标记仍然不正确)

Answer 1

您的 Marker 图标图像和...您的 Tile Layer 图像都随着缩放而移动!

您有适用于所有 <img> 的 CSS 规则的，因此会干扰 Leaflet Tile Layer 图像:

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

更改缩放级别时可以微妙地看到效果:新图 block 并未完全覆盖与之前缩放的图 block 相同的地理特征。

一旦禁用这些规则，Tile Layer 就会正常运行，并且标记的视差效果会大大降低……但不会完全消除，因为……

...您的 Marker 图标图像也有一个奇怪的 iconAnchor 设置，这取决于您的缩放级别:

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

这可能是在尝试补偿低缩放下的图 block 移动，但在解决上一个问题后似乎适得其反。