Aska

Vue3でMapboxを使用する - マップ編 -

アカウントの作成とモジュールのインストール

アカウントの作成

mapboxのページを開き、右上の「sign up」ボタンをクリック

「Create your Mapbox account」のページが開くので必要事項を記入する

「Team Mapbox」から「Verify your email」のメールが届くので「Verify my email」をクリックする

アカウントにログイン

アクセストークンを取得

Mapboxを使用するには、アクセストークンが必要になる
アカウントページにアクセスし、「Default public token」を取得
新しくトークンを作成することも可能

npm でインストール

mapbox-gl と言語用の mapbox-gl-language 、Geoロケーション用の mapbox-gl-geocoder をインストール

https://docs.mapbox.com/mapbox-gl-js/guides/install/
https://www.npmjs.com/package/mapbox-gl
https://www.npmjs.com/package/@mapbox/mapbox-gl-language
https://www.npmjs.com/package/@mapbox/mapbox-gl-geocoder
https://www.npmjs.com/package/@mapbox/mapbox-gl-directions

npm i mapbox-gl
npm i @mapbox/mapbox-gl-language

# geocoder
npm i @mapbox/mapbox-gl-geocoder

# directions
npm i @mapbox/mapbox-gl-directions
# or
npm i @mapbox/mapbox-gl-directions --legacy-peer-deps

Vueに組み込む

https://docs.mapbox.com/mapbox-gl-js/api/ https://docs.mapbox.com/mapbox-gl-js/api/map/ https://docs.mapbox.com/mapbox-gl-js/example/
https://docs.mapbox.com/help/tutorials/
https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/

mapの表示

必要なモジュールをインポートして onBeforeMount をつかいDOMがレンダリングされたあとにマップを表示

<script setup>
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
// language
import MapboxLanguage from "@mapbox/mapbox-gl-language";

// geocoder
import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";

// directions
import MapboxDirections from '@mapbox/mapbox-gl-directions';
<!-- or -->
import MapboxDirections from '@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions';

import "@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions.css";

import { ref, reactive, onMounted, onBeforeMount } from "vue";

// サポートしてるかチェック
if (!mapboxgl.supported()) {
    alert("Your browser does not support Mapbox GL");
} else {
    console.log("Your browser supported Mapbox GL");
}

// アクセストークン
const accessToken = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
// Map インスタンス
let map = null;
// MapboxLanguage インスタンス
let mapLanguage = null;
// GeolocateControl インスタンス
let locate = null;

// 選択中のユニット
let selectedUnit = ref("imperial");
// 選択中の言語
let selectedLanguage = ref(null);

// マップに設定する情報
// ここを色々いじってみる
const mapInfo = reactive({
    style: "mapbox://styles/mapbox/light-v10",
    lng: 135.4262,
    lat: 34.8215,
    zoom: 14, // 0 - 22
    pitch: 80, // 0 - 85
    bearing: 0, // 0 - 360
    bounds: {
        west: null,
        south: null,
        east: null,
        north: null,
    },
});

// 必ず`onMounted`の中で
onMounted(() => {

    // トークンをセット
    mapboxgl.accessToken = accessToken;

    // マップ
    map = new mapboxgl.Map({
        // マップを表示するエレメントのID
        container: "map",
        // 表示するマップのタイプ
        style: mapInfo.style,
        // マップの中心
        center: [mapInfo.lng, mapInfo.lat], // lng, lat
        // どのぐらいの倍率で表示するか
        zoom: mapInfo.zoom, // default: 0
        // 範囲を指定して表示もできる、この場合`zoom`はいらない
        // bounds: [
        //    [mapInfo.bounds.west, mapInfo.bounds.south], // [west, south]
        //    [mapInfo.bounds.east, mapInfo.bounds.north], // [east, north]
        // ],
        // 傾き 0から85
        pitch: mapInfo.pitch,
        // 方位 北から反時計回りに0から360
        bearing: mapInfo.bearing,
        // アンチエイリアス
        antialias: true,
        // マップボックス情報
        attributionControl: false,
    });
});
</script>

<template>
    <!-- マップをここに表示 -->
    <div id="map" class="map" />
</template>

<style scoped>
/* マップの高さは必ず指定 */
.map {
    height: 100%;
}
</style>

言語を設定する

onMounted のなかに追加
ブラウザの言語を設定する

    // マップの言語を設定する
    mapLanguage = new MapboxLanguage(
        {} // Browser language
        // {defaultLanguage: "en"}
    );
    map.addControl(mapLanguage);

ナビゲーションボタンを追加

onMounted のなかに追加

    // ナビゲーションボタンを追加
    const nav = new mapboxgl.NavigationControl({
        // 傾きのコントロールを表示
        visualizePitch: true,
    });
    // マップの右上に表示
    map.addControl(nav, "top-right");

フルスクリーンボタンを追加

onMounted のなかに追加

    // フルスクリーンボタンを追加
    const full = new mapboxgl.FullscreenControl();
    map.addControl(full);

オリジナルの説明を追加

onMounted のなかに追加

    // add custom attr
    const attr = new mapboxgl.AttributionControl({
        customAttribution: "map design by xxx!",
    });
    map.addControl(attr);

現在地ボタンを追加

onMounted のなかに追加

   // add current place
    locate = new mapboxgl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true,
        },
        // 誤差範囲の円を出す
        showAccuracyCircle: true, // default: true
        // 向き
        showUserHeading: true, // default: false
        // マーカーを出す
        showUserLocation: true, // default: true
        // トグルボタン
        trackUserLocation: true, // default: false
    });
    map.addControl(locate);

経路検索を追加

onMounted のなかに追加

    const direction = new MapboxDirections({
        accessToken: mapboxgl.accessToken,
    });
    map.addControl(direction, "top-left");

検索を追加

onMounted のなかに追加

    const geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl,
        language: "ja", // How to change language???
        types: "poi",
        reverseGeocode: true,
        limit: 10,
        collapsed: true,
        marker: {
            color: "orange",
        },
    });
    map.addControl(geocoder, "top-left");

スケールを追加

これを使う

// 選択中のユニット
let selectedUnit = ref("imperial");

onMounted のなかに追加

    // add scale and change unit
    scale = new mapboxgl.ScaleControl({
        maxWidth: 80, // default: 100
        unit: selectedUnit.value, // default: "metric" '[imperial, metric, nautical]
    });
    map.addControl(scale);Control(scale);

スケールを変更できるようにする

トップレベルにメソッドを追加、 onMounted のなかに入れるとうごかない

// ユニットチェンジのメソッド
const changeUnit = () => {
    scale.setUnit(selectedUnit.value);
};

template 内にラジオボタンを追加

<!-- ユニットの変更 -->
    <label>
        <input type="radio" v-model="selectedUnit"value="imperial" @change="changeUnit" />
        imperial
    </label>
    <label>
        <input type="radio" v-model="selectedUnit" value="metric" @change="changeUnit" />
        metric
    </label>
    <label>
        <input type="radio" v-model="selectedUnit" value="nautical" @change="changeUnit" />
        nautical
    </label>

言語を変更できるようにする

トップレベルにメソッドを追加追加

https://stackoverflow.com/questions/58605220/how-to-change-language-in-mapbox

// ランゲージチェンジのメソッド
const changeLang = () => {
    map.setStyle(
        mapLanguage.setLanguage(map.getStyle(), selectedLanguage.value)
    );
};

template 内にセレクトボタンを追加

    <select v-model="selectedLanguage" @change="changeLang">
        <option value="ar">Arabic</option>
        <option value="zh-Hans">Chinese Simplified</option>
        <option value="zh-Hant">Chinese Traditional</option>
        <option value="en">English</option>
        <option value="fr">French</option>
        <option value="de">German</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="ko">Korean</option>
        <option value="mul">Multilingual</option>
        <option value="pt">Portuguese</option>
        <option value="ru">Russian</option>
        <option value="es">Spanish</option>
        <option value="vi">Vietnamese</option>
    </select>

マップを変更できるようにする

トップレベルにメソッドを追加追加

// マップスタイルチェンジのメソッド
const changeStyle = () => {
    map.setStyle(mapInfo.style);
};

template 内にセレクトボタンを追加

<select v-model="mapInfo.style" @change="changeStyle">
    <option value="mapbox://styles/mapbox/streets-v11">
        streets-v11 - lang support
    </option>
    <option value="mapbox://styles/mapbox/outdoors-v11">
        outdoors-v11 - lang support
    </option>
    <option value="mapbox://styles/mapbox/dark-v10">
        dark-v10 - lang support
    </option>
    <option value="mapbox://styles/mapbox/light-v10">
        light-v10 - lang support
    </option>
    <option value="mapbox://styles/mapbox/satellite-streets-v9">
        satellite-streets-v9 - lang support
    </option>
    <option value="mapbox://styles/mapbox/satellite-streets-v11">
        satellite-streets-v11
    </option>
    <option value="mapbox://styles/mapbox/navigation-day-v1">
        navigation-day-v1
    </option>
    <option value="mapbox://styles/mapbox/navigation-night-v1">
        navigation-night-v1
    </option>
    <option value="mapbox://styles/mapbox/traffic-day-v2">
        traffic-day-v2 - lang support
    </option>
    <option value="mapbox://styles/mapbox/traffic-night-v2">
        traffic-night-v2 - lang support
    </option>
    <option value="mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y">
        ckhqrf2tz0dt119ny6azh975y
    </option>
    <option value="mapbox://styles/kohei0728/ckzrv8nzc002i14quk4komtov">
        kohei0728
    </option>
</select>