Использование Leaflet в приложении Svelte - правильный путь - PullRequest
Новая
       22

Использование Leaflet в приложении Svelte - правильный путь

0 голосов
/ 22 апреля 2020

Я написал компонент Svelte, который отображает карту с помощью Leaflet. Следующий код компонента работает.

Мне просто интересно, так ли это, или есть «более правильный» или «умный» способ? Особенно с учетом await import('leaflet'); in 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" />

1 Ответ

1 голос
/ 22 апреля 2020

Вы можете использовать <svelte:head> для загрузки css и javascript: в соответствии с документами : Этот элемент позволяет вставлять элементы в document.head. Во время рендеринга на стороне сервера содержимое заголовка отображается отдельно от основного html содержимого.

Таким образом, компонент head будет выглядеть следующим образом: 

<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 , чтобы поиграть.

...