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

No content

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

WebGISとは

そもそもGISって？

地理空間情報を扱う技術

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

じゃあWebGISって？

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

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

そこで、 FOSS4G を使おう!!

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

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

No content

構築方法

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

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

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

Leaflet Sample HTML ライブラリの参照設定

Leaflet Sample HTML ライブラリの参照設定

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

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

OpenStreetMap

var map = L.map('map'); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution:'© OpenStreetMap contributors'}).addTo(map); map.setView([43.0559815, 141.3857792], 16); JS

地理院地図

var map = L.map('map'); L.tileLayer(‘http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{ y}.png', { attribution: "国土地理院" }).addTo(map); map.setView([43.0559815, 141.3857792], 16); JS

No content

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

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

No content

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

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

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

Leaflet Sample HTML

var ParkIcon = L.icon({ iconUrl: './img/Park.png', iconSize: [50, 50], iconAnchor: [25, 20], popupAnchor: [0, -30] }); var Map_GeoJSON = L.geoJson(pointdata, { pointToLayer: function (feature, layer) { return L.marker(layer, { icon: ParkIcon }); }, onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.P13_003); } }).addTo(map); JS GeoJSONの表示 アイコンと属性値の反映 マーカーアイコンを設定

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

まとめ

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