1つの多角形を描く
多角形(’Polygon')は'coordinates'を多角形の頂点の3次元配列で与え、始点と終点で同じ座標とする。レイアウトの'type'は'fill'。
以下の例では、ベクトルタイルの地理院地図上に3つの頂点を持つ三角形を描いている。'paint'で外枠の線を青、塗りつぶしの色を緑、塗りつぶしの不透明度を0.4としている。
|
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 42 |
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つのPolygonを描く map.addSource('source_polygon', { type: 'geojson', data: { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [139.747, 35.682], [139.742, 35.672], [139.752, 35.672], [139.747, 35.682], ] ] }, } }); // Polygonのスタイルを設定 map.addLayer({ 'id': 'layer_polygon', 'type': 'fill', 'source': 'source_polygon', 'layout': {}, 'paint': { 'fill-outline-color': '#0000FF', 'fill-color': '#00FF00', 'fill-opacity': 0.4, } }); }); |
dataで直接Polygonを指定できる。
|
1 2 3 4 5 6 7 8 9 10 11 |
data: { 'type': 'Polygon', 'coordinates': [ [ [139.747, 35.682], [139.742, 35.672], [139.752, 35.672], [139.747, 35.682], ] ] } |
複数の多角形を描く
以下の例ではaddSourceで2つのPolygonを描いている。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 32 33 34 35 36 37 |
// 複数のPolygonを描く map.addSource('source_polygon', { type: 'geojson', data: { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [139.747, 35.682], [139.742, 35.672], [139.752, 35.672], [139.747, 35.682], ] ] }, }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [139.742, 35.677], [139.752, 35.677], [139.747, 35.667], [139.742, 35.677], ] ] } } ] } }); |
'FeatureCollection'の代わりに直接'MultiPolygon'で書くと以下の通り。Polygonの場合は頂点の経緯度配列の3次元配列だったが、MultiPolygonの場合はさらにそれらの配列、4次元配列になる。
これは折れ線の時と比べるとおかしく思えるが、後述のように1つの図形で複数の閉曲線を持つ場合があるためと考えられる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
data: { 'type': 'MultiPolygon', 'coordinates': [ [[ [139.747, 35.682], [139.742, 35.672], [139.752, 35.672], [139.747, 35.682], ]], [[ [139.742, 35.677], [139.752, 35.677], [139.747, 35.667], [139.742, 35.677], ]] ] } |
捩じれたポリゴンは描けない
以下のように捩じれたポリゴンは描かれない。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Zig-zag map.addSource('source_polygon', { type: 'geojson', data: { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [139.747, 35.682], [139.752, 35.682], [139.747, 35.677], [139.752, 35.677], [139.747, 35.682], ] ] }, } }); |
ドーナッツは描ける
1つのフィーチャーで外側のポリゴンに内側のポリゴンが収まっていれば、描画方向に関わらずドーナッツのようなポリゴンになる。ただしドーナッツの穴の中にポリゴンを置くとうまく描かれない。
|
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 |
// Doughnut map.addSource('source_polygon', { type: 'geojson', data: { 'type': 'Polygon', 'coordinates': [ [ [139.742, 35.682], [139.752, 35.682], [139.752, 35.672], [139.742, 35.672], [139.742, 35.682], ], [ [139.743, 35.681], [139.751, 35.681], [139.751, 35.678], [139.743, 35.678], [139.743, 35.681], ], [ [139.751, 35.673], [139.743, 35.673], [139.743, 35.676], [139.751, 35.676], [139.751, 35.673], ], ] } }); |