世界の測量

Sibling of "Relevant, Timely, and Accurate, " but much lighter and shorter ※自らの所属する組織の見解を示すものでない

Leaflet の Marker Cluster で国土数値情報（漁港データ） on 電子国土

Leaflet の Marker Cluster が気になったので、試してみた。

情報源

Leaflet/Leaflet.markercluster · GitHub
特に、ここからリンクされているLeaflet debug pageを参考にした。

結果

Marker Cluster

結論

漁港データは2931ポイントあるそうだ。つまり、マーカークラスターの手法を用いれば、3000点くらいのデータであれば、ブラウザ上でクラスターにして表示しても十分快適であることが分かった。

方法

Leaflet debug pageの背景地図を電子国土のものに変更し、addressData を国土数値情報（漁港データ）のものに変更した。

国土数値情報（漁港データ）は、QGISでGeoJSONに変換し、次のRubyコードで、上記サンプル形式のJavaScriptコード（data.js）に変換した。

require 'json'

print "var data = [\n"
rs = []
JSON.parse(open('data.geojson').read)['features'].each {|f|
  rs << 
    (f["geometry"]["coordinates"].reverse << f["properties"]["C09_002"]).inspect
}
print rs.join(', ')
print "];\n"

$ ruby data.rb > data.js

コード

<!doctype html>
<html>
<head>
<title>Marker Cluster</title>
<meta charset='UTF-8'>
<link rel="stylesheet" 
  href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet"
  href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.ie.css" />
<![endif]-->
<style type="text/css">
body {padding:0; margin:0; font-family:Helvetica,Verdana,Arial,sans-serif;}
html, body, #map {height: 100%; width: 100%;}
</style>
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet-src.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="data.js"></script>
<script>
var map;
function run() {
map = new L.Map('map');

layers = [
  ['http://cyberjapandata.gsi.go.jp/sqras/all/GLMD/latest/', '.png'], // 0
  ['http://cyberjapandata.gsi.go.jp/sqras/all/GLMD/latest/', '.png'], // 1
  ['http://cyberjapandata.gsi.go.jp/sqras/all/GLMD/latest/', '.png'], // 2
  ['http://cyberjapandata.gsi.go.jp/sqras/all/GLMD/latest/', '.png'], // 3
  ['http://cyberjapandata.gsi.go.jp/sqras/all/GLMD/latest/', '.png'], // 4
  ['http://cyberjapandata.gsi.go.jp/sqras/all/JAIS/latest/', '.png'], // 5
  ['http://cyberjapandata.gsi.go.jp/sqras/all/JAIS/latest/', '.png'], // 6
  ['http://cyberjapandata.gsi.go.jp/sqras/all/JAIS/latest/', '.png'], // 7
  ['http://cyberjapandata.gsi.go.jp/sqras/all/JAIS/latest/', '.png'], // 8
  ['http://cyberjapandata.gsi.go.jp/sqras/all/BAFD1000K/latest/', '.png'], // 9
  ['http://cyberjapandata.gsi.go.jp/sqras/all/BAFD1000K/latest/', '.png'], // 10
  ['http://cyberjapandata.gsi.go.jp/sqras/all/BAFD1000K/latest/', '.png'], // 11
  ['http://cyberjapandata.gsi.go.jp/sqras/all/BAFD200K/latest/', '.png'], // 12
  ['http://cyberjapandata.gsi.go.jp/sqras/all/BAFD200K/latest/', '.png'], // 13
  ['http://cyberjapandata.gsi.go.jp/sqras/all/BAFD200K/latest/', '.png'], // 14
  ['http://cyberjapandata.gsi.go.jp/sqras/all/DJBMM/latest/', '.png'], // 15
  ['http://cyberjapandata.gsi.go.jp/sqras/all/DJBMM/latest/', '.png'], // 16
  ['http://cyberjapandata.gsi.go.jp/sqras/all/DJBMM/latest/', '.png'], // 17
  ['http://cyberjapandata.gsi.go.jp/sqras/all/FGD/latest/', '.png'] // 18
];

var layer = new L.TileLayer('nil', {minZoom: 0, maxZoom: 18, attribution: '電子国土'});
layer.getTileUrl = function(coord) {
  var tid = ('0000000' + coord.x).slice(-7) + ('0000000' + coord.y).slice(-7);
  return layers[coord.z][0] + coord.z + '/' + tid.charAt(0) + tid.charAt(7) + '/' + tid.charAt(1) + tid.charAt(8) + '/' + tid.charAt(2) + tid.charAt(9) + '/' + tid.charAt(3) + tid.charAt(10) + '/' + tid.charAt(4) + tid.charAt(11) + '/' + tid.charAt(5) + tid.charAt(12) + '/' + tid + layers[coord.z][1];
}

map.setView(new L.LatLng(35, 135), 4).addLayer(layer);

var markers = L.markerClusterGroup({attribution: "国土数値情報（漁港データ）　国土交通省"});
		
for (var i = 0; i < data.length; i++) {
 var a = data[i];
 var title = a[2];
 var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
 marker.bindPopup(title);
 markers.addLayer(marker);
}
map.attributionControl.addAttribution('国土数値情報（漁港データ）　国土交通省');
map.addLayer(markers);
}
</script>
</head>
<body onload='run();'>
<div id="map"></div>
</body>
</html>