|
<!DOCTYPE html> |
|
<html lang="ja"> |
|
<head> |
|
<meta http-equiv="content-language" content="ja"> |
|
<title>Kyoto Wifi Map</title> |
|
<link rel="stylesheet" href="./style.css"> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css"> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/2.0.0/turf.js"></script> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
</head> |
|
|
|
<body> |
|
<div id="map"></div> |
|
|
|
<script> |
|
//jsonデータの読み込み |
|
d3.queue() |
|
.defer(d3.json, 'kyotoWifiMap.geojson') |
|
.await(function(error, points) { |
|
|
|
//取得する統計情報(今回は合計値のみ) |
|
var aggregations = [ |
|
{ |
|
aggregation: 'count', |
|
inField: '', |
|
outField: 'pt_count' |
|
} |
|
] |
|
|
|
map = L.map('map').setView([35.0, 135.75], 12); |
|
|
|
//地理院地図レイヤー追加 |
|
L.tileLayer( |
|
'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', |
|
{ |
|
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>", |
|
accessToken: 'pk.eyJ1IjoiaGlyb3NhamkiLCJhIjoiY2phYW1qM2lyMHRzcTMybzd1dzhlaG83NCJ9.2QcsoUxneas4TQFI3F-DyQ', |
|
maxZoom: 18, |
|
} |
|
).addTo(map); |
|
|
|
//hexグリッド用のレイヤーを準備 |
|
var hexLayer = L.geoJson().addTo(map); |
|
|
|
//表示されている四隅の緯度経度を取得 |
|
var b = map.getBounds(); |
|
extend = [b.getSouthWest().lng , b.getSouthWest().lat , b.getNorthEast().lng, b.getNorthEast().lat]; |
|
|
|
//表示されている範囲をhexで埋める |
|
var grid = turf.hexGrid(extend, 1, 'kilometers'); |
|
|
|
//squareデータに統計情報を付加(今回はマーカーの数のみ) |
|
var grid = turf.aggregate(grid, points, aggregations); |
|
|
|
//各セルのスタイルを設定 |
|
grid.features.forEach(setStyle); |
|
|
|
//hexグリッドを地図に追加 |
|
hexLayer.addData(grid); |
|
|
|
//統計情報に合わせてhexグリッドのスタイルを調整 |
|
hexLayer.eachLayer(function(l) { |
|
l.setStyle(l.feature.properties.withSum); |
|
}); |
|
|
|
//凡例の追加 |
|
var legend = L.control({position: 'bottomright'}); |
|
legend.onAdd = function (map) { |
|
|
|
var div = L.DomUtil.create('div', 'info legend'), |
|
grades = [0, 2, 4, 6, 8, 10], |
|
labels = []; |
|
|
|
for (var i = 0; i < grades.length; i++) { |
|
div.innerHTML += |
|
'<i style="background:#FF0000; opacity:' + getOpacity(grades[i] + 1) + ';"></i> ' + |
|
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+'); |
|
} |
|
return div; |
|
}; |
|
legend.addTo(map); |
|
|
|
}); |
|
|
|
//各セルのスタイルを指定 |
|
function setStyle(cell){ |
|
cell.properties.withSum= {}; |
|
|
|
var pt_count = cell.properties.pt_count; |
|
|
|
var _withSum = {}; |
|
_withSum.color = '#FF0000'; |
|
_withSum.weight = 0; |
|
_withSum.fill = '#FF0000'; |
|
_withSum.fillOpacity = 0; |
|
_withSum.fillOpacity = getOpacity(pt_count); |
|
_withSum.weight = getStrokeWeight(pt_count); |
|
cell.properties.withSum = _withSum; |
|
} |
|
|
|
//各セルのopacityを指定 |
|
function getOpacity(value) { |
|
return value > 10 ? 0.9 : |
|
value > 8 ? 0.7 : |
|
value > 6 ? 0.5 : |
|
value > 4 ? 0.3 : |
|
value > 2 ? 0.1 : |
|
0; |
|
} |
|
|
|
//各セルのstrokeの太さを指定 |
|
function getStrokeWeight(value) { |
|
return value > 10 ? 4 : |
|
value > 8 ? 3 : |
|
value > 6 ? 2 : |
|
value > 4 ? 1 : |
|
value > 2 ? 0 : |
|
0; |
|
} |
|
</script> |
|
|
|
</html> |