MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2022.09.28

Vuejs +OpenStreetMap表示

Vuejs+OpenStreetMap表示 メイン画像

みなさん、こんにちは。
地図システム開発をしていると様々な地図を使用するかと思います。 その中でも「誰でも自由に使用できる地図」として、OpenStreetMap(OSM)があります。今回は、こちらの地図を使ってみましょう。

OSMを表示するにあたり、OpenLayersを使用すると簡単に地図を表示できるので、使ってみたいと思います。

 

1. OpenLayersのインストール

下記のコマンドをたたいて、OpenLayers6をインストールします。
※バージョンは各自の環境に合わせてください。

npm install ol@6.15.1

 

2. 地図を表示する

表示するtemplateは、下記を準備しましたが、ご自分が表示したい場所に埋め込んでいただいてもOKです。

<template> <v-sheet class=”pa-0″ :light=”true” width=”100%” height=”100vh” > <v-sheet id=”map” class=”pa-0″ :light=”true” style=”width: 100%; height: 100vh;” > </v-sheet> </template> <script> import {Map, View} from ‘ol’; import TitleLayer from ‘ol/layer/Tile’ import OSM from ‘ol/source/OSM’ import {transform} from ‘ol/proj’; export default { name: ‘OpenStreetMapContent’, props: [ ], data : function(){ return { } }, computed : { }, mounted : function(){ // 地図の中心を指定します。表示する座標系に注意してください。 let center = new transform( [139.759854, 35.692195], ‘EPSG:4326’, ‘EPSG:3857’ ); var map = new Map({ controls: false, layers: [ new TitleLayer({ source: new OSM() }) ], target: ‘map’, view: new View({ center: center, zoom: 17 }) }); const controls = map.getControls(); controls.forEach(control => map.removeControl(control)); }, methods: { }, } </script>

 

下記のサンプルの地図部分のように表示することができます。

staticmap4

 

 

いかがでしょうか?
いつもはGoogleMapを使用している方でも、OpenLayersを使えば、あっという間にOSMを表示できますね。 また、マルティスープでは、GoogleMap、OpenStreetMap、いつもナビ、MapFunなど様々な地図を使ったシステム開発を行っております。
地図開発で気になる点がございましたら、ぜひ、お問い合わせください。お待ちしております。

 

Vuejs紹介シリーズは、今回の7回目で一区切りとなります。 Vuejsを使って、地図操作する機能やWeb画面に表示する基本的な事をご紹介させていただきました。 Vuejsといったフレームワークを使用する事となっても、ほとんどの機能がJavaScriptを使用できれば、簡単に動かすことができましたね。
今回、ご紹介させていただいた機能やGoogle Maps JavaScript APIなど使用して、アイディアをカタチにしてみてはいかがでしょうか?

 

 

みなさんも是非地図システムを開発してみましょう!!

 

 

バイ!

 

 

 

 

【Vuejs紹介シリーズ】

第1回目「Vueで地図を表示してみよう!!」

第2回目「VueでMaterial Design Iconを表示する方法」

第3回目「Vueで住所検索する方法」

第4回目「Vueでcsvファイルの取込結果を地図に表示してみる」

第5回目「地図上の図形にイベントを定義する方法」

第6回目「Vuejs + Chartjsでグラフを表示する」

 

 

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2017.01.19

Distance Matrix API の使い方を考える

みなさん、こんにちは。

 

今回は、Distance Matrix API の使い方について説明いたします。

続きを読む

2018.06.28

新プランの Places API を調べてみました

みなさん、こんにちは。

新プラン Google Maps Platform の中で、 Places API の価格体系は、非常に細かく分類・・・

続きを読む

2017.04.08

Googleマップで見る「ブラタモリマップ」を作成してみました

みなさん、こんにちは。

国民的人気番組「ブラタモリ」でタモリさんが訪れた街を Google マップ上で表示する「ブラタモリマップ」を作成し・・・

続きを読む

 - GIS, OpenStreetMap