WebGISをはじめてみる

WebGISをはじめてみる Yasunori Kirimoto 2015.10.31 OSGeo.JP × HTML5fun

今日の目次 ①WebGISとは ②構築方法 ③ まとめ

WebGISとは

そもそもGISって？

地理空間情報を扱う技術

位置情報 + 属性国土地理院基盤地図情報を使用

じゃあWebGISって？

WebGISをもっとも浸透させたコンテンツ Google Maps

自由度が高いWebGISを構築するには？

そこで、 FOSS4G を使おう!!

Free Open Source Software for GeoSpatial オープンソースの地理情報ソフトウェア(GIS)

SapporoLiveMap http://sapporolivemap.day-journal.com/

構築方法

基本構成背景地図マーカー GeoJSON

index.html stylesheet.css script.js HTML CSS JS

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Leaflet Sample</title> <script
src="./Library/leaflet-0.7.5/leaflet.js”></script> <link href=“./Library/leaflet-0.7.5/leaflet.css" rel="stylesheet" /> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML ライブラリの参照設定

src="http://cdn.leafletjs.com/leaflet- 0.7.5/leaflet.js"></script> <link rel="stylesheet“ href="http://cdn.leafletjs.com/ leaflet-0.7.5/leaflet.css" /> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML ライブラリの参照設定

html, body { height: 100%; padding: 0; margin: 0; }
#map { z-index: 0; height: 100%; } CSS

OpenStreetMap

地理院地図

var Map_Marker = L.marker([43.0559815, 141.3857792]) .addTo(map); var comment = 'Inter
x cross Creative Center'; Map_Marker.bindPopup(comment).openPopup(); JS マーカーの表示ポップアップの表示

・データを作成・オープンデータを利用

geojson.io

国土数値情報

GeoJSON 表示

var pointdata = { "type": "FeatureCollection", "crs": { "type": "name",
"properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, "features": [ { "type": "Feature", "properties": { "P13_003": "北6条エルムの里公園" }, "geometry": { "type": "Point", "coordinates": [ 141.34308642, 43.0666937 ] } }, { "type": "Feature", "properties": { "P13_003": "宮部記念緑地" }, "geometry": { "type": "Point", "coordinates": [ 141.33550164, 43.0666937 ] } }, { "type": "Feature", "properties": { "P13_003": "偕楽園緑地" }, "geometry": { "type": "Point", "coordinates": [ 141.34429626, 43.06828667 ] } }, { "type": "Feature", "properties": { "P13_003": "八軒コスモス公園" }, "geometry": { "type": "Point", "coordinates": [ 141.32328053000001, 43.08470141 ] } } ] }; GeoJSON

src="./Library/leaflet-0.7.5/leaflet.js”></script> <link href=“./Library/leaflet-0.7.5/leaflet.css" rel="stylesheet" /> <script src="./files/sample.geojson"></script> <link href="./css/stylesheet.css" rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="./js/script.js"></script> </body> </html> HTML

国土数値情報（都市公園データ）を使用

まとめ

・背景地図・マーカー・GeoJSON ・全体概要

WebGISをはじめてみる

WebGISをはじめてみる

More Decks by Yasunori Kirimoto

Other Decks in Technology

Featured

Transcript