在SvelteKit中使用Leaflet.pattern填充GeoJSON的导入错误排查

问题描述 #

在SvelteKit中使用leaflet.pattern为GeoJSON填充自定义图案时，出现错误'L.pattern is not constructor'，排查后确认是leaflet.pattern未正确挂载到Leaflet的L对象上。

问题原因 #

leaflet.pattern作为Leaflet的扩展库，默认依赖全局的L对象来扩展功能。在SvelteKit的动态导入场景中，直接导入leaflet.pattern无法自动关联到本地导入的L实例，导致扩展方法未被添加。

修复方案 #

调整动态导入逻辑，先将本地导入的L挂载到全局window对象，再导入leaflet.pattern，确保扩展库能正确识别并扩展L对象。

修改后的代码 #

<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  let mapElement;
  let map;
  let L;

  onMount(async () => {
    if (browser) {
      // 动态导入Leaflet并获取默认导出
      const leafletModule = await import('leaflet');
      L = leafletModule.default;
      // 将L挂载到全局window，供leaflet.pattern识别
      window.L = L;
      // 导入leaflet.pattern，此时它会自动扩展全局的L对象
      await import('leaflet.pattern');

      // 初始化地图
      map = L.map(mapElement).setView([40.1164, -88.2434], 15);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      // 创建条纹图案
      const stripes = new L.StripePattern();
      stripes.addTo(map);

      // GeoJSON数据
      const geojsonFeature = {
        "type": "Feature",
        "properties": {
          "name": "GeoJson Example Area"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [[
            [-120.34, 50.68],
            [-120.35, 50.68],
            [-120.35, 50.69],
            [-120.34, 50.69],
            [-120.34, 50.68]
          ]]
        }
      };

      // 加载GeoJSON并应用填充图案
      L.geoJson(geojsonFeature, {
        style: {
          fillPattern: stripes
        }
      }).addTo(map);
    }
  });
</script>

<main>
  <div bind:this={mapElement} />
</main>

<style>
  @import 'leaflet/dist/leaflet.css';
  main div {
    height: 100vh;
  }
</style>

关键调整说明 #

• 动态导入Leaflet时，通过leafletModule.default获取正确的ES模块导出对象
• 将L赋值给window.L，为leaflet.pattern提供全局可识别的Leaflet实例
• 确保leaflet.pattern在全局L挂载完成后再导入，保证扩展逻辑正常生效

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