QMLダイナミックマップオブジェクト作成

Question

私はマップ上のどこかをクリックするとオブジェクトを作成できるインタラクティブマップアプリケーションを構築しようとしています。私はQML Dynamic Object Creationを使ってオブジェクトを作成します。私は矩形を作成するのに成功しましたが（まだ座標問題がありますが）、MapQuickItemまたはMapCircleで矩形を変更すると、何も表示されません。

main.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) 

      } 
     } 
    } 
} 

componentCreation.js

var component 
 
var sprite 
 

 
function createSpriteObjects(posX,posY) { 
 
    component = Qt.createComponent("Sprite.qml"); 
 
    if (component.status == Component.Ready) 
 
     finishCreation(posX,posY); 
 
    else 
 
     component.statusChanged.connect(finishCreation); 
 

 
} 
 

 
function finishCreation(posX,posY) { 
 
    if (component.status == Component.Ready) { 
 
     //sprite = component.createObject(map, {"marker.coordinate": map.toCoordinate(Qt.point(posX,posY))}); 
 
     sprite = component.createObject(map); 
 
     console.log("Object Created " + map.toCoordinate(Qt.point(posX,posY))); 
 
     //sprite = component.createObject(appWindow); 
 
     if (sprite == null) { 
 
      console.log("Error creating Object"); 
 
     } 
 
    } 
 
    else if (component.status == Component.Error) { 
 
     console.log("Error loading component:", component.errorString()); 
 
    } 
 
}

Sprite.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ありません10の場合は、タイプはMapItemです。 Mapを親として設定するだけでは、Mapに表示するには不十分です。

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

が動的にQMLのオブジェクトを作成するための代替の方法があります、と私はそれはjavascriptの少ない不可欠伴い、より読みやすいので、彼らは優れていると信じて：

はまたaddMapItemを呼び出す必要があります。

---

最初のものは（あなたがmain.qmlで直接それを行うことができます）宣言Component作成でそれをやっている：

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); 
    } 
} 

---

他の方法はmodel and viewsでそれを行うことですコンポーネントとオブジェクトのインスタンス化を直接処理していないので、私のお気に入りです。

ここではItemを扱っていないので、通常ListViewまたはRepeaterはここでは機能しません。私たちは、MapItemViewを使用する必要があります。onClickedで

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}); 
     } 
    } 
} 

は、私たちはモデルに行を追加し、MapItemViewは自動的に各行に対してMapCircleをインスタンス化し、Mapに追加します。