在QML地图小部件中使用不同图像作为标记的多个标记。

huangapple
go评论106阅读模式
英文:

Multiple Marker with different Images as Icons in QML Map Widget

问题

我想要什么？
我在QML中有一个小部件，显示带有OSM插件的地图。在这张地图上，无论我在哪里点击，我都想放置一个标记。如果我在另一个位置点击，应该添加一个新的标记。在顶部，我有一个选项卡栏。根据按钮（currentIndex）的不同，应该在地图上点击时显示不同类型的图像/标记图标（目前为了测试在第一个选项卡上是蓝色矩形，在第二个选项卡上是红色圆圈）。所有标记应该保持在地图上可见。

当前代码：

  1. 导入 QtQuick 2.11
  2. 导入 QtPositioning 5.11
  3. 导入 QtLocation 5.11
  4. 导入 QtQuick.Controls 2.0
  5. 导入 QtQuick.Layouts 1.3
  6. 导入 QtQuick.Controls.Styles 1.4
  8. 矩形 {
  9.     id: 矩形
  10.     宽度: 640
  11.     高度: 480
  12.     插件 {
  13.         id: osmPlugin
  14.         名称: "osm"
  16.         PluginParameter{
  17.             name: "osm.mapping.providersrepository.address"
  18.             value: "http://127.0.0.1:8080/"
  19.         }
  20.     }
  21.     
  22.     属性 variant locationTC: QtPositioning.coordinate(52.5200, 13.4050)
  24.     ListModel {
  25.         id: markermodel
  26.         dynamicRoles: true
  27.     }
  28.     
  29.     装载器{
  30.         id: mloader
  31.         sourceComponent:
  32.             if(bar.currentIndex == 0)//some condition
  33.                 return idRect
  34.             else if(bar.currentIndex == 1) //another condition
  35.                 return idCircle
  37.     }
  38.     Component{
  39.         id: idRect
  40.         矩形{
  41.             宽度: 20
  42.             高度: 20
  43.             颜色: "blue"
  44.         }
  45.     }
  46.     Component{
  47.         id: idCircle
  48.         矩形{
  49.             颜色: "red"
  50.             宽度: 20
  51.             高度: 20
  52.             半径: 50
  53.         }
  54.     }
  56.     地图 {
  57.         id: map
  58.         anchors.fill: parent
  59.         plugin: osmPlugin
  60.         center: QtPositioning.coordinate(59.91, 10.75) 
  61.         zoomLevel: 3
  62.         地图项目视图{
  63.             model: markermodel
  64.             delegate: MapQuickItem {
  65.                 id: marker
  66.                 coordinate: model.position_marker
  67.                 sourceItem: model.marker_source
  68.             }
  69.         }
  70.         
  71.          
  73.         鼠标区域
  74.         {
  75.             id: mouseArea
  76.             anchors.fill: parent
  77.             hoverEnabled: true
  78.             onClicked: {
  79.                 var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y));
  80.                 var msource =  mloader.item;
  81.                 markermodel.append({"position_marker": coord, "marker_source": msource})
  82.                 Hugo.getCoordinates((map.toCoordinate(Qt.point(mouse.x,mouse.y)).latitude), (map.toCoordinate(Qt.point(mouse.x,mouse.y)).longitude))
  83.             }
  84.         }
  85.         
  86.         项目 {
  87.             标签栏 {
  88.                 id: bar
  89.                 宽度: 500
  90.                 高度:25
  91.                 背景: 矩形{
  92.                     不透明度:0
  93.                 }
  94.                 重复器 {
  95.                     model: ["C1", "C2", "C3", "C4", "C5"]
  96.                     TabButton {
  97.                         文本: modelData
  98.                         宽度: 100
  99.                         属性 int roundedEdge: 0 // 0 - no rounded edges, 1 - left side rounded, 2 - right side rounded
  100.                         背景: 项目
  101.                         {
  102.                             矩形 {
  103.                                 id: 圆角矩形
  104.                                 高度: 25
  105.                                 宽度: 100
  106.                                 半径: roundedEdge == 0 ? 0 : 5
  107.                                 颜色:  "#35383b"
  108.                             }
  110.                             矩形 {
  111.                                 id: 左方矩形
  112.                                 visible: roundedEdge == 2
  113.                                 颜色:  "#35383b"
  114.                                 高度: 圆角矩形.height
  115.                                 宽度: 圆角矩形.width - 圆角矩形.radius
  116.                                 锚定.bottom: 圆角矩形.bottom
  117.                                 锚定.left: 圆角矩形.left
  118.                             }
  120.                             矩形 {
  121.                                 id: 右方矩形
  122.                                 visible: roundedEdge == 1
  123.                                 颜色:  "#35383b"
  124.                                 高度: 圆角矩形.height
  125.                                 宽度: 圆角矩形.width - 圆角矩形.radius
  126.                                 锚定.bottom: 圆角矩形.bottom
  127.                                 锚定.right: 圆角矩形.right
  128.                             }
  129.                         }
  130.                     }
  131.                 }
  132.                 onCountChanged: {
  133.                     for(let i = 0; i < bar.count; i++)
  134.                     {
  135.                         if(i == 0)
  136.                             bar.itemAt(i).roundedEdge = 1
  137.                         else if(i == bar.count - 1)
  138.                             bar.itemAt(i).roundedEdge = 2
  139.                         else
  140.                             bar.itemAt(i).roundedEdge = 0
  141.                     }
  142.                 }
  143.                 onCurrentIndexChanged: {
  144.                     if(bar.currentIndex == 2)
  145.                         print("currentIndex changed to", currentIndex)
  146.                        
  147.                 }
  148.                 
  149.             }
  150.         }
  151.     }
  152. }
英文:

What do I want ?
I have a widget in QML which displays a map with OSM plugin. On this map whenever I click I want to place a marker. If I click on another position a new marker should be added. In the top I have a Tabbar. Depending on which Button (currentIndex) a different type of Image/Marker Icon should be displayed with the click on the map (currently for test reasons on the first tab blue rectangles on the second red circles). And all markers should stay visible on the map.

Current Code:

  1. import QtPositioning 5.11
  2. import QtLocation 5.11
  3. import QtQuick.Controls 2.0
  4. import QtQuick.Layouts 1.3
  5. import QtQuick.Controls.Styles 1.4
  7. Rectangle {
  8.     id:rectangle
  9.     width: 640
  10.     height: 480
  11.     Plugin {
  12.         id: osmPlugin
  13.         name: &quot;osm&quot;
  15.         PluginParameter{
  16.             name:&quot;osm.mapping.providersrepository.address&quot;
  17.             value: &quot;http://127.0.0.1:8080/&quot;
  18.         }
  19.     }
  20.     
  21.     property variant locationTC: QtPositioning.coordinate(52.5200, 13.4050)
  23.     ListModel {
  24.         id: markermodel
  25.         dynamicRoles: true
  26.     }
  27.     
  28.     Loader{
  29.         id: mloader
  30.         sourceComponent:
  31.             if(bar.currentIndex == 0)//some condition
  32.                 return idRect
  33.             else if(bar.currentIndex == 1) //another condition
  34.                 return idCircle
  36.     }
  37.     Component{
  38.         id: idRect
  39.         Rectangle{
  40.             width: 20
  41.             height: 20
  42.             color: &quot;blue&quot;
  43.         }
  44.     }
  45.     Component{
  46.         id: idCircle
  47.         Rectangle{
  48.             color: &quot;red&quot;
  49.             width: 20
  50.             height: 20
  51.             radius: 50
  52.         }
  53.     }
  55.     Map {
  56.         id: map
  57.         anchors.fill: parent
  58.         plugin: osmPlugin
  59.         center: QtPositioning.coordinate(59.91, 10.75) 
  60.         zoomLevel: 3
  61.         MapItemView{
  62.             model: markermodel
  63.             delegate: MapQuickItem {
  64.                 id: marker
  65.                 coordinate: model.position_marker
  66.                 sourceItem: model.marker_source
  67.             }
  68.         }
  69.         
  70.          
  72.         MouseArea
  73.         {
  74.             id: mouseArea
  75.             anchors.fill: parent
  76.             hoverEnabled: true
  77.             onClicked: {
  78.                 var coord = map.toCoordinate(Qt.point(mouse.x,mouse.y));
  79.                 var msource =  mloader.item;
  80.                 markermodel.append({&quot;position_marker&quot;: coord, &quot;marker_source&quot;: msource})
  81.                 Hugo.getCoordinates((map.toCoordinate(Qt.point(mouse.x,mouse.y)).latitude), (map.toCoordinate(Qt.point(mouse.x,mouse.y)).longitude))
  82.             }
  83.         }
  84.         
  85.         Item {
  86.             TabBar {
  87.                 id: bar
  88.                 width: 500
  89.                 height:25
  90.                 background: Rectangle{
  91.                     opacity:0
  92.                 }
  93.                 Repeater {
  94.                     model: [qsTr(&quot;C1&quot;), qsTr(&quot;C2&quot;), qsTr(&quot;C3&quot;), qsTr(&quot;C4&quot;), qsTr(&quot;C5&quot;)]
  95.                     TabButton {
  96.                         text: modelData
  97.                         width: 100
  98.                         property int roundedEdge: 0 // 0 - no rounded edges, 1 - left side rounded, 2 - right side rounded
  99.                         background: Item
  100.                         {
  101.                             Rectangle {
  102.                                 id:     roundRect
  103.                                 height: 25
  104.                                 width:  100
  105.                                 radius: roundedEdge == 0 ? 0 : 5
  106.                                 color:  &quot;#35383b&quot;
  107.                             }
  109.                             Rectangle {
  110.                                 id:     leftSquareRect
  111.                                 visible: roundedEdge == 2
  112.                                 color:  &quot;#35383b&quot;
  113.                                 height: roundRect.height
  114.                                 width:  roundRect.width - roundRect.radius
  115.                                 anchors.bottom : roundRect.bottom
  116.                                 anchors.left : roundRect.left
  117.                             }
  119.                             Rectangle {
  120.                                 id:     rightSquareRect
  121.                                 visible: roundedEdge == 1
  122.                                 color:  &quot;#35383b&quot;
  123.                                 height: roundRect.height
  124.                                 width:  roundRect.width - roundRect.radius
  125.                                 anchors.bottom : roundRect.bottom
  126.                                 anchors.right : roundRect.right
  127.                             }
  128.                         }
  129.                     }
  130.                 }
  131.                 onCountChanged: {
  132.                     for(let i = 0; i &lt; bar.count; i++)
  133.                     {
  134.                         if(i == 0)
  135.                             bar.itemAt(i).roundedEdge = 1
  136.                         else if(i == bar.count - 1)
  137.                             bar.itemAt(i).roundedEdge = 2
  138.                         else
  139.                             bar.itemAt(i).roundedEdge = 0
  140.                     }
  141.                 }
  142.                 onCurrentIndexChanged: {
  143.                     if(bar.currentIndex == 2)
  144.                         print(&quot;currentIndex changed to&quot;, currentIndex)
  145.                        
  146.                 }
  147.                 
  148.             }
  149.         }
  150.     }
  151. }

.getCoordinates is a Signal to a Python backend.

I tried to realise the above desired functionality in the MouseArea.onClicked event. However in the current implementation only the switching of the marker icons work but only the latest marker remains.

Moving the loader definition to the MapQuickItem.sourceItem definition results in the following. The markers remain but changing the tab index switches the icon for all marker new and old.

What am I doing wrong and how can I achieve the desired functionality ?
Moreover do i have a misconception on the interactions ?

答案1

得分: 1

你应该为每个委托(MapQuickItem)创建一个新组件，而不是重用单个实例(mloader.item).

所以做如下修改，移除mloader和&quot;marker_source&quot;角色:

  1. ...
  2. 矩形 {
  3.     ...
  4.     地图 {
  5.         ...
  6.         地图项目视图 {
  7.             模型: markermodel
  8.             代表: 地图快速项目 {
  9.                 id: marker
  10.                 坐标: 模型.position_marker
  11.                 源项目: 装载器 {
  12.                     源组件: [idRect, idCircle][模型.type]
  13.                 }
  14.             }
  15.         }
  17.         鼠标区域 {
  18.             ...
  19.             点击时: {
  20.                 var coord = map.toCoordinate(Qt.point(mouse.x, mouse.y));
  21.                 markermodel.append({&quot;position_marker&quot;: coord, &quot;type&quot;: bar.currentIndex})
  22.                 ...
  23.             }
  24.         }
  25.     }
  26.     ...
  27. }
  28. ...
英文:

You should create a new component for each delegate(MapQuickItem), instead of reusing a single instance(the mloader.item).

So do like this, removing the mloader and the &quot;marker_source&quot; role.

  1. ...
  2. Rectangle {
  3.     ...
  4.     Map {
  5.         ...
  6.         MapItemView {
  7.             model: markermodel
  8.             delegate: MapQuickItem {
  9.                 id: marker
  10.                 coordinate: model.position_marker
  11.                 sourceItem: Loader {
  12.                     sourceComponent: [idRect, idCircle][model.type]                    
  13.                 }
  14.             }
  15.         }
  17.         MouseArea
  18.         {
  19.             ...
  20.             onClicked: {
  21.                 var coord = map.toCoordinate(Qt.point(mouse.x, mouse.y));
  22.                 markermodel.append({&quot;position_marker&quot;: coord, &quot;type&quot;: bar.currentIndex})
  23.                 ...
  24.             }
  25.         }
  26.     }
  27.     ...
  28. }
  29. ...

huangapple
  • 本文由 发表于 2023年6月29日 22:00:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/76581766.html
  • pyside2
  • python
  • qml
  • qt
  • qtlocation
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定