在 Openlayers 6 中移动一个点

Question

我有一个用来绘制路径的坐标数组。然后，当用户在地图上单击该路径上的新位置时，我想将标记移动到该路径上的某个位置。

我已经弄清楚了地图和路径，并且在路径的第一个位置上有了标记。我不知道如何移动那个标记。我不明白如何访问第一个标记的位置，将坐标更改为数组中的不同坐标，然后将其移动到那里。

函数 movemarker 是我正在苦苦挣扎的那个。我玩过 getCoordinates 和 setCoordinates 但没有得到任何结果，所以它目前只是设置第二个标记。任何帮助将不胜感激！谢谢！

  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
  </head>
  <body>
      <div id="map-canvas" onClick="movemarker(3)"></div>

    <script type="text/javascript">
    var coordinates = [
        ol.proj.fromLonLat([-3, 0]),
        ol.proj.fromLonLat([-5, 4]),
        ol.proj.fromLonLat([-6, 4]),
        ol.proj.fromLonLat([-7, 0]),
        ol.proj.fromLonLat([-9, 8])
    ];

    <!-- Initialize path -->
    var layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: new ol.geom.LineString(coordinates),
                name: 'Line'
            })]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#ff0000',
                width: 3
            })
        })
    });

    <!-- Initialize map -->
    var map = new ol.Map({
        target: 'map-canvas',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
        center: [0, 0],
        zoom: 1
      })
    });
    map.addLayer(layerLines);

    <!-- set initial marker -->
    var markericon = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.Point(coordinates[0])
                })
            ]
        })
    });
    map.addLayer(markericon);

    <!-- move marker -->
    function movemarker(markernumber) {
        var markericon = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [
                    new ol.Feature({
                        geometry: new ol.geom.Point(coordinates[3])
                    })
                ]
            })
        });
        map.addLayer(markericon);
    }

    </script>

    </div>
  </body>
</html>```

Answer 1

您应该访问已创建要素的几何图形并更新其坐标

function movemarker(markernumber) {
    markericon.getSource().getFeatures()[0].getGeometry().setCoordinates(coordinates[markernumber]);
}

在 Openlayers 6 中移动一个点

Moving a Point in Openlayers 6

javascript

openlayers-6