🙌

【Nuxt3】Mapbox Api開発方法（途中

2022/08/15に公開

Nuxt

Mapbox

tech

これまでwebアプリで地図表示にはgoogle maps apiを使っていましたが、google maps apiは都道府県や市町村の塗りつぶしができません。

そこで、表示のカスタマイズ性が広いmapbox apiを使うことにしました

アカウント作成

トークンが発行されます

ページに表示させてみる

私はnuxt3を使っています。

ライブラリインストール

npm i mapbox-gl @types/mapbox-gl

https://www.npmjs.com/package/mapbox-gl

pages/mapbox.vue

最小構成の表示です

<script setup lang="ts">
import mapboxgl from 'mapbox-gl'

onMounted(()=>{
    const map = new mapboxgl.Map({
        accessToken: 'ここにアクセストークンを貼り付け',
        container: 'map', // <div id="map"></div>
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [135.4, 34.6], // 梅田周辺
        zoom: 12
    })
})
</script>

<template>
    <div>
        <h1>マップ</h1>
        <div id='map'></div>
    </div>
</template>

cssの設定

CSSをインポートするためにimport 'mapbox-gl/dist/mapbox-gl.css'を追記すると、マップが表示されません。

こちらの記事にあるように、divの高さを記述することで表示できるようになります。

<script setup lang="ts">
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css' // これだけ追記するとマップが表示されない

onMounted(()=>{
    const map = new mapboxgl.Map({
        accessToken: 'ここにアクセストークンを貼り付け',
        container: 'map', // <div id="map"></div>
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [135.4, 34.6], // 梅田周辺
        zoom: 12
    })
})
</script>

<template>
    <div>
        <h1>マップ</h1>
        <div id='map' style="height:100%"></div>
    </div>
</template>

言語設定

デフォルトでは英語ですので、日本語で表示させるようにします。

公式ではsetLayoutPropertyで各言語に対応したレイアウト層を示すやり方がありますが、日本語はあまり対応していないようです（通りの名前など英語のままになってしまいます）

こちらのライブラリを用いることで、日本語表示ができました。

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

onMounted(()=>{
    const map = new mapboxgl.Map({
        accessToken: 'pk.eyJ1IjoidzU5NjZxemgiLCJhIjoiY2w2dTVzNnlxMGcycjNjcDV0dTczaTFlcSJ9.DZ63P-ktIUegNlYzWiQNqg',
        container: 'map', // <div id="map"></div>
        style: 'mapbox://styles/mapbox/streets-v11', // default style
        center: [135.4, 34.6], // starting position as [lng, lat]
        zoom: 12
    })

    const language = new MapboxLanguage({
        defaultLanguage: 'ja',
    });
    map.addControl(language);
})
</script>

<template>
    <div>
        <h1>マップ</h1>
        <div id='map' style="height:100%"></div>
    </div>
</template>

都道府県のGeoJsonファイルの導入

geojsonポリゴンを読み込んで、塗りつぶしする方法は以下のやり方でできます。

日本の都道府県の場合、国土交通省のページから各都道府県のgeojsonデータを取得できます。
（resas apiみたいにgeojsonを渡してくれると助かるんですが、そういうわけにはいかなさそうです）

ところが、このgeojsonファイルはクソ重いため、これを導入したらページを開くのに数十秒かかってしまいます。

対策方法ができたら公開します。