在单击Openlayers 5上动态更改点/标记 [英] Dynamically change point/marker on click Openlayers 5

问题描述

我在尝试在OpenLayer Map小部件中实现动态标记时遇到问题.我希望将标记/点放置在地图"onclick"上.我希望在新位置刷新一下标记，而不是在每次单击鼠标时都放置新的标记/点.我一直在尝试找到有关图层/矢量的一些文档，并且在理解如何刷新/替换图层时遇到困难...

I am having issues trying to implement a dynamic marker in my OpenLayer Map widget. I would like that a marker/point is placed on the map "onclick". Instead of placing a new marker/point each mouse click, I would like the marker to be be refreshed on the new position. I have been trying to find some documentation on the layers/vectors and having difficulties understanding how to refresh/replace the layer...

这是我当前用于地图的OL代码，可通过鼠标单击来更新两个输入的纬度和经度:

Here is my current OL code for my map that updates two inputs with the latitude and longitude on mouse click:

var map = new ol.Map({
    target: 'map',
    layers: [
    new ol.layer.Tile({
    source: new ol.source.OSM()
    }),
    ],
    view: new ol.View({
    center: ol.proj.fromLonLat([37.41, 8.82]),
    zoom: 4
    })
    });

map.on('click', function(evt){
    var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
    var lon = lonlat[0];
    var lat = lonlat[1];
    document.getElementById("latitude").value = lat;
    document.getElementById("longitude").value = lon;
});

提前谢谢！

推荐答案

如果您的标记是点要素，则应该执行类似的操作

If your marker is a point feature something like this should do it

map.on('click', function(evt){
    myMarker.getGeometry().setCoordinates(evt.coordinates);
});

这篇关于在单击Openlayers 5上动态更改点/标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！