Как я могу динамически нарисовать многоугольник и сделать его точки / маркеры подвижными в QML?

Question

Я столкнулся с проблемой, когда мне нужно динамически нарисовать многоугольник на карте QML с помощью мыши и сделать его точки подвижными, чтобы пользователь мог изменить расположение этих точек. Существует очень хороший ответ на подобный вопрос , который помог мне по крайней мере динамически добавлять некоторые точки / маркеры и соединять их через линии, но это не позволяет маркерам быть подвижными .

Может кто-нибудь помочь мне в этом вопросе?

Answer 1

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

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

С другой стороны, логика c перетаскивания сначала обнаруживает без нажатия маркера, так что MouseArea, присоединенный к каждому маркеру, используется для получения индекса этого элемента, отключая «жест». «карты. MouseArea маркеров было настроено таким образом, чтобы они продолжали распространять события мыши на другие элементы, поскольку обнаружение освобождения должно выполняться на карте, для этого используются сигналы positionChanged и Released, с которыми определяется положение маркера. обновлять и восстанавливать переменные при необходимости.

import QtQuick 2.14
import QtQuick.Window 2.14
import QtLocation 5.14
import QtPositioning 5.14

Window {
    visible: true
    width: 640
    height: 480
    property int currentIndex: -1
    ListModel{
        id: polygonmodel
    }
    Map {
        id: map
        anchors.fill: parent
        plugin: Plugin {
            name: "osm"
        }
        gesture.enabled: currentIndex == -1
        center: QtPositioning.coordinate(59.91, 10.75) // Oslo
        zoomLevel: 14
        MapItemView{
            z: polygon.z + 1
            model: polygonmodel
            delegate: MapQuickItem{
                anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)
                coordinate: QtPositioning.coordinate(model.coords.latitude, model.coords.longitude)
                sourceItem: Image {
                    width: 40
                    height: 40
                    source: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png"
                    MouseArea{
                        anchors.fill: parent
                        acceptedButtons: Qt.LeftButton
                        propagateComposedEvents: true
                        onPressed: {
                            currentIndex = index
                            mouse.accepted = false
                        }
                    }
                }
            }
        }
        MapPolygon{
            id: polygon
            border.color: "green"
            border.width: 10
        }
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton | Qt.RightButton
            onClicked: {
                var point = Qt.point(mouse.x, mouse.y)
                var coord = map.toCoordinate(point);
                if (mouse.button == Qt.RightButton)
                    addMarker(coord)
            }
            onPositionChanged: {
                if (currentIndex != -1){
                    var point = Qt.point(mouse.x, mouse.y)
                    var coord = map.toCoordinate(point);
                    if(coord.isValid)
                        moveMarker(currentIndex, coord)
                }
            }
            onReleased: {
                if (mouse.button == Qt.LeftButton && currentIndex != -1){
                    var point = Qt.point(mouse.x, mouse.y)
                    var coord = map.toCoordinate(point);
                    if(coord.isValid)
                        moveMarker(currentIndex, coord)
                    currentIndex = -1;
                }
            }
        }
    }
    function moveMarker(index, coordinate){
        polygonmodel.set(index, {"coords": coordinate})
        var path = polygon.path;
        path[index] = coordinate
        polygon.path = path
    }
    function addMarker(coordinate){
        polygonmodel.append({"coords": coordinate})
        polygon.addCoordinate(coordinate)
    }
}