国土地理院ベクト

このような記事を公開している者です。 <a href="https://qiita.com/frogcat/items/d3d5efa0de299ef509f5"

ご参考までに、追伸です。 leafletと独立した状態でgeojsonをwebAppsで取得するには、<a class="user-me

pbfデータのmapbox leaflet独立な読み込み方法の開示について about gsimaps-vector-experiment HOT 3 CLOSED

satakagi commented on July 24, 2024

pbfデータのmapbox leaflet独立な読み込み方法の開示について

from gsimaps-vector-experiment.

Comments (3)

frogcat commented on July 24, 2024 1

このような記事を公開している者です。
Leaflet でバイナリベクトルタイル処理の流れを追ってみる

興味があったので手順を再現してみたところ、（以下のように修正が必要でしたが） console に正常出力を確認できました。

<html>
<script src="https://unpkg.com/[email protected]/dist/pbf.js"></script>
<script src="./mapbox_vector_tile.js"></script>

<script>
onload=async function(){
	var data = await getPbf();
	console.log(data); // 空のデータとなる
}
async function getPbf(){

	// var url ="33024-33279.pbf";
  var url ="https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/7/112/50.pbf";
	let response = await fetch(url);
	if (response.ok) {
		var bufferRes = await response.arrayBuffer(); // arrauBufferは作られている
		pbf = new Pbf(new Uint8Array(bufferRes));
		var obj = Tile.read(pbf);
		return obj;
	} else {
		console.error("error:", response.status);
	}
};
</script>
<body>

</body>
</html>

例示されていた pbf は、ファイル名から類推すると以下のようなフォントのための pbf ではなかったでしょうか？
https://maps.gsi.go.jp/xyz/noto-jp/NotoSansCJKjp-Regular/33024-33279.pbf
これは mapbox vector tile の spec とはことなるスキームでエンコードされていますので、 vector_tile.proto でのデコードは失敗すると思われます。

上の例は pbf の取得先を https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf に従った適当なバイナリベクトルタイルの URL に変更してみたものです。この場合は Tile.read によるデコードが正常に動作しました。

from gsimaps-vector-experiment.

satakagi commented on July 24, 2024

コメントありがとうございます。
読み込んでいたpbfが別物（フォントデータ）だったのですね！
ブラウザのデベロッパーツール優先でスペックのタイルURLの仕様を見ていませんでした^^;

試してみましたところうまく読み込むことができました。

フォントデータのエンコードスキームは、このリポジトリのスコープ外だと思いますので、これでこのISSUEはcloseさせていただきます。

from gsimaps-vector-experiment.

satakagi commented on July 24, 2024

ご参考までに、追伸です。

leafletと独立した状態でgeojsonをwebAppsで取得するには、@frogcatさんの情報を参考にして以下のようなコードで取得することができました。

雑ですが、

var VectorTile = require('./vectortile');
window.VectorTile = VectorTile;
console.log("window.VectorTile:",window.VectorTile);

このようなmapbox_vector_tile_w.js を用意したうえで、

https://github.com/mapbox/vector-tile-js
と
https://github.com/mapbox/point-geometry
を参照してbrowserify でライブラリを作り、

browserify mapbox_vector_tile_w.js -o mbvt.js

これを用いて

<html>
<script src="https://unpkg.com/[email protected]/dist/pbf.js"></script>
<script src="./mbvt.js"></script>
<script>
onload=async function(){
	var data = await getPbf();
	var geoData = data;
	var gj = geoData.layers.railway.feature(0).toGeoJSON(112,50,7); // geoGeojson(x,y,z)の数値はタイルのxyzのことです
	console.log("geojson:",gj);
}

async function getPbf(){
	console.log("caled getPbf");
	var url ="https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/7/112/50.pbf"; // z,x,y
	//var url ="33024-33279.pbf"; // そもそもこのファイルが地図データではなくフォントデータでした
	let response = await fetch(url);
	if (response.ok) {
		var bufferRes = await response.arrayBuffer();
		var pbf = new Pbf(new Uint8Array(bufferRes));
		var obj = new VectorTile(pbf);
		return obj;
	} else {
		console.error("error:", response.status);
	}
};
</script>
</html>

from gsimaps-vector-experiment.

pbfデータのmapbox leaflet独立な読み込み方法の開示について about gsimaps-vector-experiment HOT 3 CLOSED

Comments (3)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent