如何從 Mapbox GL JS 中的樣式層獲取特征？

Question

我是 JavaScript 的學習者，並且在使用 Mapbox GL JS 時遇到了問題：我在 Mapbox Studio 中有一個樣式，其中有一個我的圖層 - "locations" 。 我已將其添加為圖塊集。 該層中有兩個 GeoJSON 點，但我無法在 GL JS 中獲取它們。 我發現我應該使用方法querySourceFeatures(sourceID, [parameters]) ，但我在正確填充其參數時遇到問題。 我寫：

var allFeatures = map.querySourceFeatures('_id-of-my-tyleset_', {
  'sourceLayer': 'locations'
});

..它不起作用。

更有趣的是，在后面的代碼中，我將這一層與方法queryRenderedFeatures ，這沒問題：

map.on('click', function(e) {
      var features = map.queryRenderedFeatures(e.point, {
        layers: ['locations']
      });

      if (!features.length) {
        return;
      }
      var feature = features[0];
      flyToPoint(feature);
      var popup = new mapboxgl.Popup({
          offset: [0, -15]
        })
        .setLngLat(feature.geometry.coordinates)
        .setHTML('<h3>' + feature.properties.name + '</h3>' + '<p>' +
          feature.properties.description + '</p>')
        .addTo(map);
    });

我已經閱讀了很多關於在地圖上添加圖層的內容，並且知道答案很簡單，但我無法實現解決方案，因此請提供幫助:)

這是GitHub 上的項目。

Answer 1

您的問題是您的地圖與默認情況下在 Mapbox Studio 中創建的所有地圖一樣，使用自動合成。 你實際上並沒有一個所謂的源morganvolter.cj77n1jkq1ale33jw0g9haxc0-2haga ，您有一個名為源composite有許多子層。

您可以找到這樣的圖層列表：

map.getSource('composite').vectorLayerIds

這表明您有一個名為akkerman的矢量圖層。 （“ locations ”是您的樣式層的名稱，而不是您的源層）。 因此，您的查詢應該是：

map.querySourceFeatures('composite', {
  'sourceLayer': 'akkerman'
});

返回 4 個特征。

Answer 2

關於Mapbox get features after filter或Mapbox get features before filter有很多問題。 我可以看到有很多帖子散落着，但似乎沒有一個有FULL DETAILED解決方案。 我花了一些時間將兩個解決方案放在一個函數下，在 jsbin 中試試這個。 這是給有興趣的人：

function buildRenderedFeatures(map) {
  // get source from a layer, `mapLayerId` == your layer id in Mapbox Studio    
  var compositeSource = map.getLayer(mapLayerId.toString()).source;
  //console.log(map.getSource(compositeSource).vectorLayers);
  var compositeVectorLayerLength = map.getSource(compositeSource).vectorLayers.length - 1;
  //console.log(compositeVectorLayerLength);
  // sourceId === tileset id which is known as vector layer id
  var sourceId = map.getSource(compositeSource).vectorLayers[compositeVectorLayerLength].id;
  //console.log(sourceId);
  
  // get all applied filters if any, this will return an array    
  var appliedFilters = map.getFilter(mapLayerId.toString());
  //console.log(appliedFilters);
   
  // if you want to get all features with/without any filters
  // remember if no filters applied it will show all features
  // so having `filter` does not harm at all 
  //resultFeatures = map.querySourceFeatures(compositeSource, {sourceLayer: sourceId, filter: appliedFilters});
  var resultFeatures = null;

  // this fixes issues: queryRenderedFeatures getting previous features
  // a timeout helps to get the updated features after filter is applied
  // Mapbox documentation doesn't talk about this! 
  setTimeout(function() {
    resultFeatures = map.queryRenderedFeatures({layers: [mapLayerId.toString()]});
    //console.log(resultFeatures);
    }, 500);
  }

然后您調用該函數，例如： buildRenderedFeatures(map)傳遞您在創建 Mapbox 地圖時已經擁有的map對象。

然后，您將擁有resultFeatures將返回一個可以使用for...in迭代的對象。 您可以測試我注釋掉的querySourceFeatures()代碼，但如果有人需要它，則可以使用它。