03.md

属性に応じて大きさを変えてみよう

http://play.mylab.jp/webgis-hands-on/postgis/sample-3-1/index.html

api.php

<?php

define('DSN', 'dbname=opendata user=guest');

$db = pg_connect(DSN);
if(!$db){
    echo 'error not connected';
    return;
}

$north = $_GET['n'];
$west = $_GET['w'];
$east = $_GET['e'];
$south = $_GET['s'];
$zoom = $_GET['zoom'];

+if($zoom < 13){
+  echo json_encode([]);
+  exit;
+}
+
$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 mcdnald2
+SELECT *, ST_AsGeoJson((geom)) AS geojson
+FROM shelter
WHERE ST_Intersects(geom, ST_GeomFromText($1, 4326)) = True
EOS;

$result = pg_prepare($db, '', $sql);
$result = pg_execute($db, '', [$geom]);

$json = [];
while(($row = pg_fetch_assoc($result)) != NULL){
-    $json[] = json_decode($row['geojson']);
+    $json[] = [
+      'data' => $row,
+      'geojson' => json_decode($row['geojson'])
+    ];
}

echo json_encode($json);

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 radius = 100;
+    if(geom.data.p20_005 > 0){
+      radius = parseInt(geom.data.p20_005) / 100;
+    }
+
    var circle = new google.maps.Circle({
      map: map,
-      center: {lat: geom.coordinates[1], lng: geom.coordinates[0]},
-      radius: 100
+      center: {lat: geom.geojson.coordinates[1], lng: geom.geojson.coordinates[0]},
+      radius: radius
    });

    objects.push(circle);
  });
}