Mapbox 勉強日記(2)使い方

Mapbox 勉強日記(2)使い方

Mapboxは基本Style, Source, Layerを設定しながら使います。

Mapboxを使うにはまずmapboxgl.Mapのインスタンスを作成します。
この時、いろいろと設定出来ます。

その中styleの設定がとりわけ重要になります。

下記の図のように、styleにはsourceとlayersの設定が含まれます。

sourceは地図で使うリソースを記入します。geojson, 画像tile, vector tileなどなど。
layersにはsourceを使った描画方法を記入します。backgroundなど、sourceを使わないレイヤも
ありますが、基本sourceに登録された、データを
circle,
heatmap,
hillshade,
fill,
fill-extrusion,
line,
symbol,
background,
raster,
custom
のいずれかの方法で描画することを設定します。

具体的には下記のサンプルを参照してください。

トークン無しで使えるMapboxデモ。

当サイトでは以前Mapboxを利用にはTokenが必須と書きましたが
厳密にはmapbox APIを利用するならTokenが必須であり、mapbox-gl-jsを使うだけであれば、
Token無しでできます。

そのため、今回はトークン無しmapbox-gl-jsを使えるデモを作成します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var map = new mapboxgl.Map({
container: 'map',
zoom: 10,
center: [139.767125, 35.681236],
style: {
"version": 8,
"sources": {
"tilemap": {
"type": "raster",
"tiles": ["https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"],
"tileSize": 256,
}
},
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "rgb(125,125,125)"
}
}, {
"id": "tilemap",
"type": "raster",
"source": "tilemap",
"minzoom": 0,
"maxzoom": 18
}]
},
});

デモサイトはこちらです。

トークン無しで使えるMapboxデモ

もちろんmapbox-gl-jsでは、map.addLayerとmap.addSourceの動的に追加する方法も用意されています。

必要に応じて使えます。