Vue.js v3でLeafletの開発環境を構築

パッケージのインストール

1. Leafletのインストール:

Leafletをインストールするには、プロジェクトのルートディレクトリでターミナルを開き、以下のコマンドを実行します。

npm install leaflet

これにより、Leafletがプロジェクトに追加されます。

2. @types/leafletのインストール:

LeafletのTypeScriptの型定義を利用するために、@types/leafletパッケージをインストールします。以下のコマンドを実行します。

npm install --save-dev @types/leaflet

これにより、TypeScriptのコンパイル時にLeafletの型チェックが行われるようになります。

3. @vue-leaflet/vue-leafletのインストール:

VueでLeafletを使用するためのライブラリである@vue-leaflet/vue-leafletパッケージをインストールします。以下のコマンドを実行します。

npm install @vue-leaflet/vue-leaflet

これにより、VueでLeafletを利用するためのコンポーネントやディレクティブが追加されます。

以上の手順を実行することで、Leafletと関連するパッケージを手動でインストールすることができます。これにより、VueプロジェクトでLeafletを使用する準備が整います。ただし、手動でインストールした場合は、設定や依存関係の管理には注意が必要です。

main.jsでインポート

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Leafletのスタイル読み込み
import 'leaflet/dist/leaflet.css'

createApp(App).use(store).use(router).mount('#app')

マップを必要とするhoge.vueファイルにコンポーネントを追加

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    // 表示したい箇所に以下のコンポーネントを追記
    <MapPane></MapPane>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue';
// マップコンポーネント読み込み
import MapPane from '@/components/MapPane.vue';

@Options({
  components: {
    HelloWorld,
    MapPane
  },
})
export default class Home extends Vue {}
</script>

MapPaneコンポーネントの作成

MapPane.vue

<template>
  <div class="mapPane">
    <!--マップ-->
    <l-map :zoom="zoom" :center="center">
      <!--レイヤーコントロール-->
      <l-control-layers position="topright"></l-control-layers>
      <!--レイヤ設定-->
      <l-tile-layer
        v-for="tileProvider in tileProviders"
        :key="tileProvider.name"
        :name="tileProvider.name"
        :visible="tileProvider.visible"
        :url="tileProvider.url"
        :attribution="tileProvider.attribution"
        layer-type="base"
      ></l-tile-layer>
      <!--マーカー-->
      <l-marker :lat-lng="marker"></l-marker>
    </l-map>
  </div>
</template>

<script setup>
import {
  ref
} from 'vue';
import {
  LMap,
  LTileLayer,
  LControlLayers,
  LMarker
} from "@vue-leaflet/vue-leaflet";

const center = ref([35.44604, 139.631311]);
const zoom = ref(14);
const marker = ref([35.681, 139.763]);
const tileProviders = [
  {
    name: "MIERUNE Streets",
    visible: true,
    url: "https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]",
    attribution:
      '<a href="https://maptiler.jp/" target="_blank">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
  },
  {
    name: "MIERUNE Gray",
    visible: false,
    url: "https://api.maptiler.com/maps/jp-mierune-gray/256/{z}/{x}/{y}.png?key=[APIキー]",
    attribution:
      '<a href="https://maptiler.jp/" target="_blank">&copy; MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
  },
];
</script>

<style scoped>
.mapPane {
  height: 800px;
  margin: 0;
  text-align: left;
}
</style>

細かい説明は以下参照。今回はCompositionAPIで記述しているので、以下とはコードが少し異なります。
コンポーネント内で結構不要な箇所もあるので適宜削除して見てください。削除しなくても動きはします。
https://qiita.com/dayjournal/items/a9f0a354765fa9c66687

参考記事
https://www.npmjs.com/package/@vue-leaflet/vue-leaflet
【公式】https://vue2-leaflet.netlify.app/quickstart/#hello-map