如何在Ionic3+Mapbox JS中隐藏不需要的兴趣点(POI)

嘿，这个问题我之前也碰到过！要隐藏Mapbox地图里那些不需要的酒吧、加油站这类POI（兴趣点），核心是调整地图的样式图层，把对应的POI相关图层设为不可见或者直接移除。下面给你两种可行的方法，结合你的Ionic3代码来演示：

方法一：隐藏POI图层（推荐） #

这种方法只是把图层设为不可见，不会删除图层，后续如果需要恢复也很方便。关键是要在地图样式加载完成后操作，也就是监听style.load事件：

var questo = this; 
questo.map = new mapboxgl.Map({ 
  container: 'map', 
  style: 'mapbox://styles/mapbox/cjaudgl840gn32rnrepcb9b9g', 
  center: [11.381054062288769, 43.517016927850099], 
  zoom: 17.15, 
  pitch: 15
});

// 等待地图样式加载完成后执行操作
questo.map.on('style.load', function() {
  // 隐藏默认的POI标签图层（大部分场景下这一步就够了）
  questo.map.setLayoutProperty('poi-label', 'visibility', 'none');
  
  // 如果还有其他POI相关图层（比如某些样式里会拆分出特定类型的POI图层），可以继续隐藏
  // 比如：questo.map.setLayoutProperty('poi-scalerank', 'visibility', 'none');
});

方法二：移除POI图层 #

如果你确定以后都不需要这些POI图层，可以直接移除它们，但要注意有些图层可能依赖其他资源，所以操作前最好先判断图层是否存在：

questo.map.on('style.load', function() {
  // 检查并移除POI标签图层
  if (questo.map.getLayer('poi-label')) {
    questo.map.removeLayer('poi-label');
  }
  
  // 移除对应的数据源（如果需要彻底清理，可选操作）
  // if (questo.map.getSource('poi')) {
  //   questo.map.removeSource('poi');
  // }
});

小提示 #

不同的Mapbox样式（比如你用的cjaudgl840gn32rnrepcb9b9g）可能图层名称略有差异，如果你发现上面的代码没效果，可以：

• 打开浏览器控制台，输入questo.map.getStyle().layers，查看所有图层列表，搜索包含poi的图层名称，替换到代码里
• 或者用Mapbox Studio打开你使用的样式，直接在图层面板里找到POI相关图层，确认名称

内容的提问来源于stack exchange，提问作者Demy Mortelliti