お問い合わせ

ブログ

これまでに経験してきたプロジェクトで気になる技術の情報を紹介していきます。

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

okuda Okuda 9 months

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 でバウンズを取得できる
取得したバウンズから getSouthgetWestgetNorthgetEast で詳細を取得し、 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);
    });
Vue3でMapboxを使用する - イベント編 - 2022-03-05 18:25:44

コメントはありません。

4109

お気軽に
お問い合わせください。

お問い合わせ