2018/11/7

webgis-hands-on/01.md at master · hajime-miyauchi/webgis-hands-on

hajime‑miyauchi / webgis‑hands‑on
Branch: masterwebgis‑hands‑on / mysql / 01.md

Find file Copy pathhajime‑miyauchi サンプルのURLを修正
1 contributor
78 lines (59 sloc)

852afdb

11 days ago

1.28 KBMySQLから取得した緯度経度に円を描いてみよう
http://play.mylab.jp/webgis‑hands‑on‑mysql/mysql/sample‑1‑1/index.html
index.htmlとmain.cssは変更なし
main.js'strict'
var map = null;function initMap() {map = new google.maps.Map($('#map').get(0), {center: {lat: 35.172899, lng: 136.887531},
zoom: 15});+$.ajax({url: 'data.json',url: 'api.php',type: 'GET',
dataType: 'json'}).done(function(data){
console.log(data);render(data);}).fail(function(){console.log('error');});}function render(data){- data.circle_coordinates.forEach(function(coordinate){+ data.forEach(function(geom){var circle = new google.maps.Circle({map: map,
center: coordinate,+center: {lat: geom.coordinates[1], lng: geom.coordinates[0]},radius: 100});});}

api.php<?php$db = mysqli_connect('localhost', <名>, <>, 'opendata');if(!$db){
return;}$sql = <<<EOS
SELECT ST_AsGeoJson((geom)) AS geojson
FROM mcdnald

https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/mysql/01.md

1/2

2018/11/7

webgis-hands-on/01.md at master · hajime-miyauchi/webgis-hands-on
EOS;$stmt = $db->prepare($sql);$stmt->execute();$stmt->bind_result($geojson);$json = [];while(($row = $stmt->fetch()) != NULL){$json[] = json_decode($geojson);}echo json_encode($json);exit;

https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/mysql/01.md

2/2

2018/11/7

webgis-hands-on/02.md at master · hajime-miyauchi/webgis-hands-on

hajime‑miyauchi / webgis‑hands‑on
Branch: masterwebgis‑hands‑on / mysql / 02.md

Find file Copy pathhajime‑miyauchi サンプル2を追加
1 contributor
179 lines (145 sloc)

7c4b81f

11 days ago

3.84 KB

表示している範囲の緯度経度のみをMySQLから取得しよう
http://play.mylab.jp/webgis‑hands‑on‑mysql/mysql/sample‑2‑1/index.html
index.htmlとmain.cssは変更なし
main.jsの変更点は下記2点。
1. idle(待機)イベントが発生したら、idleMapsメソッドを呼ぶ
2. api.phpに表示領域の東西南北の座標を緯度経度でパラメータとして渡す(図１)

北東 右上 の座標で取得
例：

北西(右上)は算出できる()
getNorthEast()(37.7892,140.4898)(37.7892, 136.9851)

表示領域
で取得

getBounds()

南西 左下 の座標で取得
例：()
getSouthWest()(35.2199,136.9851)

南東(右下)は算出できる( 35.2199 , 140.4898 )

それぞれの座標をパラメータとして構築。
北(n): 37.7892
南(s): 35.2199
東(e):140.4898
西(w): 136.9851

図1. 表示領域

api.phpの変更点は下記2点。
1. パラメータとして渡された東西南北の緯度経度から、四角形のポリゴンデータを生成する(図２)2. 生成した四角形に含まれるデータのみを取得するようSQLに条件追加(図3)https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/mysql/02.md

1/4

2018/11/7

webgis-hands-on/02.md at master · hajime-miyauchi/webgis-hands-on

パラメータからポリゴンを生成
北(n): 37.7892
南(s): 35.2199
東(e): 140.4898
西(w): 136.9851(e, n)(w, n)

ポリゴン(w, s)(e, s)

POLYGON((w n,w s,e s,e n,w n))

図2. ポリゴン

boolean ST_Intersects( geometry geomA , geometry geomB );赤い四角系とIntersectsする(True)のは太い円。
main.js

図3. ST_Intersects'strict'
var map = null;function initMap() {map = new google.maps.Map($('#map').get(0), {center: {lat: 35.172899, lng: 136.887531},zoom: 15});+ google.maps.event.addListener(map, 'idle', idleMaps);+}++function idleMaps()

https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/mysql/02.md

2/4

2018/11/7

webgis-hands-on/02.md at master · hajime-miyauchi/webgis-hands-on+{+ var zoom = map.getZoom();+ var bounds = map.getBounds();+ var ne = bounds.getNorthEast();+ var sw = bounds.getSouthWest();+ var params = 'zoom=' + zoom + '&n=' + ne.lat() + '&s=' + sw.lat() + '&e=' + ne.lng() + '&w=' + sw.lng();+$.ajax({url: 'api.php',+url: 'api.php?' + params,
type: 'GET',
dataType: 'json'}).done(function(data){
console.log(data);
render(data);}).fail(function(){console.log('error');});}function render(data){
data.forEach(function(geom){var circle = new google.maps.Circle({map: map,center: {lat: geom.coordinates[1], lng: geom.coordinates[0]},radius: 100});});}

api.php<?php$db = mysqli_connect('localhost', <名>, <>, 'opendata');if(!$db){
return;}+$north = $_GET['n'];+$west = $_GET['w'];+$east = $_GET['e'];+$south = $_GET['s'];+$zoom = $_GET['zoom'];++$geom = 'POLYGON((';+$geom .= $west . ' ' . $north . ',';+$geom .= $west . ' ' . $south . ',';+$geom .= $east . ' ' . $south . ',';+$geom .= $east . ' ' . $north . ',';+$geom .= $west . ' ' . $north;+$geom .= '))';+$sql = <<<EOS
SELECT ST_AsGeoJson((geom)) AS geojson
FROM mcdnald+WHERE ST_Intersects(geom, ST_GeomFromText(?, 4326, 'axis-order=long-lat')) = True
EOS;
$stmt = $db->prepare($sql);+$stmt->bind_param('s', $geom);$stmt->execute();$stmt->bind_result($geojson);$json = [];while(($row = $stmt->fetch()) != NULL){$json[] = json_decode($geojson);}echo json_encode($json);https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/mysql/02.md

3/4

2018/11/7

webgis-hands-on/02.md at master · hajime-miyauchi/webgis-hands-on

上記のみでは再描画のたびに円が上書きされてしまう。そのため、再描画の際は描画済みの円を削除する必要がある。
http://play.mylab.jp/webgis‑hands‑on‑mysql/mysql/sample‑2‑2/index.html
main.js'strict'var map = null;+var objects = [];function initMap() {map = new google.maps.Map($('#map').get(0), {center: {lat: 35.172899, lng: 136.887531},zoom: 15});
google.maps.event.addListener(map, 'idle', idleMaps);}
function idleMaps(){var zoom = map.getZoom();var bounds = map.getBounds();
var ne = bounds.getNorthEast();var sw = bounds.getSouthWest();var params = 'zoom=' + zoom + '&n=' + ne.lat() + '&s=' + sw.lat() + '&e=' + ne.lng() + '&w=' + sw.lng();$.ajax({url: 'api.php?' + params,type: 'GET',
dataType: 'json'}).done(function(data){
console.log(data);render(data);}).fail(function(){console.log('error');});}function render(data){+ objects.forEach(function(o){+o.setMap(null);+ });+data.forEach(function(geom){var circle = new google.maps.Circle({map: map,center: {lat: geom.coordinates[1], lng: geom.coordinates[0]},radius: 100});++objects.push(circle);});}https://github.com/hajime-miyauchi/webgis-hands-on/blob/master/mysql/02.md

4/4