Comments (3)
このような記事を公開している者です。
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.
コメントありがとうございます。
読み込んでいたpbfが別物(フォントデータ)だったのですね!
ブラウザのデベロッパーツール優先でスペックのタイルURLの仕様を見ていませんでした^^;
試してみましたところうまく読み込むことができました。
フォントデータのエンコードスキームは、このリポジトリのスコープ外だと思いますので、これでこのISSUEはcloseさせていただきます。
from gsimaps-vector-experiment.
ご参考までに、追伸です。
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.
Related Issues (20)
- feature.id がタイルにセットされていない HOT 1
- `ftCode` に関する記載の誤り HOT 2
- 道路の接合と道路凡例のコードについて HOT 2
- dataspec.pdf の機械可読形式データについて HOT 2
- MVT の layer name として ftCode を使用するのはどうか? HOT 3
- ベクトルタイル用の `mokuroku.csv.gz` は提供されていないのでしょうか? HOT 2
- mapbox, leafletへの依存を減らしたスタイリング HOT 3
- Source-layer symbolに含まれるgcpCodeFlagの意味について HOT 2
- 高DPI環境での画像出力について HOT 2
- style.jsonでのレイヤーのfilterの決定基準について HOT 2
- dataspecに一部のデータが含まれていない HOT 1
- data/std.json 高速道路番号のtext-fieldが"nRno"になっている HOT 2
- 道路のftCode HOT 2
- waterareaのダブリについて HOT 5
- 地図内容について HOT 2
- 路線コード駅コードについて HOT 4
- 地物の属性一覧ドキュメントの誤り HOT 2
- 縦書きテキストのためのスタイル指定 HOT 1
- 道路のstring_valueが文字化け? HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gsimaps-vector-experiment.