Geographic Data Collection, Virtualization and Search System using - - PowerPoint PPT Presentation

▶
geographic data collection virtualization and search
SMART_READER_LITE
LIVE PREVIEW

Geographic Data Collection, Virtualization and Search System using - - PowerPoint PPT Presentation

Aug 23, 2023 128 likes •494 views

Geographic Data Collection, Virtualization and Search System using Google Maps API s1200160 Takanori Shinozaki 1 Outline Introduction Database Design and Data Structure Previous System UseCase Diagram Problems

slide-1
SLIDE 1

Geographic Data Collection, Virtualization and Search System using Google Maps API s1200160 Takanori Shinozaki

1

slide-2
SLIDE 2

Outline

  • Introduction
  • Previous System
  • Problems
  • Purpose
  • Previous System Function
  • New Functions
  • Input output data
  • System model

2

  • Database Design and Data Structure
  • UseCase Diagram
  • Activity Diagram
  • Demonstration
  • This System Problems, solved
  • Implementation Envioment
  • Future work
  • Reference
slide-3
SLIDE 3

Introduction

  • Geographic Information System(GIS)[1]

○ GIS is a system designed to manage, serach and present all types of spatial or geographical data.

  • Geographic Data

○ Information describing the location in latitude, longitude format

  • Google Map

○ An online map service supported by Google

  • Google Maps API

○ An Interface to manipulate the Google map from the program ○ Adding custom Google Maps to public site, mobile phone ○ Easy to generate geographic data by the geocoding function and the drawing tool. ○ Display location, area, route by point, polygon and polyline on the map

3

slide-4
SLIDE 4

Introduction

  • Geographic data format

○ CSV data format Comma Separated Values(CSV) file stores tablar data (numbers and text) in plann text. ○ KML data format Keyhole Markup Language(KML) file an XML notation for expressing geographic anotation and visualization

  • n google map or earth.

4

slide-5
SLIDE 5

Introduction

  • Computer and smart phone become widespread.
  • These devices are used by many people all over the world.
  • Online google map can be viewed by these devices
  • Geoglaphic Information System with google map can understand

location information easily.

  • Geographic data(latitude, longtide) can be generated by using

Google Maps API.

5

slide-6
SLIDE 6

Previous System

  • Nakamura(thesis in 2013) has deveroped the

Geographic Data Collection System using Google Maps API.

  • This system can generate, edit point geographic data.
  • This system can search to point geographic data with

two spatial operation(near, within).

  • This system can interactively generate, display

multiple type of geographic data (point, polygon, polyline) coordinates on the Google map.

6

slide-7
SLIDE 7

Problems

  • New functions are needed for polygon and

polyline geographic data generation with database.

  • New spatial operations are needed for

search data in the database (contain and disjoint).

7

slide-8
SLIDE 8
  • To convert KML format geographic data into

database.

  • To generate polygon/polyline geographic data

by google map API and save it to database.

  • To display, edit and delete polygon/polyline data

with database.

  • To search point, polygon and polyline with

spatial operations(near, within, contain, disjoint).

8

Purpose

slide-9
SLIDE 9

Apach Server

Web Browser

SQL

System Model

Result

User Interface

Ajax Engine

PHP

Request Send Request Result Result

9

Database

Send Request

KML CSV TXT data

Google Map API

DATA

slide-10
SLIDE 10

Database Design and Data Structure

10

Data from http://itp.ne.jp/result/?kw=%89%EF%92%C3%8E%E1%8F%BC%81%40%8B%E2%8Ds&dcad=07 hospital (371 records) 8 columns bank (7 records) Data from http://ishakoko.jp/search?jiscode=07202 facility (8 records) Data from http://www.city.aizuwakamatsu.fukushima.jp/index_php/city_map/show_map.php school (44 records) Data from http://www.city.aizuwakamatsu.fukushima.jp/index_php/city_map/show_map.php

slide-11
SLIDE 11

Database Design and Data Structure

11

Data from http://buste.in/search/bus/list/BusteisCity/list1/358 4 columns 5 columns busstop (361 records) Data from facility (8 records) Data from http://e-stat.go.jp/SG2/eStatGIS/page/download.html [3] newroad (22 records) Data from http://www.aizukanko.com/kk/aibase/01shirou/maps/map_shigaizu.htm[2]

New Tables

machi (241 records)

slide-12
SLIDE 12

System Functions

12

are New Functions

slide-13
SLIDE 13

13

  • To store the KML data into the database
  • Three operation

○ Check ■ To check the number of columns in the table ○ New ■ Delete all data, add new data ○ Append ■ Add new data

  • Preparing input data

○ Dowload Aizu-Wakamatsu city area data from e-stat[3] data. ○ Convert the shap data to kml data using QGIS[4] ○ Add Hiragana and Romaji information data[5]

New Function(1) KML Data to Database Function

slide-14
SLIDE 14

New Function(1) KML Data to Database Interface

14

select KML data select Kanji and Hiragana display KML data select table Display Table submit Input database Check the format. KML file & information data & table check. display information data select New or Append

slide-15
SLIDE 15

New Function(2) Polygon Data Display & Edit Function

  • To display the polygon
  • To edit the contents of the database using the Google Map and

table.

  • Two editing methods

○ Table Edit ■ Edit by directly edting the text box. ○ Map Location Edit ■ Editing by dragging the polygon.

  • Three Operation

■ Update ■ New Polygon(Add)→Editing by drawing tool. ■ Delete

15

slide-16
SLIDE 16

16

To display area input or select Display Button Reset button update for database delete for database Information of the polygon Display the polygon e.g. Kogaimachi (蚕養 町)

New Function(2) Polygon Data Display & Edit Interface

Edit button name & romaji To create new polygon Drawing tool

slide-17
SLIDE 17

New Function(3) Polyline Data Display & Edit Function

17

  • To display the polyline
  • To edit the contents of the database using the Google Map and

table.

  • Two editing methods

○ Table Edit ■ Edit by directly edting the text box. ○ Map Location Edit ■ Editing by dragging the polyline.

  • Three Operation

■ Update ■ New Polyline(Add)→Editing by drawing tool. ■ Delete

slide-18
SLIDE 18

18

Delete Update button Reset Edit button Display button select or input display polyline Display Polyline Automacicaly drawing polyline information New Polyline button

New Function(3) Polyline Data Display& Edit Interface

Drawing tool

slide-19
SLIDE 19
  • To search information in the database.

Spatial operations ○ near ○ within ○ contain ○ disjoint

New Function(4) Data Search Function

19

Operation point op polygon point op polyline polygon op polygon polygon op polyline polyline op polyline nearest

＊

  • within
  • contain
  • △
  • disjoint
  • △・・・result empty ＊・・・SQL limitation
slide-20
SLIDE 20

20

select table what do you want to serch? result txt display result on map select opeartion sub opeartion display result

  • n map

show SQL

New Function(4) Data Search Interface

slide-21
SLIDE 21

21

Input & Output Data

  • Input Data

○ CSV data

■ CSV data format Comma Separated Values(CSV) file stores tablar data (numbers and text) in plann text.

○ KML data ■

KML data format Keyhole Markup Language(KML) file an XML notation for expressing geographic anotation and visualization on google map or earth.

○ Interactive input geographic data attributes information[13]

  • Output Data

○ Display point, polygon, polyline on googlemap ○ Display geographic information in the table.

slide-22
SLIDE 22

UseCase Diagram

22

Interactive Geographic Data Generation CSV File Conversion CSV File input Database Data Display Data Serch Draw Circle Draw rectangle Draw Polyline Draw Marker Draw Polygon Geocording Hiragana to Roamaji change to lat & lng

KML File input Database

Format Check String New String Append Format Check polygon or polyline String Append Table Edit Map location Edit Add Data Delete Data Update data Contain Serach Within Search Draw Point My System Disjoint Serach Neary Serach

slide-23
SLIDE 23

Activity Diagram

Get Display Data Drawing on the map Select Shape Select Color Interactive Geographic Data Generation CSV File Conversion Select CSV File Check The Function Select Specifies The Row Input Save Name and Destination CSV Data to Database Select CSV File Select Table Format Check Check The New or Append Save to Database KML Data to Database Select KML File Select Information File Select Table Format Check Save to Database Display Data From Database Select Point Polygon or Polyline Display Data Serach Select Table A Select Operation Select Table B Display Result

23

Edit Add Edit Delete

slide-24
SLIDE 24

Implementation Environment

  • Apache v2.2 [6]
  • PostgreSQL v9.3 [7]
  • PHP v5.4.14 [8]
  • Google Maps API v3 [9]
  • jQuery v1.11.0 [10]
  • QGIS v2.8.2

24

slide-25
SLIDE 25

Comparison(1)

25

Conversion Functions Previous System Our System CSV file

  • KML file

×

  • Maintence

Functions Previous System Our System Point Polygon Polyline Point Polygon Polyline Display

  • ×

×

  • Add
  • ×

×

  • Edit
  • ×

×

  • Delete
  • ×

×

  • Data to Database Comparison
  • Data Display & Edit Comparison
slide-26
SLIDE 26

26

Comparison(2)

Search Func- tions Previous System Our System

point

  • p

point Point

  • p

Polygon Point

  • p

Polyline Polygon

  • p

Polygon Polygon

  • p

Polyline Polyline

  • p

Polyline point

  • p

point Point

  • p

Polygon Point

  • p

Polyline Polygon

  • p

Polygon Polygon

  • p

Polyline Polyline

  • p

Polyline

near

  • ×

× × × ×

  • within
  • ×

× × × ×

  • contain
  • ×

× × × ×

  • disjoint
  • ×

× × × ×

  • Data Search Comparison
slide-27
SLIDE 27

Summary

  • A geographic data collection system has been

imolemented. ○ Easy to convert KML and CSV file into database. ○ Easy to generate Point, Polygon, Polyline data using Google Maps API. ○ Geographic Information in Aizu-Wakamatsu city about area, road, bank, hospital, school, public facilities has been generated by using this system. ○ For search functions with point, polygon, polyline has been tested and the search results are virtualized on Google Map.

27

slide-28
SLIDE 28

Future work

  • Development of the English and Japanese

version of the system

  • To generate system for various types of

tables

  • To generate more geographic data in Aizu-

Wakamatsu city [11][12]

28

slide-29
SLIDE 29

Demostration(1) [3.2] Data to Database Input KML file in to database.

29

① ② ③ ⑦ ④ ⑥ Select main menu → [3.2]KML Data to Database ①KML File : AizuKML.kml ②Information Data : AizuYomikata.txt ③Tablename : machi ④Check button : ⑤Check insert data method : New : Delete all records and insert data Append : Insert new data Table Delete : Select Table coloms delete ⑥Submit button : Input database. ⑦Crick table name : machi ⑤ Result KML Kanji & Hiragana Information “machi” table http://match6db:8080/s1200160/GGS/menu.html

slide-30
SLIDE 30

30

Click main menu → [4.2] Data Display & Edit -Polygon ①Click the “New Polygon” ②Select Polygon by drawing tool ③Draw Polygon ④Input name and romaji information ⑤Click the select area →input geo ⑥save button

Demonstration(2) Generate Polygon for University of Aizu.

③ ⑤ ⑥ ④ ② ①

slide-31
SLIDE 31

31

① ② Click main menu → [4.2] Data Display & Edit -Polygon ①Input or selected area name : 会津大学 ②Click “Display Aera” button →display polygon and information ③Click “Edit” button ④⑤Change the text box information. ⑥Change the coordinate data Click and drag ⑦Click the field ⑧Save(○) button ⑥ ⑦ ⑧

Demonstration(3) Edit Polygon for University of Aizu

③

slide-32
SLIDE 32

32

① ② Click main menu → [4.2] Data Display & Edit -Polygon ①Input or selected area name : 会津大 ②Click “Display Aera” button →display polygon and information

Demonstration(4) Check the change polygon

slide-33
SLIDE 33

33

① ② ③ ④ ⑤ ⑥Display result in table form ⑦Display SQL result Display result on map

Demonstration(5)

Find areas in Aizu-Wakamatsu city contain “Daitou-Aizu Bank”

Select “[5] Data Search”

slide-34
SLIDE 34

34

① ② ③ ⑤ ⑥ ⑥Display result in table form ⑥Display SQL result

Demonstration(6)

Find roads in Aizu-Wakamatsu city within 1km around “Daitou- Sengoku Bank”

Select “[5] Data Search” ④

slide-35
SLIDE 35

35

① ② ③ ⑤ ⑥ ⑦Display result in table form ⑥Display SQL result

(Result empty)

Demonstration(7)

Find four roads in Aizu-Wakamatsu city near “University of Aizu”

Select “[5] Data Search” ④

slide-36
SLIDE 36

References

1. GIS http://www.gsi.go.jp/GIS/ 2. 会津若松 まちなか観光マップhttp://www.city.aizuwakamatsu.fukushima.jp/e/sight/exlanguage_map.pdf 3. National Census Data (Aizu area data) http://e-stat.go.jp/SG2/eStatGIS/page/download.html 4. QGIS http://qgis.org/ja/site/ 5. Information data(How to read area name) http://memorva.jp/zipcode/index.php 6. Apach https://httpd.apache.org/download.cgi 7. postgreSQL http://www.postgresql.org/ 8. PHP http://php.net/downloads.php 9. Google Maps API v3 http://www.ajaxtower.jp/googlemaps/ 10. jQuery https://jquery.com/ 11. 会津若松市 道路名 ：マピオン電話帳 - Mapion http://www.mapion.co.jp/phonebook/M08015/07202/ 12. Toorist spot & conviniens store http://itp.ne.jp/result/?kw=%95%9F%93%87%8C%A7%89%EF%92%C3%8E%E1%8F%BC%8Es&dcad=07

36