Aska

Vue3でMapboxを使用する - イベント編 -

https://docs.mapbox.com/mapbox-gl-js/api/map/#map-events

マップのイベント

map on load

マップの情報を確認できるようにするためにテンプレート内に以下を追加

    <!-- マップの情報 -->
    <div>
        [map lng, lat] {{ mapInfo.lng }}, {{ mapInfo.lat }}<br />
        [zoom] {{ mapInfo.zoom }} [pitch] {{ mapInfo.pitch }}<br />
        [bounds south, west] {{ mapInfo.bounds.south }}, {{ mapInfo.bounds.west}}<br />
        [bounds north, east] {{ mapInfo.bounds.north }},
        {{ mapInfo.bounds.east }}
    </div>

onMounted のなかに追加

マップインスタンスから getZoom で倍率、 getBounds でバウンズを取得できる
取得したバウンズから getSouth 、 getWest 、 getNorth 、 getEast で詳細を取得し、 oFixed で小数点の桁数を設定

    map.on("load", () => {
        // レイヤーのロードなど
        // ポップアップのロードとセットアップなど
        console.log("map on load!");

        // ロード時の倍率を取得
        // mapInfo.zoom = map.getZoom().oFixed(2);

        // ロード時のバウンズ（表示範囲）を取得
        const bounds = map.getBounds();
        mapInfo.bounds.south = bounds.getSouth().toFixed(4);
        mapInfo.bounds.west = bounds.getWest().toFixed(4);
        mapInfo.bounds.north = bounds.getNorth().toFixed(4);
        mapInfo.bounds.east = bounds.getEast().toFixed(4);
    });

map on move start, move, move end

マップを動かした場合にマップ情報を更新するようにする
スタートとエンドのイベントもコンソールで確認できるようにする

onMounted のなかに追加

    // on move start
    map.on("movestart", () => {
        console.log("map move start!");
    });

    // on move
    map.on("move", () => {
        // 中心を取得して更新
        mapInfo.lng = map.getCenter().lng.toFixed(4);
        mapInfo.lat = map.getCenter().lat.toFixed(4);
        // 倍率を取得して更新
        mapInfo.zoom = map.getZoom().toFixed(2);
        // 傾きを取得して更新
        mapInfo.pitch = map.getPitch().toFixed(2);
        // 向きを取得して更新
        mapInfo.bearing = map.getBearing().toFixed(2);
        // バウンズを取得して更新
        const bounds = map.getBounds();
        mapInfo.bounds.south = bounds.getSouth().toFixed(4);
        mapInfo.bounds.west = bounds.getWest().toFixed(4);
        mapInfo.bounds.north = bounds.getNorth().toFixed(4);
        mapInfo.bounds.east = bounds.getEast().toFixed(4);
        // これでも取得可能
        const sw = bounds.getSouthWest().toArray();
        const ne = bounds.getNorthEast().toArray();
        console.log(sw)
        console.log(ne)
    });

map.on("load", () => {
    // レイヤーのロードなど
    // ポップアップのロードとセットアップなど
    console.log("map on load!");

map on click

マップをクリックした位置にターゲットポップアップを移動

// map on click
    map.on("click", (event) => {
        targetMarker.setLngLat(event.lngLat)
    });

マーカのイベント

marker on move end

マーカの情報を確認できるようにするためにテンプレート内に以下を追加
「マーカの作成」で作った「targetMarker」を使用する

    <!-- マーカの情報 -->
    <div>[target lng, lat] {{ targetInfo.lng }}, {{ targetInfo.lat }}</div>

onMounted のなかに追加

    // marker on drag
    targetMarker.on("dragend", () => {
        const lngLat = targetMarker.getLngLat();
        targetInfo.lng = lngLat.lng.toFixed(4);
        targetInfo.lat = lngLat.lat.toFixed(4);
    });