在 Svelte 应用程序中使用 Leaflet - 正确的方法

Question

我编写了一个使用 Leaflet 显示地图的 Svelte 组件。该组件的以下代码有效。

我只是想知道这是不是这样做的方法，或者是否有 "more correct" 或 "smarter" 方法？特别是考虑到 loadMap() 中的 await import('leaflet'); 以及 onMount() 中从 CDN 加载 CSS 的方式...

<script>
    import { onMount } from 'svelte';

    let map;

    onMount(() => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://unpkg.com/leaflet@1.6.0/dist/leaflet.css';
        link.onload = () => loadMap();

        document.head.appendChild(link);

        return () => {
            map.remove();
            link.parentNode.removeChild(link);
        };
    });

    async function loadMap() {
        await import('leaflet');
        map = L.map('map').setView([49, 12], 13);
        L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png ', {
            attribution:
                'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            maxZoom: 18,
        }).addTo(map);
    }
</script>

<style>
    #map {
        height: 480px;
    }
</style>

<div id="map" />

Answer 1

您可以使用 <svelte:head> 加载 css 和 javascript：根据 docs： 此元素可以将元素插入 document.head。在服务器端渲染期间，head 内容与主要 html 内容分开公开。

所以头部组件看起来像这样：

<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin="" />

  <script
    src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin="">

  </script>
</svelte:head>

这里有一个完整的 REPL 可以玩。

在 Svelte 应用程序中使用 Leaflet - 正确的方法

Using Leaflet in a Svelte App - the Correct Way

leaflet

svelte-3

svelte-component