人口集中地区(DID)地図を作成しました

人口集中地区について

人口集中地区とは、国勢調査の統計データに基づいて定められています。

原則下記の条件を満たすエリアになります。

1. 1平方キロメートル当たり4,000人以上の基本単位区等が市区町村の境域内で互いに隣接する。
2. 隣接した地域の人口が国勢調査時に5,000人以上を有する。

国土交通省 航空局の「無人航空機（ドローン、ラジコン機等）び安全な飛行のためのガイドライン」 には
下記A～Cの場所を飛行の禁止空域としています。

• （Ａ）地表又は水面から 150m 以上の高さの空域
• （Ｂ）空港周辺の空域
• （Ｃ）人口集中地区の上空

そのため、（Ｃ）の人口集中地区はドローン飛行の場合に重要な参考要素になります。

人口集中地区をweb上で簡単に確認できる人口集中地区(DID)地図サイトを構築しました。

データの前処理

メタデータは国土数値情報　人口集中地区データです。

ダウンロードされるGeoJSONファイルは50Mぐらいです。webで直転送にはロード時間が長くなる。

そこで、geobufによるProtocol Buffersファイルへの圧縮を行います。
結果 5Mぐらいまで圧縮されました。
普通のzip圧縮は10Mぐらいでしたので、なかなかいい圧縮率です。

コードを貼ります。

var fs        = require('fs');
var geobuf    = require('geobuf');
var Pbf       = require('pbf');


var txt = fs.readFileSync('./data/A16-15_00_DID.geojson', 'utf8');
var geojson = JSON.parse(txt);

var pbf = geobuf.encode(geojson, new Pbf());

var buff = Buffer.allocUnsafe ? Buffer.from(pbf) : new Buffer(pbf);

fs.writeFileSync('./data/did.pbf', buff);

leaflet によるの描画

データを準備できたら、描画は簡単です。
leafletはGeoJSONをnativeでサポートしています。

pbfを展開してL.geoJSONでレイヤを追加するだけです。

コードの抜粋を貼ります。

//データ取得と展開
var loadGeobuf = function(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url, true);
	xhr.responseType = "arraybuffer";
	xhr.onload = function(oEvent) {
		var pbf = new Pbf(new Uint8Array(xhr.response));
		var geo = geobuf.decode(pbf);
		callback(geo);
	};
	xhr.send();
};

//描画の部分
loadGeobuf('data/did.pbf', function(geojson){
	L.geoJSON(geojson, {
		smoothFactor: 1.2,
		noClip: true,
		weight: 1
	}).bindPopup(function (layer) {
		var props = layer.feature.properties;
		var html  = [
		'<table>',
			'<tr><td>人口: </td><td>' + props['人口'] + '</td></tr>',
			'<tr><td>人口割合: </td><td>' + props['人口割合'] + '</td></tr>',
			'<tr><td>面積: </td><td>' + props['面積'] + '</td></tr>',
			'<tr><td>面積割合: </td><td>' + props['面積割合'] + '</td></tr>',
			'<tr><td>市町村名称: </td><td>' + props['市町村名称'] + '</td></tr>',
			'<tr><td>調査年度: </td><td>' + props['調査年度'] + '</td></tr>',
		'</table>'
		];
		return html.join('\n');
	}).addTo(map);
});

詳細は人口集中地区(DID)地図にアクセスしてコードを見てください。
とてもシンプルです。

感想

• GISのデータは巨大なデータが多いがある程度小さいデータであればgeobufで十分対応できます。

• データが大きい場合、静止画のタイルに落とすか、vextor tile にして描画する工夫が必要です。

• leafletの数の少ないGeoJSONを非常にシンプルに描画できます。個人の間隔としては、polygonの場合数千件
  が限界と思います。それ超えると描画が遅くなり、ブラウザが固まることがあります。

• 基本的にSVGよりCanvasで描画したほうが速いような気がする。