Перемещение точки в 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>```

javascript openlayers-6

13.12.2020 22:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 339

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

— 14.12.2020 00:16

13.12.2020 23:43

Другие вопросы по теме

Как добавить анимированную стрелку в соответствии со значением, которое я ввел в текстовое поле в открытых слоях

Как мы можем добавить несколько анимированных значков со стрелками при нажатии кнопки

Openlayers: Есть ли событие карты, которое срабатывает при добавлении нового слоя?

Openlayers устанавливает положение карты/холста относительно

Посткомпоновка OpenLayers 3 в событие OpenLayers 6 в Vue SPA

Как нарисовать путь между двумя координатами местоположения с помощью машины маршрутизации OSRM в OpenLayers?

OpenLayers 6 BBOX в экстенте

Разница между OpenLayers 5 и OpenLayers 6

Удалите все маркеры с карты Openlayers перед добавлением новых

Как отключить масштабирование при двойном щелчке с помощью setActive (false)

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

Ответы 1

Другие вопросы по теме

Похожие вопросы