mapbox添加symbol图层显示文字详情

在Mapbox GL JS中，要添加一个显示文本的符号（symbol）图层，并在点上显示文字详情，你可以使用以下代码示例：

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // 替换为你的Mapbox访问令牌
var map = new mapboxgl.Map({
  container: 'map', // 地图容器的id
  style: 'mapbox://styles/mapbox/streets-v11', // 使用的地图样式
  center: [103.847, 36.0473], // 地图中心点坐标
  zoom: 3 // 地图缩放级别
});
 
map.on('load', function() {
  // 添加symbol图层
  map.addLayer({
    'id': 'symbol-layer',
    'type': 'symbol',
    'source': {
      'type': 'geojson',
      'data': { // 使用GeoJSON数据
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'geometry': {
              'type': 'Point',
              'coordinates': [103.847, 36.0473]
            },
            'properties': {
              'title': '这里是文本详情',
              'icon': 'monument' // 可以是自定义图标
            }
          }
          // 可以添加更多的点
        ]
      }
    },
    'layout': {
      'text-field': ['get', 'title'], // 显示属性中的title字段
      'text-offset': [0, 1.5], // 文本偏移量
      'text-anchor': 'top' // 文本锚点位置
    }
  });
});

确保你的HTML文件中有一个id为map的元素来容纳地图，并且替换YOUR_MAPBOX_ACCESS_TOKEN为你的实际Mapbox访问令牌。这段代码会在地图上添加一个点，并在点上显示其属性中的title字段。你可以根据需要自定义GeoJSON数据源和图层样式。