QML 动态地图对象创建

Question

我正在尝试构建交互式地图应用程序，当我单击地图上的某个位置时，该应用程序将允许我创建一个对象。我使用QML 动态对象创建来创建对象。我已经成功创建了一个矩形（仍然有坐标问题），但是当我用 MapQuickItem 或 MapCircle 更改矩形时，它什么也没有显示。

主.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import "componentCreation.js" as MyScript
import QtQuick.Controls 2.1
import QtLocation 5.3
import QtPositioning 5.2

Window  {
    id: appWindow
    width: 512
    height: 512
    visible: true
    Map {
        id: map
        //width: win.width - kolom.width - row1.spacing
        anchors.fill: parent
        activeMapType: map.supportedMapTypes[2]
        zoomLevel: 1
        //z:1


        center {
            latitude: 5
            longitude: 100
        }
        plugin: Plugin {
            name: 'osm';
            PluginParameter {
                name: 'osm.mapping.offline.directory';
                value: ':/offline_tiles/'
            }
        }
        MapCircle {
            radius: 800000
            color: 'blue'
            center {
                latitude: 5
                longitude: 100
            }
        }

        MouseArea {
            anchors.fill: parent
            onPressed: {
                var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
                console.log("coordinate: " + coord)

                //MyScript.createSpriteObjects(map.toCoordinate(Qt.point(mouse.x,mouse.y)).latitude,map.toCoordinate(Qt.point(mouse.x,mouse.y)).longitude)
                MyScript.createSpriteObjects(mouse.x,mouse.y)

            }
        }
    }
}

组件创建.js

import QtQuick 2.6
import QtQuick.Window 2.2
import "componentCreation.js" as MyScript
import QtQuick.Controls 2.1
import QtLocation 5.3
import QtPositioning 5.2

Window  {
    id: appWindow
    width: 512
    height: 512
    visible: true
    Map {
        id: map
        //width: win.width - kolom.width - row1.spacing
        anchors.fill: parent
        activeMapType: map.supportedMapTypes[2]
        zoomLevel: 1
        //z:1


        center {
            latitude: 5
            longitude: 100
        }
        plugin: Plugin {
            name: 'osm';
            PluginParameter {
                name: 'osm.mapping.offline.directory';
                value: ':/offline_tiles/'
            }
        }
        MapCircle {
            radius: 800000
            color: 'blue'
            center {
                latitude: 5
                longitude: 100
            }
        }

        MouseArea {
            anchors.fill: parent
            onPressed: {
                var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
                console.log("coordinate: " + coord)

                //MyScript.createSpriteObjects(map.toCoordinate(Qt.point(mouse.x,mouse.y)).latitude,map.toCoordinate(Qt.point(mouse.x,mouse.y)).longitude)
                MyScript.createSpriteObjects(mouse.x,mouse.y)

            }
        }
    }
}

精灵.qml

import QtQuick 2.0
import QtLocation 5.3


MapQuickItem {
    id: marker
    sourceItem: Image {
        id: image
        source: "marker.png"
    }
    coordinate {
        latitude: 5
        longitude: 100
    }
    anchorPoint.x: image.width / 2
    anchorPoint.y: image.height / 2
    visible: true
}

/*Rectangle {
    width: 100
    height: 20
    x: 10
    y:10
}*/

Answer 1

MapQuickItem和MapCircle都不是Item，他们都是这样的类型MapItem。仅将其设置Map为其父级不足以在 中显示它们Map。

您还需要致电addMapItem：

sprite = component.createObject(map);
map.addMapItem(sprite);

还有一些替代方法可以动态创建 QML 对象，我相信它们更好，因为它涉及更少的命令性 JavaScript 并且更具可读性。

第一个是通过声明性创建来执行此操作Component（您可以直接在 main.qml 中执行此操作）：

Component {
    id: mapCircleComponent
    MapCircle { //instead of defining it inline, you can also set the source property to point to another file
        radius: 80000
        color: 'blue'
    }
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
        var circle = mapCircleComponent.createObject(map, {"center.latitude" : coord.latitude, "center.longitude": coord.longitude});
        map.addMapItem(circle);
    }
}

另一种方法是使用模型和视图来实现，这是我最喜欢的，因为您不直接处理组件和对象实例化。

由于我们不在Item这里处理，通常的方法在这里ListView还是Repeater行不通的。我们需要使用MapItemView：

ListModel {
    id: mapModel
}

Map {
    id: map
    //...
    MapItemView {
        model: mapModel
        delegate: MapCircle {
            radius: 80000
            color: 'blue'
            center {
                latitude: lat
                longitude: longi
            }
        }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y))
            mapModel.append({lat : coord.latitude, longi: coord.longitude});
        }
    }
}

在 中，onClicked我们只需将一行添加到模型中，然后MapItemView自动实例化MapCircle每行并将其添加到Map.