PayloadAPP/Src/RescueLoad/map/places_map.qml

// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

//! [Imports]
import QtQuick
import QtPositioning
import QtLocation

//! [Imports]
Map{
    anchors.fill: parent
    id: map    //! [Initialize Plugin]
    plugin: Plugin {
        id: myPlugin
        name: "TiMap"
    }

    center: QtPositioning.coordinate(37.8564642, 107.4229819)

    zoomLevel: 4
    minimumZoomLevel: 2
    maximumZoomLevel: 18
    onZoomLevelChanged: {
        if (zoomLevel < minimumZoomLevel) {
            zoomLevel = minimumZoomLevel
        }
        if (zoomLevel > maximumZoomLevel) {
            zoomLevel = maximumZoomLevel
        }
    }

    // Component.onCompleted: {console.log(map.supportedMapTypes)}
    Component.onCompleted: updateActiveMapType(map,"Tianditu Street");

    //更新地图显示类型
    function updateActiveMapType(control,para) {
        for (var i = 0; i < control.supportedMapTypes.length; i++) {
            console.log(control.supportedMapTypes[i].name)
            if (para === control.supportedMapTypes[i].name) {
                control.activeMapType = control.supportedMapTypes[i]
                return
            }
        }
    }


    // 被选中位置显示，与页面列表信息同步
    // signal locationClicked(string imsi)
    signal indexClicked(int row)

    MapItemView {
        id: itemview
        parent: map
        // model: testModel
        model: imsiDataModel
        z:2
        delegate: MapQuickItem {
            id: location
            // property bool isSelected: false // 标记是否选中
            property string imsi: model.imsi
            property double latitude: model.latitude
            property double longitude: model.longitude
            coordinate: QtPositioning.coordinate(latitude, longitude)
            //图像底部中心对齐坐标点
            anchorPoint.x: image.width * 0.5
            anchorPoint.y: image.height

            sourceItem: Item {
                width: image.width
                height: image.height
                Image {
                    id: image
                    source: "marker"
                    property double imageWidth: 20
                    property double imageHeight: 25
                    width: itemMouse.containsMouse ? imageWidth*1.25 : imageWidth
                    height: itemMouse.containsMouse ? imageHeight*1.25: imageHeight
                    Text {
                        anchors.centerIn: parent
                        text: (model.row + 1)
                        font.pixelSize: image.width*0.5
                        color: "black"
                        horizontalAlignment: Text.AlignRight // 设置水平对齐方式为右对齐
                        verticalAlignment: Text.AlignBottom // 设置垂直对齐方式为底部对齐
                    }
                }

                MouseArea {
                    id: itemMouse
                    anchors.fill: parent
                    hoverEnabled: true
                    propagateComposedEvents: true
                    cursorShape: Qt.PointingHandCursor
                    onClicked: {
                        indexClicked(model.row)
                    }
                }
            }
        }
    }


    //点击外部列表时，地图上显示被选中的图标
    ListModel {
        id: listSelectModel
    }

    MapItemView {
        parent: map
        // model: testModel
        model: listSelectModel
        z:3
        delegate: MapQuickItem { // 当前选中的标记
            z: itemview.z + 1
            // property string imsi: model.imsi
            property double latitude: model.latitude
            property double longitude: model.longitude
            property string imagesource: "selectlocation.png"
            property bool selected: true
            coordinate: QtPositioning.coordinate(latitude, longitude)
            //图像底部中心对齐坐标点
            anchorPoint.x: selectimgae.width * 0.5
            anchorPoint.y: selectimgae.height
            sourceItem: Item {
                Image {
                    id: selectimgae
                    source: imagesource
                    property double imageWidth: 30
                    property double imageHeight: 30
                    width: imageWidth
                    height: imageHeight
                }
            }
        }
    }

    // // 外部信号发射时创建图标
    Connections {
        target: imsiDataModel
        function onDataCleared() {
            listSelectModel.clear()
            map.zoomLevel = 5
        }
    }

    // // 外部信号发射时创建图标, 可多选
    Connections {
        target: imsiSelectModel
        function onSelectionChanged (selected, deselected) {
            updateSelect(imsiSelectModel)
        }
    }

    Connections {
        // 数据发生更改是，比如imsi对应的数据位置发生变化，选中的状态也应该随之变化
        target: imsiDataModel
        function onDataChanged(topLeft, bottomRight,roles) {
            var indexs = imsiSelectModel.selectedIndexes
            listSelectModel.clear()
            if (indexs.length === 0) return;
            for (var i = 0; i<indexs.length; i++){
                if (indexs[i].column === 0) {
                    listSelectModel.append({
                        "latitude": Number(imsiDataModel.data(indexs[i], imsiDataModel.getRole("latitude"))), // 258
                        "longitude": Number(imsiDataModel.data(indexs[i], imsiDataModel.getRole("longitude"))) //257
                    });// 258);
                }
            }
        }
    }

    function updateSelect(imsiSelectModel) {
        var indexs = imsiSelectModel.selectedIndexes
        // if (indexs.length === 0) {
            listSelectModel.clear()
        // }
        if (indexs.length === 0) return;

        var minLat = 999;
        var maxLat = -999;
        var minLon = 999;
        var maxLon = -999;

        for (var i = 0; i<indexs.length; i++){
            if (indexs[i].column === 0) {
                var latitude = Number(imsiDataModel.data(indexs[i], imsiDataModel.getRole("latitude")))
                var longitude = Number(imsiDataModel.data(indexs[i], imsiDataModel.getRole("longitude")))

                if (latitude < minLat) minLat = latitude;
                if (latitude > maxLat) maxLat = latitude;
                if (longitude < minLon) minLon = longitude;
                if (longitude > maxLon) maxLon = longitude;

                listSelectModel.append({
                    "latitude": latitude, // 258
                    "longitude": longitude //257
                });// 258);
            }
        }
        var centerLat = (minLat + maxLat) / 2.;
        var centerLon = (minLon + maxLon) / 2.;

        var latDiff = maxLat - minLat;
        var lonDiff = maxLon - minLon;
        var maxDiff = Math.max(latDiff, lonDiff);

        // 根据最大差值调整缩放级别
        if (maxDiff < 0.01) {
           map.zoomLevel = 15;
        } else if (maxDiff < 0.1) {
           map.zoomLevel = 12;
        } else if (maxDiff < 1) {
           map.zoomLevel = 10;
        } else {
           map.zoomLevel = 5;
        }

        map.center = QtPositioning.coordinate(centerLat, centerLon);
    }


    // 右下角经纬度显示
    HoverHandler {
        // 最外层的鼠标事件不要用MouseArea，不然hover事件和内层冲突
        id: mapHoverHandler
        acceptedDevices: PointerDevice.Mouse
        onPointChanged: {
            var position = map.toCoordinate(point.position)
            coordinatesDisplay.latitude = position.latitude
            coordinatesDisplay.longitude = position.longitude
        }
    }

    Rectangle {
        id: coordinatesDisplay
        width: 270
        height: 20
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        color: "transparent" // 设置背景颜色为透明
        property double latitude
        property double longitude
        Text {
            anchors.centerIn: parent
            text: "Latitude: " + parent.latitude.toFixed(
                      7) + "  Longitude: " + parent.longitude.toFixed(7)
            color: "black"
            horizontalAlignment: Text.AlignRight // 设置水平对齐方式为右对齐
            verticalAlignment: Text.AlignBottom // 设置垂直对齐方式为底部对齐
        }
    }
    //叠加标注信息图层
    Map {
        id: overlay_map
        anchors.fill: parent
        plugin: Plugin {
            name: "TiMap"
        }
        center: parent.center
        color: 'transparent' // Necessary to make this map transparent
        minimumFieldOfView: parent.minimumFieldOfView
        maximumFieldOfView: parent.maximumFieldOfView
        minimumTilt: parent.minimumTilt
        maximumTilt: parent.maximumTilt
        minimumZoomLevel: parent.minimumZoomLevel
        maximumZoomLevel: parent.maximumZoomLevel
        zoomLevel: parent.zoomLevel
        tilt: parent.tilt;
        bearing: parent.bearing
        fieldOfView: parent.fieldOfView
        z: parent.z + 1;
        Component.onCompleted: {
            // 失量图 标注
            updateActiveMapType(this,"Tianditu Street Road");
        }
    }


    // 注意： Qt6 中，地图控件不再自带拖拽，缩放等操作，需要手动操作，官方提供以下方式进行地图操作
    PinchHandler {
        id: pinch
        target: null
        onActiveChanged: if (active) {
                             map.startCentroid = map.toCoordinate(pinch.centroid.position, false)
                         }
        onScaleChanged: (delta) => {
                            map.zoomLevel += Math.log2(delta)
                            map.alignCoordinateToPoint(map.startCentroid, pinch.centroid.position)
                        }
        onRotationChanged: (delta) => {
                               map.bearing -= delta
                               map.alignCoordinateToPoint(map.startCentroid, pinch.centroid.position)
                           }
        grabPermissions: PointerHandler.TakeOverForbidden
    }
    WheelHandler {
        id: wheel
        // workaround for QTBUG-87646 / QTBUG-112394 / QTBUG-112432:
        // Magic Mouse pretends to be a trackpad but doesn't work with PinchHandler
        // and we don't yet distinguish mice and trackpads on Wayland either
        acceptedDevices: Qt.platform.pluginName === "cocoa" || Qt.platform.pluginName === "wayland"
                         ? PointerDevice.Mouse | PointerDevice.TouchPad
                         : PointerDevice.Mouse
        rotationScale: 1/15
        property: "zoomLevel"
    }

    //注意，如果使用此方式，在地图上层有Rectangle 等控件时，在此控件上操作也会影响到底层的地图，DragHandler暂时无法解决，
    // 如果遇到此问题，可以尝试使用 下方 MouseArea 里的地图拖拽方式，禁用DragHandler
    DragHandler {
        id: drag
        target: null
        onTranslationChanged: (delta) => map.pan(-delta.x, -delta.y)
    }
    Shortcut {
        enabled: map.zoomLevel < map.maximumZoomLevel
        sequence: StandardKey.ZoomIn
        onActivated: map.zoomLevel = Math.round(map.zoomLevel + 1)
    }
    Shortcut {
        enabled: map.zoomLevel > map.minimumZoomLevel
        sequence: StandardKey.ZoomOut
        onActivated: map.zoomLevel = Math.round(map.zoomLevel - 1)
    }

    /*
            MouseArea {
                id: mapMouseArea
                anchors.fill: parent
                hoverEnabled: true
                z: overlayMap.visible ? overlayMap.z + 1 : map.z + 1
                property real startMouseX: 0
                property real startMouseY: 0
                property real lastMouseX: 0
                property real lastMouseY: 0

                onClicked: mouse => {
                               if (mouse.button === Qt.LeftButton) {
                                   let point = Qt.point(mouse.x, mouse.y)
                                   // mapPositionClicked(point)
                                   // mapCoordinateClicked(map.toCoordinate(point))
                               }
                           }

                onPressed: mouse => {
                               lastMouseX = Math.round(mouse.x)
                               lastMouseY = Math.round(mouse.y)
                               startMouseX = lastMouseX
                               startMouseY = lastMouseY
                           }
                onDoubleClicked: mouse => {
                                     // mapPositionDoubleClicked(Qt.point(mouse.x,
                                     //                                   mouse.y))
                                 }

                onPositionChanged: mouse => {
                                       let point = Qt.point(mouse.x, mouse.y)
                                       mapPosition = point
                                       mapCoordinate = map.toCoordinate(point)
                                       if (pressed) {
                                           var newMouseX = Math.round(mouse.x)
                                           var newMouseY = Math.round(mouse.y)
                                           map.pan(lastMouseX - newMouseX,
                                                    lastMouseY - newMouseY)
                                           lastMouseX = newMouseX
                                           lastMouseY = newMouseY
                                       }
                                   }
            }

    */
}