MapBox GS JS如何为点位添加文本标签及hover/点击信息弹窗

一、添加点位上方短文本标签 #

在你已有的houses-layer圆圈图层加载完成后，新增一个同数据源的symbol类型文本图层即可，示例代码如下：

map.addLayer({
  'id': 'houses-label',
  'type': 'symbol',
  'source': 'houses',
  'layout': {
    // 文本内容取GeoJSON要素的name属性，可替换为你实际的字段名
    'text-field': ['get', 'name'],
    // 文本字号
    'text-size': 12,
    // 文本相对点位的偏移，[x, y]，y为负代表向上偏移
    'text-offset': [0, -1.5],
    // 文本锚点，设为bottom让文本底部靠近点位顶部
    'text-anchor': 'bottom'
  },
  'paint': {
    'text-color': '#333',
    // 加白边避免文本和底图颜色重叠看不清
    'text-halo-color': '#fff',
    'text-halo-width': 1
  }
});

二、绑定悬浮、点击交互弹出信息框 #

通过Mapbox GL JS内置的图层事件监听和Popup组件实现，示例代码如下：

1. 先添加悬浮交互优化（鼠标移到点位上变成指针样式） #

// 鼠标进入点位图层时修改指针样式
map.on('mouseenter', 'houses-layer', () => {
  map.getCanvas().style.cursor = 'pointer';
});
// 鼠标离开点位图层时恢复默认样式
map.on('mouseleave', 'houses-layer', () => {
  map.getCanvas().style.cursor = '';
});

2. 绑定点击事件弹出信息框 #

map.on('click', 'houses-layer', (e) => {
  // 获取当前点击的点位要素的所有属性
  const properties = e.features[0].properties;
  // 构造弹窗内容，可根据你的实际字段自定义HTML结构
  const popupContent = `
    <h3>${properties.name}</h3>
    <p>地址：${properties.address}</p>
    <p>价格：${properties.price}</p>
  `;
  // 初始化弹窗并添加到地图
  new mapboxgl.Popup()
    .setLngLat(e.lngLat)
    .setHTML(popupContent)
    .addTo(map);
});

如果你需要悬浮就触发弹窗，把上面事件的click改为mouseenter即可。

注意：以上代码中用到的name/address/price等字段，需要和你自己的GeoJSON数据源里的属性字段对应，按需修改即可。

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