Нарисуйте ломаную линию с помощью Svelte и Leaflet. JS

Question

У меня есть базовая c листовка Svelte JS компонент карты:

<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>

<script>
    import {onMount} from 'svelte';
    import DamDetails from "./DamDetails.svelte";

    let map;
    let lat = 0;
    let long = 0;
    let ready = false;
    let damDetails;
    let damMarkers = [];

    onMount(async () => {
        map = L.map('map').setView([41, -8], 8);
        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<12345>', {
            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>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken:'<12345>'
        }).addTo(map);

    function panMap() {
        L.marker([40, 10]).addTo(map);
        L.polyline([new L.LatLng(40, 10), new L.LatLng(40, 8)]).addTo(map);
        let interestMarker = L.marker([document.getElementById("lat").value, document.getElementById("long").value], {
            color: 'red'
        });
        interestMarker.addTo(map);
        interestMarker.on('click', function (e) {
            interestMarker.removeFrom(map);
        });
    }

</script>

<input id="lat" type=number bind:value={lat} placeholder="Enter latitude of the dam">
<input id="long" type=number bind:value={long} placeholder="Enter longitude of the dam">
<button on:click={panMap}>Add to map</button>
<div id="map" style="border: 0; margin: 0; width: 100%; height: 530px;"></div>
{#if ready}
    <DamDetails damInfo="{damDetails}"/>
{/if}

Поэтому, когда я нажимаю кнопку, я вызываю функцию panMap, которая должна добавить маркер, ломаную линию и красный маркер со слушателем.

Пока появляются маркеры, ломаная линия не ... Это ошибка:

Uncaught TypeError: Cannot read property 'x' of undefined
    at L.intersects (VM1776 mapquest.js:10)
    at e._clipPoints (VM1776 mapquest.js:10)
    at e._update (VM1776 mapquest.js:10)
    at e._reset (VM1776 mapquest.js:10)
    at e.onAdd (VM1776 mapquest.js:10)
    at e._layerAdd (VM1776 mapquest.js:10)
    at i.whenReady (VM1774 leaflet.js:5)
    at i.addLayer (VM1774 leaflet.js:5)
    at HTMLButtonElement.panMap (Map.svelte:51)

Я пробовал несколько вариантов, таких как:

map.addLayer(L.polyline([new L.LatLng(40, 10), new L.LatLng(40, 8)])); L.polyline([new L.LatLng(40, 10), new L.LatLng(40, 8)]).addTo(map);

А также пример из документации из коробки:

var latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polyline
map.fitBounds(polyline.getBounds());

И ошибка то же. Любая помощь приветствуется.

Может ли это быть связано с асин c загрузкой (или не асин c) карты?

TIA

PS: Вот картинка части свойств с console.log:

Answer 1

Отвечая на мой собственный вопрос:

Кажется, что есть ошибка в базовой реализации листовки JS:

Если я сделаю:

 // define rectangle geographical bounds
        var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
// create an orange rectangle
        L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
// zoom the map to the rectangle bounds
        map.fitBounds(bounds);

Чтобы добавить прямоугольник, он прекрасно работает:

Затем, перегружая этот конструктор, интерпретировать его как начальную и конечную точку для ломаной линии, я получить точно такую ​​же ошибку, как указано выше.

Однако, выполнив:

 // define rectangle geographical bounds
        var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];
// create an orange rectangle
        L.polygon(bounds, {color: "#ff7800", weight: 1}).addTo(map);
// zoom the map to the rectangle bounds
        map.fitBounds(bounds);

Итак, по сути, путем создания многоугольника, состоящего из 2 точек, который затем вырождается в сегмент линии, работает правильно:

Не идеально, но пока оно мне пригодится!