1つの折れ線を描く
折れ線(LineString)は'coordinates'を折れ線の各点の2次元配列として与える。以下の例では、ベクトルタイルの地理院地図上に3つの点を結ぶ折れ線を描いている。レイアウトの'type'は'line'。線の色と太さは'paint'で設定し、'layout'では線の端部を丸く、折れ線の角を尖らせている。
|
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 29 30 31 32 33 34 35 36 37 38 39 40 41 |
let map = new maplibregl.Map({ container: 'map', style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json', center: [139.747, 35.677], zoom: 14, minZoom: 4, maxZoom: 17, }); map.on('load', () => { // 1つのLineStringを描く map.addSource('source_line_string', { type: 'geojson', data: { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [ [139.747, 35.682], [139.742, 35.672], [139.752, 35.672], ] }, } }); // LineStringのスタイルを設定 map.addLayer({ 'id': 'layer_line_string', 'type': 'line', 'source': 'source_line_string', 'layout': { 'line-cap': 'round', 'line-join': 'miter' }, 'paint': { 'line-color': '#0000FF', 'line-width': 10 } }); }); |
dataで直接'LineString'を指定できる。
|
1 2 3 4 5 6 7 8 |
data: { 'type': 'LineString', 'coordinates': [ [139.747, 35.682], [139.742, 35.672], [139.752, 35.672], ] } |
複数の折れ線を描く
以下の例ではaddSourceで2つのLineStringを描いている。addLayoutは上と同じものを使っており、addSourceとaddLayerをmap.onメソッド内で実行させる。
|
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 29 30 31 |
// 複数のLineStringを描く map.addSource('source_line_string', { type: 'geojson', data: { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [ [139.747, 35.682], [139.742, 35.672], [139.752, 35.672], ] }, }, { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [ [139.742, 35.680], [139.752, 35.680], [139.747, 35.670], ] } } ] } }); |
'FeatureCollection'の代わりに直接'MultiLineString'で書くと以下の通り。LineStringの場合は通過点の経緯度の配列の2次元配列だったが、MultiLineStringの場合はさらにそれらの配列、3次元配列になっている。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
data: { 'type': 'MultiLineString', 'coordinates': [ [ [139.747, 35.682], [139.742, 35.672], [139.752, 35.672], ], [ [139.742, 35.680], [139.752, 35.680], [139.747, 35.670], ] ] } |