在 Openlayers 6 中移动一个点

Question

我有一个坐标数组，我用它来绘制路径。 然后，当用户单击 map 到沿该路径的新 position 时，我想将标记移动到该路径上的 position。

我找到了 map 和路径，并且我在路径的第一个 position 上有了标记。 我不知道如何移动那个标记。 我不明白如何访问第一个标记的 position，将坐标更改为数组中的不同坐标，然后将其移动到那里。

function 移动标记是我正在努力解决的问题。 我玩过 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 中移动一个点

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-12-13 22:43:39

在 Openlayers 6 中移动一个点

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-12-13 22:43:39

解决方案1
0 已采纳 2020-12-13 22:43:39