Svelte集成Leaflet地图缩放/平移时出现幽灵标记问题

问题描述 #

在Svelte+Leaflet+MarkerCluster的地图实现中，左上角会出现无法正常聚合的"幽灵标记"，这些标记在缩放地图取消聚合后会消失，影响地图显示效果。

问题根源 #

1. Marker组件中额外的<div>容器未被Leaflet正确管理，导致未关联地图坐标的DOM节点默认显示在左上角；
2. MarkerCluster的图层添加逻辑存在重复执行的可能，导致图层状态异常；
3. 子组件（MarkerCluster/Marker）在地图实例未完全初始化时就开始创建元素，位置计算出错。

修复方案及代码调整 #

1. 修正Marker组件 #

移除多余的容器div，确保插槽内容直接作为divIcon的HTML，并且仅在Marker实例存在时渲染内容：

<!-- Marker.svelte -->
<script>
  import { getContext } from 'svelte';
  const layer = getContext("layer");
  let marker;
  const markers = [];

  function createMarker(
    markerElement,
    { width, height, anchorX, anchorY, latLng, title, alt, zIndexOffset, riseOnHover, riseOffset, opacity, data }
  ) {
    let icon = L.divIcon({
      html: markerElement.innerHTML,
      className: "map-marker",
      iconSize: L.point(width, height),
      iconAnchor: L.point(anchorX, anchorY),
    });
    marker = L.marker(latLng, { icon, title, alt, zIndexOffset, riseOnHover, riseOffset, opacity }).addTo(layer());
    if (data) marker.data = {...data};
    markers.push(marker);
    
    return {
      update(params) {
        const { width, height, anchorX, anchorY, latLng } = params;
        let icon = L.divIcon({
          html: markerElement.innerHTML,
          className: "map-marker",
          iconSize: L.point(width, height),
          iconAnchor: L.point(anchorX, anchorY),
        });
        marker.setIcon(icon);
        if (latLng) marker.setLatLng(latLng);
      },
      destroy() {
        if (marker) {
          marker.remove();
          marker = undefined;
          const idx = markers.indexOf(marker);
          if (idx > -1) markers.splice(idx, 1);
        }
      },
    };
  }
</script>

{#if marker}
  <slot />
{/if}

2. 优化MarkerCluster组件 #

确保clusterGroup仅添加一次到父图层，避免重复执行：

<!-- MarkerCluster.svelte -->
<script>
  import { getContext, setContext, onMount } from 'svelte';
  const clusterGroup = L.markerClusterGroup({
      showCoverageOnHover: false,
      zoomToBoundsOnClick: true,
      spiderfyOnMaxZoom: true,
      spiderfyDistanceMultiplier: 2,
  });
  const parentLayer = getContext("layer");
  setContext("layer", () => clusterGroup);

  onMount(() => {
    parentLayer().addLayer(clusterGroup);
    return () => {
      parentLayer().removeLayer(clusterGroup);
    };
  });
</script>

<slot />

3. 调整Leaflet组件的插槽渲染 #

确保map实例完全初始化后再渲染子组件，避免提前执行子组件逻辑：

<!-- Leaflet.svelte -->
<script>
  import { setContext } from 'svelte';
  let map;
  export let view;
  export let zoom = 10;
  export let minZoom = 1;
  export let maxZoom = 18;
  export let height = '100vh';
  export let width = '100%';

  function createLeaflet(node) {
    map = L.map(node, {
      zoomControl: true,
      gestureHandling: true,
    });
    map.setView(view, zoom);
    
    const tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      minZoom,
      maxZoom,
      useCache: true,
      crossOrigin: true,
    });
    tileLayer.addTo(map);
    
    setContext("layer", () => map);
    
    return {
      destroy() {
        map.remove();
        map = undefined;
      },
    };
  }
</script>

<div style="height:{height};width:{width}" use:createLeaflet>
  {#if map}
    <slot {map} />
  {/if}
</div>

4. App.svelte 保持原有结构即可 #

<!-- App.svelte -->
<script>
  import Leaflet from './Leaflet.svelte';
  import MarkerCluster from './MarkerCluster.svelte';
  import Marker from './Marker.svelte';
  
  let map;
  const initialView = [51.505, -0.09];
  const markers = Array.from({length: 20}, () => ({
    lat: 51.505 + (Math.random() - 0.5) * 0.1,
    lng: -0.09 + (Math.random() - 0.5) * 0.1
  }));
</script>

<Leaflet bind:map view={initialView}>
    <MarkerCluster>
        {#each markers as {lat, lng}, index}
        <Marker latLng={[lat, lng]}>
            <div>{index}</div>
        </Marker>
        {/each}
    </MarkerCluster>
</Leaflet>

修复原理 #

• 移除Marker组件中未被Leaflet管理的DOM容器，避免游离的DOM节点显示在默认位置；
• 调整MarkerCluster的图层添加逻辑，仅在组件挂载时添加一次，避免重复添加导致的图层状态异常；
• 确保地图上下文正确传递，子组件在地图完全初始化后再执行元素创建逻辑，保证位置计算准确。

内容的提问来源于stack exchange，提问作者yunzen