Svelte中如何在onMount外获取Mapbox对象实现FlyTo功能

原代码的核心问题是：在脚本顶层直接调用map.flyTo()时，map对象还未完成初始化（onMount是组件挂载后才执行的，此时脚本顶层代码已经跑完了），所以会报错。要实现外部属性变化时地图飞至对应位置，只需利用Svelte的反应式语句监听属性变化，在合适的时机调用地图方法即可。

修改后的完整代码 #

<script>
    import { onMount, onDestroy } from 'svelte';
    import mapboxgl from 'mapbox-gl';
    const token = 'xxx';

    let mapElement;
    let map;
    export let zoom;
    export let centreCoords = [];

    // 反应式监听属性变化，当zoom或centreCoords改变且map已初始化时执行飞行动画
    $: if (map && centreCoords.length === 2) {
        map.flyTo({
            center: centreCoords,
            zoom: zoom,
            essential: true
        });
    }

    onMount(() => {
        mapboxgl.accessToken = token;
        map = new mapboxgl.Map({
            container: mapElement,
            zoom: zoom,
            center: centreCoords,
            style: 'mapbox://styles/mapbox/light-v10',
            antialias: true
        });
    });

    onDestroy(() => {
        map?.remove(); // 可选链简化判断
    });
</script>

<main>
    <div bind:this={mapElement} />
</main>

<style>
    @import 'mapbox-gl/dist/mapbox-gl.css';
    main div {
        height: 800px;
    }
</style>

关键说明 #

• 反应式语句：$: 是Svelte的核心特性，它会监听后续依赖的变量（这里是map、zoom、centreCoords），当这些变量变化时自动执行代码块。
• 安全判断：加入map存在的判断，避免组件挂载前（map未初始化）执行方法报错；同时判断centreCoords是长度为2的数组，确保坐标合法。
• 简化销毁逻辑：用可选链map?.remove()替代原有的if判断，代码更简洁。

内容的提问来源于stack exchange，提问作者Chris