05.md

属性に応じて透明度を変えてみよう

http://play.mylab.jp/webgis-hands-on/postgis/sample-5-1/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(row){
    var coordinates = [];

    row.geojson.coordinates.forEach(function(polygons){
      polygons.forEach(function(polygon){
        polygon.forEach(function(coordinate){
          coordinates.push({lat: coordinate[1], lng: coordinate[0]});
        });
      });
    });

+    var opacity = 1.0 / 2000 * parseInt(row.data.jinko, 0);
+
    var circle = new google.maps.Polygon({
      map: map,
-      paths: coordinates
+      paths: coordinates,
+      fillColor: '#ff0000',
+      fillOpacity: opacity
    });

    objects.push(circle);
  });
}

上記では人口によって濃淡を表現したが、人口密度によって表現する場合は下記となる。

http://play.mylab.jp/webgis-hands-on/postgis/sample-5-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(row){
    var coordinates = [];

    row.geojson.coordinates.forEach(function(polygons){
      polygons.forEach(function(polygon){
        polygon.forEach(function(coordinate){
          coordinates.push({lat: coordinate[1], lng: coordinate[0]});
        });
      });
    });
+
+    var jinko = parseInt(row.data.jinko, 0);
+    var area = parseInt(row.data.area, 0);

-    var opacity = 1.0 / 2000 * parseInt(row.data.jinko, 0);
+    // 1平方kmあたりの人口
+    var population_density = 0;
+    if(jinko > 0){
+      population_density = jinko / area * 1000 * 1000;
+    }
+
+    console.log(population_density);
+
+    var opacity = 0;
+    if(population_density > 0){
+      opacity = 1.0 / 30000 * population_density;
+    }
+
+    if(opacity < 0){
+      opacity = 0;
+    }
+
+    console.log(population_density, opacity);

    var circle = new google.maps.Polygon({
      map: map,
      paths: coordinates,
-      fillOpacity: opacity
+      fillColor: '#ff0000',
+      fillOpacity: opacity,
+      strokeColor: '#ff0000',
+      strokeOpacity: 0.5,
+      strokeWeight: 1
    });

    objects.push(circle);
  });
}