1つの点を描く
以下の例では、ベクトルタイルの地理院地図の中央に1つの点を描き、そのスタイルを半径20の青い丸と設定している。
|
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 |
let map = new maplibregl.Map({ container: 'map', // 地図を表示するコンテナーのIDを指定 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つのPointを描く map.addSource('source_point', { type: 'geojson', data: { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [139.747, 35.677], }, } }); // Pointのスタイルを半径20の青い丸とする map.addLayer({ 'id': 'layer_point', 'type': 'circle', 'source': 'source_point', 'layout': {}, 'paint': { 'circle-color': '#0000FF', 'circle-radius': 20 } }); }); |
dataで直接'Point'を指定できる。
|
1 2 3 4 |
data: { 'type': 'Point', 'coordinates': [139.747, 35.677], } |
複数の点を描く
以下の例ではdataの'type'を'FeatureCollection'として2つの点を描いている。点を青い丸で描くレイアウトは上と同じ。
|
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 |
map.on('load', () => { // 複数のPointを描く map.addSource('source_point', { type: 'geojson', data: { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [139.754, 35.684] }, }, { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [139.742, 35.672] } } ] } }); // Pointのスタイルを半径20の青い丸とする map.addLayer({ 'id': 'layer_point', 'type': 'circle', 'source': 'source_point', 'layout': {}, 'paint': { 'circle-color': '#0000FF', 'circle-radius': 20 } }); }); |
'FeatureCollection'の代わりに直接'MultiPoint'で描くと以下の通り。Pointのときは経度・緯度を要素とする配列だったが、MultiPointの場合はそれらの2次元配列になっている。
|
1 2 3 4 |
data: { 'type': 'MultiPoint', 'coordinates': [[139.754, 35.684], [139.742, 35.672]] } |