2

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

我只是想知道这是否是这样做的方法，或者是否有“更正确”或“更智能”的方法？尤其是考虑到从 CDN 加载 CSS 的await import('leaflet');方式loadMap()和方式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" />
4

1 回答 1

2

您可以使用<svelte:head>加载 css 和 javascript：根据文档： 此元素可以将元素插入 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。

于 2020-04-22T14:58:08.757 回答