主页 / coding / 问题 / 78945581
Accepted
pileup
Asked: 2024-09-04 02:07:14 +0800 CST

如何在点击时更新标记位置？

  • 772

我按照这个例子创建了一个带有圆形标记点的简单地图：https://openlayers.org/en/latest/examples/icon-color.html

这是我当前的代码：

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,
  }),
});

现在我希望能够单击该点并根据新的经度和纬度将其位置更改为新点。

我已经在文档中查找了 Point：https://openlayers.org/en/latest/apidoc/module-ol_geom_Point-Point.html

但它们确实令人困惑，我找不到使上述点可点击并移动到新位置的方法（在这种情况下，我只想根据固定的经度和纬度将其移动到附近的位置）

这些文档真的很混乱

openlayers

1 个回答

  1. Best Answer

    您需要监听地图上的点击事件并让 OpenLayers 找到该位置的任何要素。

    map.on('singleclick', function (e) {
  map.forEachFeatureAtPixel(e.pixel, function (f) {
    if (f === rome) {
      f.getGeometry().setCoordinates(fromLonLat([28.9744, 41.0128]))
    }
  });
});

    如果目的地是罗马，它将移至伊斯坦布尔。

    • 1

相关问题