AntV L7 气泡图：在气泡中添加国家名称代码示例

以下是一个使用 AntV L7 在气泡图中添加国家名称的示例代码：

// 导入 L7 库
import { Scene, Map, CircleLayer } from 'l7';

// 创建地图实例
const scene = new Scene({
  id: 'map', // 地图容器 ID
  map: new Map({
    center: [105, 35], // 地图中心点
    zoom: 2, // 地图缩放级别
  }),
});

// 准备气泡数据
const data = [
  { name: '中国', lng: 105, lat: 35, value: 100 },
  { name: '美国', lng: -95, lat: 40, value: 80 },
  { name: '英国', lng: 0, lat: 50, value: 60 },
];

// 创建气泡图层
const circleLayer = new CircleLayer()
  .source(data)
  .shape('circle')
  .size('value')
  .color('value', ['#FF0000', '#FFFF00', '#00FF00'])
  .style({
    opacity: 1,
    stroke: '#fff',
    lineWidth: 1,
  })
  .on('click', (e) => {
    // 处理点击事件
    console.log(e.feature.properties.name); // 打印点击气泡的国家名称
  });

// 添加气泡图层到地图
scene.addLayer(circleLayer);

// 在气泡中添加国家名称
circleLayer.addLabel({
  field: 'name', // 使用数据中的 'name' 字段作为标签文本
  style: {
    fontSize: 10,
    color: '#000',
    textAlign: 'center',
    textBaseline: 'middle',
  }
});

解释：

1. 首先，导入 Scene, Map 和 CircleLayer 类库，并创建地图实例。
2. 准备气泡数据，包括国家名称、经纬度和值。
3. 创建气泡图层，设置气泡大小、颜色和样式。
4. 添加点击事件，在用户点击气泡时显示国家名称。
5. 使用 addLabel 方法，将国家名称添加到气泡中。

注意：

• 需要根据实际数据修改代码中的数据源和配置。
• 可以根据需要调整标签样式，例如字体大小、颜色等。

希望这个示例代码能够帮助您在 AntV L7 中创建气泡图并在气泡中添加国家名称。