openlayers6 拿到坐标数据在地图上以图标显示并居中

在OpenLayers 6中，要在地图上以图标的形式显示坐标数据并使其居中，你可以使用VectorLayer结合VectorSource来添加图标，并使用View的setCenter方法来居中显示。以下是一个简单的例子：

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import Icon from 'ol/style/Icon';
 
// 初始化地图
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});
 
// 坐标数据
const coordinates = [13.41, 52.52]; // 例如: 德国的维也纳
 
// 创建一个图标特征
const iconFeature = new Feature({
  geometry: new Point(coordinates),
});
 
// 设置图标样式
iconFeature.setStyle(
  new Icon({
    src: 'data/icon.png', // 图标路径
    scale: 0.5, // 图标大小
  })
);
 
// 创建矢量数据源并添加特征
const vectorSource = new VectorSource({
  features: [iconFeature],
});
 
// 创建矢量图层并将其添加到地图上
const vectorLayer = new VectorLayer({
  source: vectorSource,
});
map.addLayer(vectorLayer);
 
// 将视图居中到特征的坐标
map.getView().setCenter(coordinates);

在这个例子中，我们首先创建了一个Feature对象，并设置了一个点形状的几何对象，该点的坐标是德国维也纳的经纬度。然后我们为这个特征设置了一个图标样式，并将它添加到VectorSource中。接着我们创建了一个VectorLayer并将其添加到地图中。最后，我们使用setCenter方法将地图的中心设置为特征的坐标，使得图标在地图上居中显示。

请确保替换'data/icon.png'为你想要使用的图标的正确路径。这个例子假设你已经有了OpenLayers 6的环境和基本的HTML页面设置。