0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ベクトルタイルAdvent Calendar 2017

Day 13

Tangram で重ね合わせを行うには

Last updated at Posted at 2017-12-12

Mapzen, Tangram, Tilezen

ニューヨークを本拠にする Mapzen さんは、Leaflet でバイナリベクトルタイルを読むためのソフトウェアである Tangram の提供者として有名です。Tangram は表示の設定を scene.yaml という YAML ファイルで行い、柔軟な設定を心地よいコードで行える特徴があります。Mapzen さんはソフトウェアの提供だけではなく、タイルの提供も行っており、(ベクトル)タイル提供のためのソフトウェアの一群を Tilezenで提供しています。

Tangram でベクトルを重ねるなら z-index を 500 よりも上に

Tangram を使って地図を表示し、地図の上に GeoJSON や CenterCross を載せようとしたときに、載せたはずのデータがうまく表示されないということはないでしょうか。その場合には、z-index を 500 よりも上に上げれば大丈夫なのです。ちょうど [ここで z-index: 1000 としている]ように、CSS レベルで z-index を思い切り大きくしてください。そうすることで、ベクトルタイルの地図の上にあなたのデータが無事に表示されます。

client side order range

この、z-index は、どのように設計されているのでしょうか。それは、gh:tilezen/vector-datasource で client side order range として次のように定義されています。

z-index 利用法
0-9 under everything
190-199 under water (landuse)
290-299 under roads = classic underlay
490-499 over all line and polygon features = classic raster map overlay

基本地図のベクトルタイルのために、これだけのレイヤ数を予約してあるというのは、興味深いですね。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?