Mapbox Web GL JS - 带有矢量平铺源的 querySourceFeatures() 函数

Question

我在 Mapbox 上有一个矢量瓦片集，它是通过上传一个 geojson 文件创建的，该文件包含代表澳大利亚维多利亚州特定郊区的多边形。我的矢量瓦片集具有三个属性 - 郊区、州、邮政编码 - 对应于 geojson 中的特征属性。

我还可以通过 Mapbox web gl js 库成功查询这些属性以获取准确的地图。例如，当我单击突出显示的多边形时，我的地图会显示一个弹出窗口，并且该弹出窗口正确显示了该郊区的属性（郊区、州、邮政编码）。

现在我想在我的网页中访问这些属性 - 对于我的图块集中的每个功能。我基本上想将这些属性作为列表转储到地图外的 div 中；只是列出每个郊区及其属性。为此，我尝试使用 MapBox Web GL JS 库的 querySourceFeatures 函数。我有点挣扎。

这是我的代码。我的地图按预期显示。但是在 JS 控制台中，我只是得到一个空数组。

这是我的代码

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [144.96, -37.81], // starting position
    zoom: 8, // starting zoom,
    hash:true
});

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.Navigation());

map.on('load', function () {
    map.addSource('charlieSource', {
        type: 'vector',
        url: 'mapbox://charlie.962dstid'
    });


   map.addLayer({
    "id": "charlielayer",
    "type": "fill",
    "source": "charlieSource",
    "source-layer": "my-source-layer-name",
    "layout": {},
    "paint": {
        "fill-color": "#00525a",
        "fill-opacity": 0.5
    }

    });

    var myFeatures = map.querySourceFeatures('charlieSource', 
        {
            sourceLayer: 'my-source-layer-name',
           // i'm confident there is data matching this filter 
            filter: ["==", "postcode", "3000"]
        }
        );

   console.log(myFeatures);


});

doco 有点轻，所以我不知道我是否正确使用了 querySourceFeatures 函数。我是一个完全的 JS 菜鸟，如果它完全简单的话，我很抱歉。

在我的 Firefox 控制台中，我只得到一个长度为零的数组。不知道从这里去哪里。

我正在使用 v0.18.0 的 mapbox web gl js 库。

Answer 1

编辑：添加源后，您必须等待磁贴加载后才能调用queryRenderedFeatures。这段代码应该可以解决您的问题：

var wasLoaded = false;
map.on('render', function() {
    if (!map.loaded() || wasLoaded) return;
    var myFeatures = map.querySourceFeatures('charlieSource', {
        sourceLayer: 'my-source-layer-name',
        filter: ["==", "postcode", "3000"]
    });
    console.log(myFeatures);
    wasLoaded = true;
});

---

查理，您发布的所有内容看起来都是正确的。如果没有使用您的数据的功能演示，我无法查明问题。

您是否尝试将过滤器从 ["==", "postcode", "3000"] 更改为 ["==", "postcode", 3000]？ （把 3000 变成数字而不是字符串）

您确定要搜索的数据在视口内吗？ querySourceFeatures 仅适用于视口内的数据。

您确定source 和sourceLayer 的值正确吗？