Question

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

我也可以通过Mapbox web gl js库成功查询这些属性，以获得准确的地图。例如，当我点击突出显示的多边形时，我有一个地图工作，显示弹出窗口，弹出窗口正确显示郊区的属性（郊区，州，邮政编码）。

现在，我想在我的网页中访问这些属性 - 我的tileset中的每个功能。我基本上想要将这些属性作为列表转储到地图之外的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 noob如果它的东西非常简单，那么道歉。

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

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

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的值是否正确？

Mapbox Web GL JS - 带矢量切片源的querySourceFeatures（）函数

1 个答案: