如何点击OpenLayers标记点更新其位置？

要实现点击标记点后将其移动到指定经纬度，你需要给地图添加点击事件监听，判断点击目标并更新Feature的几何坐标。以下是修改后的完整代码：

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import Point from 'ol/geom/Point.js';
import View from 'ol/View.js';
import {Icon, Style} from 'ol/style.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {fromLonLat} from 'ol/proj.js';

const rome = new Feature({
  geometry: new Point(fromLonLat([12.5, 41.9])),
});

rome.setStyle(
  new Style({
    image: new Icon({
      color: '#BADA55',
      crossOrigin: 'anonymous',
      src: 'data/dot.svg',
    }),
  }),
);

const vectorSource = new VectorSource({
  features: [rome],
});

const vectorLayer = new VectorLayer({
  source: vectorSource,
});

const tileLayer = new TileLayer({
  source: new OSM()
});

const map = new Map({
  layers: [tileLayer, vectorLayer],
  target: document.getElementById('map'),
  view: new View({
    center: fromLonLat([2.896372, 44.6024]),
    zoom: 3,
  }),
});

// 新增：监听地图点击事件，处理标记点移动
map.on('singleclick', function(event) {
  // 获取点击位置对应的Feature
  const clickedFeature = map.forEachFeatureAtPixel(event.pixel, function(feature) {
    return feature;
  });

  // 判断点击的是目标标记点（这里是rome）
  if (clickedFeature === rome) {
    // 设置新的经纬度坐标，示例为巴黎附近：[2.3522, 48.8566]
    const newLonLat = [2.3522, 48.8566];
    // 将经纬度转换为地图投影坐标，更新Point的位置
    rome.getGeometry().setCoordinates(fromLonLat(newLonLat));
  }
});

关键步骤说明： #

• 监听点击事件：通过map.on('singleclick', ...)绑定地图的单击事件，每次点击都会触发回调函数。
• 获取点击的Feature：使用map.forEachFeatureAtPixel方法，传入点击的像素位置，就能拿到点击到的矢量要素。
• 更新坐标：通过feature.getGeometry()获取Point几何对象，调用setCoordinates方法传入转换后的投影坐标（用fromLonLat把经纬度转成地图使用的Web墨卡托坐标），标记点会自动更新位置。

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