Vue3とvue-leafletを用いて地図上に
コントロールコンポーネントとオーバーレイを表示するまで
本記事では、タイトル通りVue3向けのvue-leafletを用いてコントロールコンポーネントとオーバーレイを表示する方法、作業の過程で躓いたポイントをまとめます。
目次
はじめに
こんにちは。
クラウドソリューショングループのishimaru.rです。
本記事は、Vue3とvue-leafletを用いて地図上に独自アイコンとポップアップを表示するまでで作成したものをベースに進めていきますのでご参照ください。
1. LControlScaleの追加
まずはLControlScale(地図上の縮尺)を追加します。
<l-map id="map" :zoom="18" :center="[35.686541, 139.698851]">
<l-tile-layer :url="url"></l-tile-layer>
<l-control-scale :imperial="true" :metric="false"></l-control-scale>
<l-marker :lat-lng="[35.686541, 139.698851]">
<l-icon :icon-url="iconUrl" :icon-size="[35, 50]"></l-icon>
<l-popup>アイソルート本社です！</l-popup>
</l-marker>
</l-map>つづいてタグ内の処理を追加します。
- LControlScaleコンポーネントのインポート処理追加
- 使用するコンポーネントへの追加
import { LMap, LTileLayer, LMarker, LControlScale, LIcon, LPopup } from '@vue-leaflet/vue-leaflet';
export default {
components: {
LMap,
LTileLayer,
LMarker,
LControlScale,
LIcon,
LPopup
},
2. LControlLayersの追加
続いてLControlLayersを追加します。LControlLayersは異なる地図レイヤーやオーバーレイを切り替えるためのコントロールを提供するコンポーネントです。
また、l-tile-layerについても複数の地図レイヤーに対応するため修正します。
<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-control-layers position="topright"/>
つづいてタグ内の処理を追加します。
- LControlLayersコンポーネントのインポート処理追加
- 使用するコンポーネントへの追加
- 使用する複数地図レイヤーを指定
import { LMap, LTileLayer, LMarker, LControlLayers, LIcon, LPopup } from '@vue-leaflet/vue-leaflet';
export default {
components: {
LMap,
LTileLayer,
LMarker,
LControlLayers,
LIcon,
LPopup
},
data() {
return {
iconUrl: require('@/assets/isoroot.png'),
tileProviders: [
{
name: 'OpenStreetMap',
visible: true,
attribution:
'© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
},
{
name: 'OpenTopoMap',
visible: false,
url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
attribution:
'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
},
],
};
}
};
3. LImageOverlayの追加
次に特定のエリアに対して画像オーバーレイを表示する方法を記載します。
<l-map id="map" :zoom="18" :center="[35.686541, 139.698851]">
<l-image-overlay :url="overlayurl" :bounds="bounds"></l-image-overlay>
つづいてタグ内の処理を追加します。
- LImageOverlayコンポーネントのインポート処理追加
- コンポーネントへの追加
import { LMap, LTileLayer, LImageOverlay, LMarker, LControlLayers, LIcon, LPopup } from '@vue-leaflet/vue-leaflet';
export default {
components: {
LMap,
LTileLayer,
LImageOverlay,
LMarker,
LControlLayers,
LIcon,
LPopup
},
今回上記で示した例では背景が透過された斜線が入った四角形を表示していることで、特定の操作を禁止するエリアというような表現も可能となります。
同じく画像を扱うLIConコンポーネントと大きく違う点としてはLImageOverLayでは範囲を指定し画像を選択することで地図の縮尺が変わったとしても固定のエリアに表示させることが可能です。
さいごに
2. LControlLayersの追加で記載した通り、LControlLayersではオーバーレイの管理も可能です。3. LImageOverlayの追加で記載したコードを次の通り編集します。
<l-map id="map" :zoom="18" :center="[35.686541, 139.698851]">
<l-image-overlay :url="overlayurl" :bounds="bounds" layer-type="overlay" name="Image Overlay"></l-image-overlay>上記により、次の画像の通り表示のOn/Offを切り替えることが可能です。
このように各種コンポーネントを組み合わせることでより便利な機能とすることが出来ます。
どのような機能の組み合わせが出来るかは別の機会にまとめようと思います。
