MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2022.09.23

Vueでcsvファイルの取込結果を地図に表示してみる

Vuejs+csvインポート結果表示 メイン画像

みなさん、こんにちは。

Vuejs紹介シリーズの第4回目は、複数の位置情報を地図上に表示してみたいと思います。

 

地図システムを利用していて、大量の位置情報を一括で地図上に表示したい時はございませんか?
そんな時に誰でも作成できるCSVファイルから取り込めたら便利ですよね?

CSVファイルのデータを取り込み地図上に表示する方法をご紹介したいと思います。

 

1. CSVファイル作成

下記の内容のCSVファイルを作成します。

ID,ユーザーID,ユーザー名,緯度,経度,登録日時 1,1,ユーザ―A,35.69217468,139.7597872,2022/8/25 18:27:14 2,1,ユーザ―A,35.69215793,139.7598112,2022/8/25 18:27:24 3,1,ユーザ―A,35.69215793,139.7598112,2022/8/25 18:27:39 4,1,ユーザ―A,35.69215793,139.7598112,2022/8/25 18:27:44 5,1,ユーザ―A,35.69215793,139.7598112,2022/8/25 18:27:54 ・・・

 

2. CSVファイル取り込み

templateにファイルダイアログを記述し、イベントを記述します。

<template> ・・・ <v-file-input id=”fileImport” accept=”text/csv” @change=”importCsvFile” /> ・・・ </template>

 

3. 読み込んだ情報を地図上にプロットする

ファイルダイアログから項目1で作成したCSVファイルを取込みます。 そのCSVファイル内のデータから位置情報の部分だけ抜き出し、抜き出した位置情報を元に地図上に印をつけます。

マーカーの設置方法は、第3回目「Vueで住所検索する方法」で行っているので、今回は、ポリゴンで円を描いてみようと思います。

shift-jisのファイルを読み込みたい方は、読み込んだファイルデータをencoding-japaneseのライブラリなどを使用し、変換した位置情報データを利用してください。

<script> export default { data: () => ({ // googleMap関連 ・・・ locationList: [], // csvファイルから取り込んだ位置情報 // ファイル関連 CSV_LAT: 3, CSV_LNG: 4, ・・・ }, ・・・ methods: { ・・・ /** * csvファイル読み込み */ importCsvFile(e) { const vm = this; let file = e; // こちらにバリデーションを考えて、実装してみてください。 // 読み込みファイル情報セット const reader = new FileReader() reader.readAsBinaryString(file); reader.onload = function() { const csvData = reader.result; const readCsvJson = vm.$papa.parse(csvData); vm.dropLocationPoints(readCsvJson.data); }; }, /** * 位置情報の場所をプロットする * @param {Array} latLng配列 */ dropLocationPoints(list) { const vm = this; this.removeLocationPoints(); list.forEach(item => { let lat = Number(item[this.CSV_LAT]); let lng = Number(item[this.CSV_LNG]); if(lat && lng){ vm.drawCircleSymbol(lat, lng); vm.locationList.push(location); } }); }, /** * Symbol(circle)を地図上に描画する。 * @param lat * @param lng * @return {google.maps.LatLng} latlng */ drawCircleSymbol(lat, lng) { let options = { strokeColor: “#000000”, strokeOpacity: 1, strokeWeight: 0.05, fillColor: “green”, fillOpacity: 0.2, center: new this.google.maps.LatLng(lat, lng), radius: Math.sqrt(20), }; const circle = new this.google.maps.Circle(options); circle.setMap(this.map); this.locationPoints.push(circle); return circle; }, /** * 位置情報をプロットしたすべての場所を削除する */ removeLocationPoints() { this.locationPoints.forEach(symbol => { symbol.setMap(null); }); this.locationPoints = []; }, ・・・ </script>

取り込んだcsvファイルの位置情報が緑色の円で地図上に表示されたと思います。

staticmap4

 

いかがでしょうか?これでファイルから位置情報も取り込めるようになりましたね。 お気に入りの場所や通勤ルートの位置情報をcsvファイルに書き出して取り込んでみましょう!!

 

 

みなさんも是非お試しください!!

 

 

バイ!

 

 

 

 

【Vuejs紹介シリーズ】

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

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

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

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

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

第7回目「Vuejs +OpenStreetMap表示」

 

 

 

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

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

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

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

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

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

2018.03.31

Googleマップに地域メッシュを描画する

みなさん、こんにちは。

今回は、地域メッシュを Google マップ上に描画してみたいと思います。

地域メッシュは、Wik・・・

続きを読む

2018.06.22

Google Maps Platform でAPIキーを新規に作成する方法

みなさん、こんにちは。

Google 社より5月3日に発表された Google Maps Platform では、APIキーを指定しないアクセ・・・

続きを読む

2019.01.13

NEVER LOST AGAIN 〜グーグルマップ誕生〜

明けましておめでとうございます。

今年もどうぞよろしくお願いいたします。

 

さて、今回は書籍のご紹介をした・・・

続きを読む

 - GIS, Google Maps JavaScript API