概要
地図上でマウスクリックしてaddSourceとaddLayerで表示した地物（Feature)を捕捉する。
FeatureCollectionの個々のFeatureに'properties'で属性を設定map.on('click', ...)でマウスクリックを捕捉- クリック位置で地物を表示したレイヤ上の地物があれば、その属性等をコンソールに表示
実装例
|
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<div id="map" style="width: 800px; height: 600px"></div> <script> let map = new maplibregl.Map({ container: 'map', style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json', center: [135.0, 35.0], zoom: 13, minZoom: 4, maxZoom: 17, }); map.on('load', () => { // 2つのPointを描く map.addSource('source_points', { type: 'geojson', data: { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [135.0, 35.0],}, 'properties': { 'id': 'point001', 'name': 'Bellybutton', } }, { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [134.99, 35.012],}, 'properties': { 'id': 'point002', 'name': 'Route 175', } }, ] } }); // Pointを描くレイヤーでスタイルを指定 map.addLayer({ 'id': 'layer_points', 'type': 'circle', 'source': 'source_points', 'layout': {}, 'paint': { 'circle-color': '#0000FF', 'circle-radius': 20 } }); }); // 地図上でクリックしたときの処理 map.on('click', (evt) => { // クリック位置のFeature群を取得／レイヤーを限定している let features = map.queryRenderedFeatures(evt.point, {layers: ['layer_points']}); // 取得したFeature群の属性等をコンソールに表示する features.forEach((feature) => { if (typeof feature !== 'undefined') { console.log('ID :' + feature.properties.id); console.log('Name :' + feature.properties.name); console.log('Type :' + feature.geometry.type); console.log('Location:' + feature.geometry.coordinates); } }); }); </script> |
内容
FeatureCollectionで2つのPointを定義し、それぞれのidとnameを属性として設定しているPointのレンダリングは青い丸としている- クリック時のリスナーを
map.on('click', ...)で登録している - クリック位置の
Feature群をqueryRenceredFeaturesで取得している- 第2引数で取得対象のソースがあるレイヤーを限定している
- 取得した
Feature群をforEachで1つずつ取り出して表示- このとき取り出した1つの
featureがundefinedでない場合だけ表示させている
- このとき取り出した1つの