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

Question

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

我只是想知道这是否是这样做的方法，或者是否有“更正确”或“更聪明”的方法？特别是鉴于await import('leaflet');在 loadMap()以及 CSS 从 CDN 加载的方式 onMount() ...

<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 中。在服务器端渲染期间，头部内容单独暴露给主要的 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去玩。