Svelte Mapbox-gl-draw:如何获得父组件的多边形坐标？

Question

根据Svelte教程中的上下文API示例，我在Svelte-Sapper应用程序中使用Mapbox。我想使用Mapbox-Draw来绘制多边形，以根据它们的坐标来限制搜索对象的区域。我对示例代码进行了扩展，添加了绘图功能：

mapbox.js：

import mapbox from 'mapbox-gl';
import mapboxDraw from "@mapbox/mapbox-gl-draw";
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';

mapbox.accessToken = '...';

const key = {};

export { mapbox, mapboxDraw, key };

Map.svelte：

<script>
    import { onMount, setContext } from 'svelte';
    import { mapbox, mapboxDraw, key } from '../routes/_mapbox.js';

    setContext(key, {
        getMap: () => map
    });

    export let lat;
    export let lon;
    export let zoom;

    let container;
    let map;
    let draw;

    onMount(() => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';

        link.onload = () => {
            map = new mapbox.Map({
                container,
                style: 'mapbox://styles/mapbox/streets-v10',
                center: [lon, lat],
                zoom
            });
            draw = new mapboxDraw({
                displayControlsDefault: false,
                controls: {
                polygon: true,
                trash: true
                }
            });
            map.addControl(draw, 'top-left');
        };
  
        document.head.appendChild(link);
    });

    ...

</script>

地图运行良好，也可以在地图上绘制多边形。但是在Map-svelte的父组件中，我没有成功地读取多边形的坐标-例如在按钮上-按下。我试过很多方法，但都无法接近。做这件事最好的方法是什么？

父组件如下所示：

<script>
    import Map from '../../components/Map.svelte';
    import MapMarker from '../../components/MapMarker.svelte';  
    import { storedCoordinates } from '../stores.js';
    ...
    let coords = $storedCoordinates;
</script>

<div class="col border mt-1 ml-1 mr-1 fullheight scrolldiv" style="padding:0px">
    <Map lat={52.2} lon={5.7} zoom={6.5}>
        {#each coords as coord}
            <MapMarker 
                lat={coord[0][0]} 
                lon={coord[0][1]}
                label='<div style="width:300px; ">
                           {coord[1][0][0]} <a href="items/{coord[1][0][1]}">
                           <b>&nbsp;&gt;&gt;&nbsp;</b></a>
                       </div>'                                      
            />
        {/each}
    </Map>
</div>

坐标(“坐标”)通过一个来自MongoDB商店的应用程序接口来获得。多边形在地图上围绕其标记的子集绘制。然后通过api将多边形的坐标发回，以检索该子集的数据。一切正常，除了我找不到读取多边形坐标的方法-我用draw.getAll()尝试了不同的方法，但都没有成功……

Answer 1

我自己的答案是:最终的解决方案相当简单(像往常一样:- )。我将draw的坐标存储在商店中。然后，父组件可以从存储中读取。问题解决了。

Map.svelte：

<script>
    import { onMount, setContext } from 'svelte';
    import { mapbox, mapboxDraw, key } from '../routes/_mapbox.js';
    import { selectedCoords } from '../routes/stores.js';

    setContext(key, {
        getMap: () => map
    });

    export let lat;
    export let lon;
    export let zoom;

    let container;
    let map;
    let draw;

    onMount(() => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';

        link.onload = () => {
            map = new mapbox.Map({
                container,
                style: 'mapbox://styles/mapbox/streets-v10',
                center: [lon, lat],
                zoom
            });
            draw = new mapboxDraw({
                displayControlsDefault: false,
                controls: {
                polygon: true,
                trash: true
                }
            });
            map.addControl(draw, 'top-left');
            map.on('draw.create', getCoords);
            map.on('draw.delete', getCoords);
            map.on('draw.update', getCoords);

            function getCoords(e) {
                let data = draw.getAll();
                selectedCoords.set(data['features'][0]['geometry']['coordinates'][0]);
            }
        }; 
        document.head.appendChild(link);

    }); 
</script>


<div bind:this={container}>
    {#if map}
        <slot></slot>
    {/if}
</div>


<style>
    div {
        width: 100%;
        height: 100%;
    }

</style>