Leaflet连续世界标记不可见：您需要了解的解决方案

2024-03-20 03:02:25

# Leaflet中连续世界上的标记不可见：解决方案

在Leaflet中使用连续世界选项时，您可能会遇到标记仅显示在主地图上，而不会显示在克隆的切片上的问题。本博客文章将深入探讨此问题，并提供详细的分步解决方案。

问题阐述

当启用 continuousWorld=true 选项时，Leaflet将地图视为一个连续的世界，允许您平移到地图的另一端。然而，这可能会导致标记问题，因为它们仅显示在主地图上，而不会显示在克隆的切片上。这是预期的行为，因为连续世界选项将地图视为一个单一的实体。

解决方案

虽然连续世界选项无法满足我们的要求，但可以使用以下步骤来解决此问题：

1. 禁用连续世界选项

禁用 continuousWorld 选项将使Leaflet将地图视为非连续世界，允许我们使用多个图层来显示地图的不同部分。

map.options.continuousWorld = false;

2. 使用TileLayerWrappers插件

TileLayerWrappers插件允许我们创建多个图层，每个图层显示地图的不同部分。

3. 创建主地图图层

创建主地图图层，这是地图的主要部分，不包含任何克隆的切片。

var mainMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

4. 创建克隆地图图层

创建克隆地图图层，这些图层显示地图的不同部分。

var cloneMap1 = L.tileLayer.wms('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    continuousWorld: false,
    bounds: [[-90, -180], [90, 180]]
});

var cloneMap2 = L.tileLayer.wms('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    continuousWorld: false,
    bounds: [[-90, 0], [90, 180]]
});

5. 将图层添加到地图

将主地图图层和克隆地图图层添加到Leaflet地图中。

map.addLayer(mainMap);
map.addLayer(cloneMap1);
map.addLayer(cloneMap2);

6. 放置标记

最后，将标记放置在每个图层上。

var marker1 = L.marker([51.505, -0.09]).addTo(mainMap);
var marker2 = L.marker([51.505, 180]).addTo(cloneMap1);
var marker3 = L.marker([51.505, -180]).addTo(cloneMap2);