Блог

Главная - Вопросы по программированию - Перемещение точки в Openlayers 6

Перемещение точки в Openlayers 6

#javascript #openlayers-6

#javascript #openlayers-6

Вопрос:

У меня есть массив координат, с помощью которого я рисую путь. Затем я хочу переместить маркер в позицию на этом пути, когда пользователь нажимает на карту, в новую позицию вдоль этого пути.

У меня есть карта и путь, и у меня есть маркер в первой позиции пути. Я не могу понять, как переместить этот маркер. Я не понимаю, как получить доступ к положению этого первого маркера, изменить координаты на другие в массиве, а затем переместить его туда.

Функция 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>```

Ответ №1:

Вы должны получить доступ к геометрии объекта, который вы уже создали, и обновить его координаты

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

Комментарии:

1. Вот и все. Я возился со строками, близкими к этому, но, должно быть, всегда делал что-то не так. Спасибо!