1. wakufactory

    Posted

    wakufactory
Changes in title
+地理院地図Vectorデータをブラウザで読む
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,270 @@
+# 地理院地図Vectorのベクトルタイルデータ
+
+国土地理院から地理院地図のベクトルバージョンが試験公開されました。
+https://github.com/gsi-cyberjapan/gsimaps-vector-experiment
+
+地理院地図の基本図と同じ内容がベクトルデータとして取得できることで、好きな情報を好きなスタイルで表現した地図を作ることができます。2019年7月の段階では、関東の一部地域のみですが、地域が拡大されることを期待したいです。
+
+画像のタイルデータと同じ方法でタイル単位のベクトルデータがオンラインで提供されるもので、ベクトルデータの形式は、Mapboxのベクトルタイルに従っているようです。
+
+Mapboxを利用して表示等を行う場合は、内部のデータ構造について理解する必要は無いと思いますが、ここでは独自にタイルデータを取得して利用する方法について解説します。
+
+## Mapboxのベクトルタイルデータ
+
+Mapboxのベクトルタイルの仕様はこちらにあります。
+https://github.com/madefor/vector-tile-spec/blob/master/2.1/README.md
+
+これによると、データは Google Protocol Buffers で符号化されているとあります。
+まずこの仕様に従ってデコードする必要があります。
+
+### Google Protocol Buffers
+
+Protocol Buffersの仕様についてはこちら。
+https://developers.google.com/protocol-buffers/
+
+これは、Googleが策定した、構造化データをバイナリデータとして効率よく扱うためのものです。名前のついた型付のデータのグループ(message)を入れ子にして表現することができます。
+
+Protocol Buffersでは、スキーマの定義に従ってエンコード/デコードをします。スキーマ定義ファイルが、protoという拡張子になっています。
+
+Mapboxデータのスキーマ定義は、上記の仕様のところにある、vector_tile.proto というファイルです。
+
+```vector_tile.proto
+package vector_tile;
+
+option optimize_for = LITE_RUNTIME;
+
+message Tile {
+
+ // GeomType is described in section 4.3.4 of the specification
+ enum GeomType {
+ UNKNOWN = 0;
+ POINT = 1;
+ LINESTRING = 2;
+ POLYGON = 3;
+ }
+
+ // Variant type encoding
+ // The use of values is described in section 4.1 of the specification
+ message Value {
+ // Exactly one of these values must be present in a valid message
+ optional string string_value = 1;
+ optional float float_value = 2;
+ optional double double_value = 3;
+ optional int64 int_value = 4;
+ optional uint64 uint_value = 5;
+ optional sint64 sint_value = 6;
+ optional bool bool_value = 7;
+
+ extensions 8 to max;
+ }
+
+ // Features are described in section 4.2 of the specification
+ message Feature {
+ optional uint64 id = 1 [ default = 0 ];
+
+ // Tags of this feature are encoded as repeated pairs of
+ // integers.
+ // A detailed description of tags is located in sections
+ // 4.2 and 4.4 of the specification
+ repeated uint32 tags = 2 [ packed = true ];
+
+ // The type of geometry stored in this feature.
+ optional GeomType type = 3 [ default = UNKNOWN ];
+
+ // Contains a stream of commands and parameters (vertices).
+ // A detailed description on geometry encoding is located in
+ // section 4.3 of the specification.
+ repeated uint32 geometry = 4 [ packed = true ];
+ }
+
+ // Layers are described in section 4.1 of the specification
+ message Layer {
+ // Any compliant implementation must first read the version
+ // number encoded in this message and choose the correct
+ // implementation for this version number before proceeding to
+ // decode other parts of this message.
+ required uint32 version = 15 [ default = 1 ];
+
+ required string name = 1;
+
+ // The actual features in this tile.
+ repeated Feature features = 2;
+
+ // Dictionary encoding for keys
+ repeated string keys = 3;
+
+ // Dictionary encoding for values
+ repeated Value values = 4;
+
+ // Although this is an "optional" field it is required by the specification.
+ // See https://github.com/mapbox/vector-tile-spec/issues/47
+ optional uint32 extent = 5 [ default = 4096 ];
+
+ extensions 16 to max;
+ }
+
+ repeated Layer layers = 3;
+
+ extensions 16 to 8191;
+}
+
+```
+だいたい見れば自明だと思います。
+Tileというmessageは、複数のLayerから成っていて、Layerには、version,name,features,keys,valuesといった内容が含まれています。message Featureには、id,tags,type, geometry,extentが含まれます。後述しますが、このtypeとgeometryで実際のベクトルの座標データを表すことになります。
+
+
+### 地理院地図vectorのタイルデータを読む
+
+地理院地図vectorのタイルデータをこのMapboxのスキームに従って読み込めばいいことになります。流石にProtocol Buffersのデコードまで自前でやるのは車輪の再発明に過ぎるので、javascriptのライブラリを利用します。
+
+実装はいくつかあるようですが、これが使いやすそうだったのでこれでやってみます。
+https://github.com/protobufjs/protobuf.js#using-proto-files
+
+まず、タイルデータをバイナリデータとして取得するために、XMLHttpRequestで読み込む関数を用意しておきます。
+
+```javascript
+function load(path) {
+ return new Promise(function(resolve,reject){
+ var req = new XMLHttpRequest();
+ req.open("get",path,true) ;
+ req.responseType = "arraybuffer" ;
+ req.onload = () => {
+ if(req.status==200) {
+ resolve(req.response) ;
+ } else {
+ reject("file cannot load") ;
+ }
+ }
+ req.send() ;
+ })
+}
+```
+
+読み込んだデータをprotobuf.jsを使ってデコードします。
+とりあえずテストに固定のタイルパスを指定して読み込んでみます。
+
+```javascript
+
+const tilepath = "//cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/13/7273/3226.pbf"
+protobuf.load("vector_tile.proto", function(err, root) {
+ if (err)
+ throw err
+ const tile = root.lookupType("vector_tile.Tile")
+ load(tilepath).then(data => {
+ const buf = new Uint8Array(data)
+ const msg = tile.decode(buf)
+ console.log(tile.toObject(msg))
+ })
+})
+```
+
+まず、Mapboxのスキーマファイルを読み込むために protobuf.load を呼びます。コールバックの中で、lookupTypeでTileのスキーマを取り出しておきます。
+
+準備ができたら、タイルデータをload関数で読み込みます。
+
+protobufのデコーダは、Uint8Arrayを入力とするので、読み込んだデータをUint8Arrayにして、tile.decodeでデコードします。デコードしたものを、toObjectメソッドでjavascriptのオブジェクトに変換することができます。
+
+取得したオブジェクトをconsoleにダンプした結果が以下のようになりました。
+<img width="646" alt="layer.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74838/87c76490-e8d7-063a-0b70-d3a5786fdfee.png">
+
+layer.nameを見ればどの情報のレイヤであるかはすぐわかりますね。
+
+## タイルデータの解釈と描画
+
+必要なLayerから属性値と座標データを取り出せばいいわけですが、これらのデータの持ち方も独特になっています。
+
+### 属性値
+
+まずLayerの中の個々の地物であるfeaturesは、属性値を持っていますが、そのkey-value値がそれぞれLayerの中に配列としてまとめられて、各featureはそのインデックスを参照する、という構造になっています。こうすることで、属性のkeyやvalueの共通するものが1つにまとめられ、データサイズの効率が良くなっています。
+layer.keysが属性値のキーの配列、layer.valuesが値の配列で、feature.tagがkeyとvalueのインデックス2つの整数を単位とする配列になっています。
+
+各々の属性値の意味については、地理院vectorの仕様書の「属性等の仕様詳細」を参照してください。
+
+### 描画コマンド
+
+feature.geometoryが実際に描画されるベクトルデータです。moveToやlineToなどのコマンドと繰り返し回数、それに続く座標値が、整数の配列としてシリアライズされています。この辺りの詳細は、Mapboxのデータの仕様を参照してください。
+
+独特なのが数値の表現で、符号付整数の符号が最下位ビットに来るようになっています。これによって絶対値の小さな値の上位ビットが0になることで、圧縮効率が上がることを期待してると思われます。
+この数値データをデコードするのは次のようなコードになります。
+
+```javascript
+function decodeint(value) {
+ return (value >> 1) ^ (-(value & 1))
+}
+```
+
+描画コマンドの座標値は各タイルの左上を原点として、右下は、layer.extentの値で規定されます。地理院タイルでは4096になっているので、1つのタイルあたりのベクトル分解能は縦横4096ということになります。
+
+
+## 描画サンプル
+
+以上を踏まえて、1つのlayerの線分をcanvasに描画するサンプルです。"road"の道路レイヤー専用で汎用にはなっていません。
+
+属性rnkWidthに道路の幅が入っているので、これを使って描画する線幅lineWidthを決めています。
+
+```javascript
+function draw(layer) {
+ const ext = layer.extent
+ const can = document.getElementById("target")
+ const ctx = can.getContext("2d")
+ ctx.fillStyle = "rgb(250,250,250)"
+ ctx.fillRect(0,0,can.width,can.height)
+ ctx.lineWidth = 1
+ ctx.strokeStyle = "black"
+ let lc = 0 ;
+ const wx = can.width/ext, wy = can.height/ext // axis scale
+ for(let i in layer.features) {
+ //decode tags
+ let tags = layer.features[i].tags
+ let attr = {}
+ for(let i=0;i<tags.length;i+=2) {
+ attr[layer.keys[tags[i]]] = layer.values[tags[i+1]]
+ }
+
+ //decode geometory
+ let geo = layer.features[i].geometry
+ let gi = 0
+ let cx = 0
+ let cy = 0
+ ctx.lineWidth = attr.rnkWidth.intValue + 1
+ ctx.beginPath()
+ while( gi < geo.length) {
+ let c = geo[gi++]
+ let cmd = c & 7 //command
+ let count = c >> 3 //count
+ switch(cmd) {
+ case 1://moveto
+ cx = decodeint(geo[gi])
+ cy = decodeint(geo[gi+1])
+ ctx.moveTo(cx*wx,cy*wy)
+ gi += count*2
+ break
+ case 2://liento
+ for(let i=0;i<count;i++) {
+ cx += decodeint(geo[gi++])
+ cy += decodeint(geo[gi++])
+ ctx.lineTo(cx*wx,cy*wy)
+ lc++
+ }
+ break
+ case 3://close
+ break
+ }
+ }
+ ctx.stroke()
+ }
+}
+```
+これで描画したものと、地理院地図の画像タイルデータを並べて出してみるとこんな感じになります。
+
+<img width="836" alt="maps.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74838/c07b3d13-0b67-81a6-12db-a5ffe03778f9.png">
+
+この例では、単一の線の幅を変えただけですが、地理院地図では、太い道路は輪郭のラインと中の塗りつぶしラインの2つのラインを描画する、といったことをしています。
+
+地理院地図の画像タイルとベクトルデータの情報内容は、ベクトルデータの方がzoom値で1段階詳細になっています。上の図は、zoom14の画像タイル4枚分(512x512px)と、zoom13のベクトルデータを並べています。
+
+実際に動くページはこちらで見られます。
+https://wakufactory.jp/map/gsivec/test0.html
+
+
+