Mapbox 入門日記（３）基本概念

Mapbox基本概念

Mapboxでは、Layer(StyleLayer)とSourceはとても重要な部分になります。

Layer(StyleLayer)

mapboxの描画方法になります。
現時点下記
circle,
heatmap,
hillshade,
fill,
fill-extrusion,
line,
symbol,
background,
raster,
custom
10種類あります。

それぞれStyleLayerを継承し、定義されています。

Source

layerを描画する時に使われるデータです。
vector,
raster,
raster-dem,
geojson,
video,
image,
canvas
7種類あります。

SourceCacheはSourceのコンテナーであり、Sourceをタイル形式に変換し、そのタイルをCacheします。

Bucket

BucketはSourceがタイルに分割されたgeoデータをGLのvertexとして使えるBufferなどに変換し、キープしています。

GLSL

実際webglで描画に使うShaderスクリプト。

Draw

具体的に描画コードの入口はpainter.jsファイルの下記の部分です。

painter.js

renderLayer(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<OverscaledTileID>) {
    if (layer.isHidden(this.transform.zoom)) return;
    if (layer.type !== 'background' && layer.type !== 'custom' && !coords.length) return;
    this.id = layer.id;

    draw[layer.type](painter, sourceCache, layer, coords, this.style.placement.variableOffsets);
}

まとめ

MapboxはEvent Drivenの形で、データ処理、描画しています。
最新のjavascript, webGL, webWorker, GISの技術を多用しています。
そのため、完全に理解するには多少時間がかかります。
今後できるだけ詳しく書いて行きたいと思います。