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

人口集中地区(DID)地図

人口集中地区について

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

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

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

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

  • (A)地表又は水面から 150m 以上の高さの空域
  • (B)空港周辺の空域
  • (C)人口集中地区の上空

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

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

データの前処理

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

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

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

コードを貼ります。

1
2
3
4
5
6
7
8
9
10
11
12
13
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でレイヤを追加するだけです。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//データ取得と展開
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で描画したほうが速いような気がする。