Mapbox GLのクリック可能なポリゴンの上にクリック可能なマーカーを配置する方法JS

Question

mapbox-gl-jsで地図を作成し、クリックすると道案内のポップアップを開く駐車場のレイヤーを追加しました。次に、駐車場のレイヤーの上にクリック可能なマーカー（バス停、アクセス可能な駐車場など）を配置しました。駐車場のマーカーをクリックすると、駐車場のポップアップとマーカーのポップアップがポップアップ表示されます。マーカーポップアップがある場合、ポリゴンレイヤーがポップアップを起動しないようにするにはどうすればよいですか？両方のポップアップが表示されないようにします。ここで

は、関連するコードです：

// Add a layer showing the parking lots 
map.addLayer({ 
    "id": "parking-layer", 
    "type": "fill", 
    "source": "parking-buttons", 
    "layout": {}, 
    "paint": { 
     "fill-color": "hsla(0, 0%, 0%, 0)", 
     "fill-outline-color": "hsla(0, 0%, 0%, 0)" 
    } 
}); 

// Add a layer showing the bus stop 
map.addLayer({ 
    "id": "bus", 
    "type": "symbol", 
    "source": "bus", 
    "layout": { 
     "icon-image": "{icon}-11", 
     "icon-allow-overlap": true 
    }, 
    "paint": { 
     "icon-opacity": {"stops": [[15.49, 0], [15.5, 1]]} 
    } 
}); 

// When a click event occurs for a polygon, open a popup with details 
map.on('click', function (e) { 
    var features = map.queryRenderedFeatures(e.point, { layers: ['parking-layer', 'buildings-layer'] }); 

    if (!features.length) { 
     return; 
    } 

    var feature = features[0]; 

    // Populate the popup and set its coordinates 
    var popup = new mapboxgl.Popup() 
     .setLngLat(map.unproject(e.point)) 
     .setHTML(feature.properties.description) 
     .addTo(map); 
}); 

// When a click event occurs for a node, open a popup with details 
map.on('click', function (e) { 
    var features = map.queryRenderedFeatures(e.point, { layers: ['bus', 'ephone'] }); 

    if (!features.length) { 
     return; 
    } 

    var feature = features[0]; 

    // Populate the popup and set its coordinates 
    var popup = new mapboxgl.Popup() 
     .setLngLat(feature.geometry.coordinates) 
     .setHTML(feature.properties.description) 
     .addTo(map); 
}); 

Answer 1

あなたは重複機能があるかどうポップアップ表示し終わる両方clickイベント、上の2つの別々のハンドラを登録しています。

私は1つのclickハンドラではなく2に異なる結果を処理しようとするだろう：

は

// When a click event occurs for a polygon, open a popup with details 
map.on('click', function (e) { 
    var pointFeatures = map.queryRenderedFeatures(e.point, { layers: ['bus', 'ephone'] }); 

    if (pointFeatures.length > 0) { 
     var feature = pointFeatures[0]; 
     // Populate the popup and set its coordinates 
     var popup = new mapboxgl.Popup() 
      .setLngLat(feature.geometry.coordinates) 
      .setHTML(feature.properties.description) 
      .addTo(map); 
     return; // don't display any more pop ups 
    } 

    var polygonFeatures = map.queryRenderedFeatures(e.point, { layers: ['parking-layer', 'buildings-layer'] }); 

    if (!polygonFeatures.length) { 
     return; 
    } 

    var feature = polygonFeatures [0]; 

    // Populate the popup and set its coordinates 
    var popup = new mapboxgl.Popup() 
     .setLngLat(map.unproject(e.point)) 
     .setHTML(feature.properties.description) 
     .addTo(map); 
});