是否可以通过poi_label过滤建筑物层?

时间:2018-11-05 01:25:39

标签: javascript mapbox mapbox-gl-js mapbox-gl

我只想为某些建筑物显示3d建筑物(填充挤出)

是否可以根据建筑物名称(来自poi_label)过滤建筑物列表?

例如:

map.addLayer({
  'id': 'mybuildinglayer',
  'type': 'fill-extrusion',
  'source': {
     type: 'vector',
     url: 'mapbox://mapbox.mapbox-streets-v7'
  },
  'source-layer': 'building',
  'filter': [
      "==",
      "name",
      "McDonalds"
   ],
   'paint': {
      'fill-extrusion-color': '#FFFFFF',
      'fill-extrusion-height': 50,
      'fill-extrusion-base': 0,
   }
});

1 个答案:

答案 0 :(得分:1)

您需要按名称过滤要素,并找到包含这些要素的建筑物(使用turf.js):

// All features rendered:
var fs = map.queryRenderedFeatures();

// Filtering features by source and by name:
var names = ['McDonald\'s Langstrasse'];
var ps = fs.filter(f => 
  f.sourceLayer === 'poi_label' && 
  names.indexOf(f.properties.name) !== -1
);

// Filter the buildings by source and by the entry of feature inside the building:
var bs = fs.filter(f =>
  f.sourceLayer === 'building' &&
  ps.filter(p =>          
    turf.pointsWithinPolygon(turf.points([p.geometry.coordinates]), f.geometry)
        .features.length > 0
  ).length > 0
);

[https://jsfiddle.net/nq28kc4j/]