OL3で扱える地図タイルをShapeから生成する

OpenLayers3で扱える地図タイルを国土交通省 国土数値情報(行政区域)から生成する方法のメモ。
この方法で出力すればOpenLayers3以外(Leafletなど)でも利用可能です。

使用するのは

• TileMill  https://www.mapbox.com/tilemill/
• mb-util  https://github.com/mapbox/mbutil

1. Shapefileからmbtilesを生成する

LearnOSMに詳しい手順が載っているので、おおまかな手順だけ。

1. TileMillを起動し、New projectから新しいプロジェクトを作成する
2. 適当なFilenameを入力し、Image formatを選択し、Addをクリック
この時、デフォルトの世界地図を利用しない(読み込むShapefile以外必要ない)場合は、Default dataのチェックを外す
3. Editor画面になったら、左下のLayersからAdd layerをクリック
4. Datasourceで読み込みたいShapefileを選択し、Save & Styleをクリック
5. Layerが追加されるので、適宜デザインを調整する(デザインはCartoCSSで記述可能)
6. 右上のExportからMBTilesを選択する
7. 書き出す範囲やズームレベルを以下のような形で選択し、Export

おおまかな容量がZoomの下に表示されるので、参考程度に。
(100GB+とかの場合、出力に結構な時間を要する＆ファイルサイズが大きくなるので注意)

2. mbtilesから地図タイルを生成する

今回はTileMillで出力したjapan.mbtilesからjapan/tiles下に"Z/X/Y.png"の形で出力した。

git clone git://github.com/mapbox/mbutil.git
cd mbutil
python setup.py install
mb-util japan.mbtiles japan/tiles

tilesディレクト下の構造を保ったまま、適宜設置する。

3. OL3で開く

ol.min.jsなどを呼び出してあげてから、以下のような感じで。

var map = new ol.Map({
    target: 'map',
    renderer: 'canvas',
    layers: [
        new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: '/tiles/{z}/{x}/{y}.png'
          })
        }),
        new ol.layer.Tile({
          source: new ol.source.TileWMS({
            attributions: [new ol.Attribution({
              html: "地図データ © 国土交通省 国土数値情報(行政区域)"
            })]
          })
        })
    ],
    view: new ol.View({
        //中心座標(仮指定)
        center: ol.proj.transform([134.15, 35.27], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});

(OpenLayers 3.11.2で動作確認済み)

WGS84あたりに測地系を揃えてあげれば、QGISなどで作ったShapefileも同じ手法で地図タイルにできるので、色々なデータをOL3で見ると面白い(かも)