如何修改Mapbox GL JS中POI（学校、餐厅等）的尺寸？

Mapbox默认加载的POI（学校、餐厅等点要素）属于内置矢量图层，你可以通过以下方式调整它们的尺寸：

1. 定位目标POI的图层ID #

Mapbox默认样式里的POI相关图层大多以poi-为前缀，常见的有：

• poi-icon：POI对应的图标图层
• poi-label：POI的文字标签图层

你可以通过浏览器开发者工具的Layers面板，或者Mapbox Studio打开默认样式来确认具体的图层ID。

2. 用setLayoutProperty修改尺寸 #

调整POI图标尺寸 #

如果要修改POI图标的大小，针对poi-icon图层执行：

map.on('load', () => {
  // 把图标放大到默认尺寸的1.5倍，可根据需求调整数值
  map.setLayoutProperty('poi-icon', 'icon-size', 1.5);
});

调整POI文字标签尺寸 #

如果要修改POI文字的大小，针对poi-label图层执行：

map.on('load', () => {
  // 按地图缩放层级设置不同的文字大小，base为缩放基准，stops定义层级与尺寸的对应关系
  map.setLayoutProperty('poi-label', 'text-size', {
    'base': 1,
    'stops': [[12, 10], [18, 16]]
  });
});

3. 注意事项 #

• 必须在地图加载完成后执行修改操作，所以代码要放在map.on('load')的回调函数内
• 若使用自定义样式，图层ID可能与默认样式不同，需对应调整
• 少数特殊POI可能归属其他关联图层，需要先确认图层归属再修改

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