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

Question

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

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

您的标记图标图像和...您的平铺层图像都随着缩放而移动！

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

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

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

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

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

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

这可能是为了补偿低缩放下的图块移动，但在修复上一个问题后似乎适得其反。

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

React-leaflet: Default marker moves on zoom

leaflet

typescript

ionic-framework

react-leaflet