Question

情况：我有一个工作站点，在输入地址时，MapboxGL在地图上标记一个点并查询多边形图层（queryRenderedFeatures）并显示包含该点的面要素。

这有效;但是，如果我想要对更改地图视图的第二个地址进行地理编码，则第二次失败，因为map.queryRenderedFeatures返回一个空数组。

var userDistrictsGeoJson;

map.on('load', function() {
  //add layers from Mapbox account
  addLayers(); //details left out of example, but this works.
  // Listen for geocoding result
  // This works the first time through, but fails if the user searchs for a second address because queryRenderedFeatures is working with a smaller set of features
  geocoder.on('result', function(e) {
    //need to clear geojson layer and 
    userDistrictsGeoJson = {
        "type": "FeatureCollection",
        "features": []
    };

    map.getSource('single-point').setData(e.result.geometry);
    //project to use (pixel xy coordinates instead of lat/lon for WebGL)
    var point = map.project([e.result.center[0], e.result.center[1]]);  

    var features = map.queryRenderedFeatures(point, { layers: ['congress-old'] });

    var filter = featuresOld.reduce(function(memo, feature){
      // console.log(feature.properties);
      memo.push(feature.properties.GEOID);
      return memo;
    }, ['in', 'GEOID']);

    map.setFilter('user-congress-old', filter);

    var userCongressOldGeoJson = map.querySourceFeatures('congressional-districts', {
      sourceLayer: 'congress_old',
      filter: map.getFilter('user-congress-old')
    });

    userDistrictsGeoJson.features.push(userCongressOldGeoJson[0]);

    var bbox = turf.bbox(userDistrictsGeoJson);
    var bounds = [[bbox[0], bbox[1]], [bbox[2], bbox[3]]];

    map.fitBounds(bounds, {
      padding: 40
    });

  }); //geocoder result
}); //map load

就像我说的那样，在地理编码'结果'事件上运行的所有事情都是第一次通过，但似乎第二次通过（用户搜索新地址，但不重新加载地图）queryRenderedFeatures返回一个较小的不包括地理编码器所在地块的功能子集。

非常感谢任何建议。

Answer 1

我最终通过在'moveend'事件上触发查询代码来解决这个问题。

现在语法是：

geocoder.on('result', function(e){
    map.once('moveend', function(){
        .... rest of code
    }
}

我认为在发布问题之前我已经尝试了这个，但现在似乎对我有用了。

MapboxGL：在多个地理编码后查询渲染的要素

1 个答案: