Mapbox Web GL JS-带矢量图块源的querySourceFeatures()函数 [英] Mapbox Web GL JS - querySourceFeatures() function with vector tile source

问题描述

我在Mapbox上有了一个矢量图块集，该图块集是通过上传包含代表澳大利亚维多利亚州特定郊区的多边形的geojson文件创建的.我的矢量图块集具有三个属性-郊区，州和邮政编码-与geojson中的要素属性相对应.

I've got a vector tileset on Mapbox that I created by uploading a geojson file comprising polygons representing particular suburbs in Victoria, Australia. My vector tileset has three properties - suburb, state, postcode - corresponding to the feature properties in the geojson.

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

I can also successfully query those properties via the Mapbox web gl js library to get an accurate map. For example I've got a map working that shows a popup when I click a highlighted polygon, and the popup correctly shows that suburb's properties (suburb, state, postcode).

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

Now I'd like to access those properties - for every feature in my tileset - in my web page. I basically want to dump those properties out as a list, in a div outside of the map; just listing each suburb and its properties. To this end, I'm trying to use the querySourceFeatures function of the MapBox Web GL JS library. I'm struggling a bit.

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

Here's my code. My map displays as expected. But in the JS console I'm just getting an empty array.

这是我的代码

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新手，如果真的很简单，我深表歉意.

The doco is a bit light so I don't know if I'm using the querySourceFeatures function correctly. I'm a total JS noob so apologies if its something totally simple.

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

In my console in Firefox I just get an array of length zero. Not sure where to go from here.

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

I'm using v0.18.0 of the mapbox web gl js library.

推荐答案

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

After adding a source, you must wait for the tiles to load before calling queryRenderedFeatures. This code should solve your problem:

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;
});

---

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

---

Everything you've posted looks correct, Charlie. I can't pinpoint the problem without a functioning demo using your data.

您是否尝试过将过滤器从["==", "postcode", "3000"]更改为["==", "postcode", 3000]? (将3000转换为数字而不是字符串)

Have you tried changing your filter from ["==", "postcode", "3000"] to ["==", "postcode", 3000]? (turning the 3000 into a number rather than a string)

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

Are you sure that the data for which you are searching is within the viewport? querySourceFeatures only works for data within the viewport.

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

Are you sure that your values for source and sourceLayer are correct?

这篇关于Mapbox Web GL JS-带矢量图块源的querySourceFeatures()函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！