openlayers多个标点

以下是使用OpenLayers在地图上添加多个标点的示例代码：

// 创建地图
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

// 创建标点数据源
const source = new VectorSource();

// 创建标点图层
const layer = new VectorLayer({
  source: source
});

// 将标点图层添加到地图中
map.addLayer(layer);

// 创建多个标点
const points = [
  {
    name: '标点1',
    lon: 116.397128,
    lat: 39.916527
  },
  {
    name: '标点2',
    lon: 121.473701,
    lat: 31.230416
  },
  {
    name: '标点3',
    lon: 114.066112,
    lat: 22.548515
  }
];

// 循环添加标点
points.forEach(point => {
  const feature = new Feature({
    geometry: new Point(fromLonLat([point.lon, point.lat])),
    name: point.name
  });

  feature.setStyle(new Style({
    image: new Icon({
      src: 'https://openlayers.org/en/latest/examples/data/icon.png'
    }),
    text: new Text({
      text: point.name,
      offsetY: -20
    })
  }));

  source.addFeature(feature);
});

该示例代码中，我们首先创建了一个地图，并在地图上添加了一个XYZ图层。然后，我们创建了一个标点数据源和一个标点图层，并将标点图层添加到地图中。接着，我们创建了一个包含多个标点信息的数组，并循环遍历该数组，为每个标点创建一个Feature，并设置其样式。最后，我们将Feature添加到标点数据源中，从而在地图上显示多个标点。