## 国連と始めるベクトルタイル ### 河川・流域データ編 #### FOSS4G 2019 Niigata ハンズオン #### 株式会社マップル・オン 柴本歩 当スライドのURL http://bit.ly/2kwjUqU --- ## 河川・流域データとは 国土交通省が公開している[国土数値情報](http://nlftp.mlit.go.jp/ksj/)のひとつ * 河川 - 流路の中心線(LINE)と分合流点(POINT) * 流域 - 100mメッシュの<span style="color:red">正方ポリゴン群</span> --- そのままでは使いにくいのでハンズオン教材として加工済みのものを使用します。 --- ## 完成像 <iframe width = 100% height=500 src="https://d17fk1omfyl6zm.cloudfront.net/"></iframe> --- ## 新しい unvt/rasv コンテナ上でやります **Ctrl-p Ctrl-q**で今のコンテナを抜けてください <span style="color:red">注意: exitで抜けるとコンテナが初期化されます</span> ポート番号を変えて、ホスト側のディレクトリがコンテナ内にマウントされるように、docker run ```shell docker run -ti --rm -p 3001:3000 -p 8889:8888 \ -v <DLファイルが置いてあるdir>:/media \ unvt/ango ``` --- ### foss4g-2019-niigata-handson.tar.xz をDL済の方 アーカイブ展開 ```shell tar -Jxf /media/foss4g-2019-niigata-handson.tar.xz cd foss4g-2019-niigata-handson ``` --- ### DLしてない方 コンテナ内から直接下記を実行 ```shell # DL 120MBあります curl -L -o foss4g-2019-niigata-handson.tar.xz https://www.dropbox.com/s/8kbl7dxq6lld13b/foss4g-2019-niigata-handson.tar.xz?dl=1 # アーカイブ展開 tar -Jxf foss4g-2019-niigata-handson.tar.xz cd foss4g-2019-niigata-handson ``` --- ### UNVTツールキット<br>modify.js に相当する工程 ```shell ogr2ogr mainstream.geojsons mainstream.csv -dialect SQLite -sql @modify-mainstream.sql -oo KEEP_GEOM_COLUMNS=NO -oo EMPTY_STRING_AS_NULL=YES ogr2ogr stream.geojsons stream.csv -dialect SQLite -sql @modify-stream.sql -oo KEEP_GEOM_COLUMNS=NO -oo EMPTY_STRING_AS_NULL=YES ogr2ogr watersystem.geojsons watersystem.csv -dialect SQLite -sql @modify-watersystem.sql -oo KEEP_GEOM_COLUMNS=NO -oo EMPTY_STRING_AS_NULL=YES ogr2ogr unitvalley.geojsons unitvalley.csv -dialect SQLite -sql @modify-unitvalley.sql -oo KEEP_GEOM_COLUMNS=NO -oo EMPTY_STRING_AS_NULL=YES ``` 柴本式ではnode.jsではなくogr2ogr内でSQLを使います。これをmodify.sqlと呼ぶことにします。 --- ### UNVTツールキット<br>TippecanoeでMVT化 ```shell # まずは大縮尺の分 tippecanoe -P -z 10 -Z 10 -d 22 -o river-L.mbtiles \ -L stream:stream.geojsons \ -L unitvalley:unitvalley.geojsons # 次に小縮尺の分 tippecanoe -P -z 9 -Z 5 -o river-S.mbtiles \ -L mainstream:mainstream.geojsons \ -L watersystem:watersystem.geojsons # 2つのmbtilesを統合 tile-join -o river.mbtiles river-L.mbtiles river-S.mbtiles ``` 成果物は river.mbtiles --- ### ホスティングの準備 ```shell # スタイルJSONとindex.htmlを環境に合わせる sed river-style.json -i -e "s#https://d17fk1omfyl6zm.cloudfront.net/glyphs/{fontstack}/{range}.pbf#http://localhost:3001/fonts/{fontstack}/{range}.pbf#" sed river-style.json -i -e "s#https://d17fk1omfyl6zm.cloudfront.net/river-mvt/{z}/{x}/{y}.pbf#http://localhost:3001/zxy/{z}/{x}/{y}.pbf#" sed river-style.json -i -e 's/"sans"/"NotoSansCJKjp-Regular"/g' sed index.html -i -e "s#https://unpkg.com/mapbox-gl@latest/dist/mapbox-gl.js#mapbox-gl.js#" sed index.html -i -e "s#https://unpkg.com/mapbox-gl@latest/dist/mapbox-gl.css#mapbox-gl.css#" sed index.html -i -e 's/"sans"/"NotoSansCJKjp-Regular"/g' ``` --- ### ango-hostに間借り ```shell cd ~/ango-host yarn cp -f ~/foss4g-2019-niigata-handson/index.html htdocs cp -f ~/foss4g-2019-niigata-handson/river-style.json htdocs cp -f ~/foss4g-2019-niigata-handson/river.mbtiles ~/ango-produce/tiles.mbtiles ``` サーバー起動 ```shell rake start ``` --- ### Webブラウザで表示 http://localhost:3001/