Transitions MapItemView (QML)
Comment utiliser les transitions avec MapItemView.
MapItemView L'exemple « Transitions » montre comment utiliser l'élément Map pour afficher une carte. Il présente le code minimal nécessaire à l'affichage de la carte et peut servir de base à d'autres expérimentations.
Exécution de l'exemple
Vous pouvez exécuter l'exemple à partir de :
- Qt Creator
Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.
- Qt Extension for Visual Studio Code
Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l'exemple dans la liste. Pour plus d'informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.
Code QML
Dans main.qml, deux MapItemView sont utilisés : l’un pour ajouter à la carte les districts administratifs de la région d’Oslo, et l’autre pour ajouter un marqueur en appuyant longuement.
MapItemView {
id: mivMarker
add: Transition {
NumberAnimation {
property: "slideIn"
from: 50
to: 0
duration: 500
easing.type: Easing.OutBounce
easing.amplitude: 3.0
}
}
remove: Transition {
NumberAnimation {
property: "opacity"
to: 0.1
duration: 50
}
}
model: ListModel {
id: markerModel
}
delegate: Component {
MapQuickItem {
coordinate: QtPositioning.coordinate(latitude, longitude)
anchorPoint: Qt.point(e1.width * 0.5, e1.height + slideIn)
property real slideIn : 0
sourceItem: Shape {
id: e1
vendorExtensionsEnabled: false
width: 32
height: 32
visible: true
transform: Scale {
origin.y: e1.height * 0.5
yScale: -1
}
ShapePath {
id: c_sp1
strokeWidth: -1
fillColor: Qt.rgba(1,0,1,1.0)
property real half: e1.width * 0.5
property real quarter: e1.width * 0.25
property point center: Qt.point(e1.x + e1.width * 0.5 , e1.y + e1.height * 0.5)
property point top: Qt.point(center.x, center.y - half )
property point bottomLeft: Qt.point(center.x - half, center.y + half )
property point bottomRight: Qt.point(center.x + half, center.y + half )
startX: center.x;
startY: center.y + half
PathLine { x: c_sp1.bottomLeft.x; y: c_sp1.bottomLeft.y }
PathLine { x: c_sp1.top.x; y: c_sp1.top.y }
PathLine { x: c_sp1.bottomRight.x; y: c_sp1.bottomRight.y }
PathLine { x: c_sp1.center.x; y: c_sp1.center.y + c_sp1.half }
}
}
}
}
}La vue du marqueur spécifie à la fois la transition d’ajout et celle de suppression, afin de créer un effet de rebond du marqueur.
MapItemView {
id: miv
model: OsloListModel {
id: osloListModel
}
add: Transition {
NumberAnimation {
property: "animationScale"
from: 0.2
to: 1
duration: 800
easing.type: Easing.OutCubic
}
}
delegate: Component {
MapPolygon {
function fromMercator(l, centroid) {
var res = []
for (var i = 0; i < l.length; i++) {
var vtx = l[i]
var offset = Qt.point((vtx.x - centroid.x) * animationScale,
(vtx.y - centroid.y) * animationScale)
var pt = Qt.point(centroid.x + offset.x, centroid.y + offset.y)
res.push( QtPositioning.mercatorToCoord(pt) )
}
return res;
}
path: fromMercator(osloListModel.geometries[name+"_"+adminLevel]
, osloListModel.centroids[name+"_"+adminLevel] )
color: ((adminLevel > 4) ? "lightsteelblue" : 'firebrick')
property real animationScale : 1
opacity: ((adminLevel < 9) ? 0.1 : 0.8)
visible: true
}
}
}La vue des districts administratifs spécifie uniquement la transition d’ajout, afin de créer un effet de grossissement du district.
Configuration requise
Cet exemple nécessite une connexion Internet active pour télécharger les tuiles cartographiques de OpenStreetMap. Un proxy système facultatif devrait être détecté automatiquement.
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
