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]
MapView {
    anchors.fill: parent
    id: mapview
    //! [Initialize Plugin]
    map.plugin: Plugin {
        id: myPlugin
        name: "osm"
        //specify plugin parameters if necessary
        PluginParameter {
             name: "osm.mapping.providersrepository.disabled"
             value: "true"
         }

         PluginParameter {
             name: "osm.mapping.providersrepository.address"
             value: "http://maps-redirect.qt.io/osm/5.6/"
         }

        //PluginParameter {...}
        //...
    }
    map.activeMapType: map.supportedMapTypes[map.supportedMapTypes.length - 2]
    map.center: QtPositioning.coordinate(30.67, 120.07)
    map.zoomLevel: 10
    // map.activeMapType: MapType.HybridMap
    // map.onSupportedMapTypesChanged: {
    //     map.activeMapType = map.supportedMapTypes[map.supportedMapTypes.length - 1]
    // }
    // Component.onCompleted: {console.log(map.supportedMapTypes)}


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

    MapItemView {
        id: itemview
        parent: mapview.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: mapview.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: imsiSelectModel
        function onSelectionChanged (selected, deselected) {
            var indexs = imsiSelectModel.selectedIndexes
            // if (indexs.length === 0) {
                listSelectModel.clear()
            // }
            for (var i=0; i<indexs.length; i++){
                if (indexs[i].column === 0) {
                    listSelectModel.append({
                        "latitude": imsiDataModel.data(indexs[i], imsiDataModel.getRole("latitude")), // 258
                        "longitude": imsiDataModel.data(indexs[i], imsiDataModel.getRole("longitude")) //257
                    });// 258);
                }
            }
        }
    }

    // Connections {
    //     target: imsiDataModel
    //     function onDetailUpdated (imsi, longitude, latitude){
    //         listSelectModel.clear()
    //         listSelectModel.append({"imsi":imsi,  "latitude": latitude, "longitude": longitude});
    //         console.log(listSelectModel.length)
    //     }
    // }

    // MouseArea {
    //     anchors.fill: parent
    //     hoverEnabled: false
    //     propagateComposedEvents: true
    //     onClicked: {
    //         listSelectModel.clear()
    //         mouse.accepted()
    //     }
    // }



    // 右下角经纬度显示
    HoverHandler {
        // 最外层的鼠标事件不要用MouseArea，不然hover事件和内层冲突
        id: mapHoverHandler
        acceptedDevices: PointerDevice.Mouse
        onPointChanged: {
            var position = mapview.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 // 设置垂直对齐方式为底部对齐
        }
    }

}