In QML Map I use MapPolygon and OpacityMask. When I scaled and move map, and polygon in center and poligon have size more then frame, then polygon change hes coordinate  

 

```

        MapPolygon

{             id: polygon             color: 'green'             path: [                 \{ latitude: 55.7637, longitude: 37.567890 }

,
                { latitude: 55.7637, longitude: 37.635 },
                { latitude: 55.69442, longitude:  37.635 },
                { latitude: 55.69442, longitude:  37.567890 }
            ]
            // visible: false
            z: 1
            opacity: 0.1
        }

        OpacityMask  // Actual masked image
        {
            id: opacityMask
            source: Item {
                id: itemForImage
                height: opacityMask.height
                width: opacityMask.width

                Item {
                    id: itemForSvg
                    anchors.centerIn: parent
                    property double proportion: 0
                    height: getHeightForSvg(itemForImage.width, itemForImage.height, root.angleRotationImage, proportion)
                    width: height * proportion
                    rotation: root.angleRotationImage

                    Image

{                         id: image                         anchors.fill: parent                         fillMode: Image.PreserveAspectFit                     }

                }
            }
            maskSource: polygon
            anchors.fill: polygon
            Rectangle

{                 anchors.fill: parent                 color: "blue"                 opacity: 0.1             }

        }

```

 

all code 

 

```

import QtLocation 5.15
import QtQuick
import QtQuick.Window 2.15
import QtQuick.Controls
import QtPositioning 5.15
import Qt5Compat.GraphicalEffects
import "qrc:/qml/customWidgets"
import "qrc:/qml/singletons"

Item {
    id: root
    property string m_id: "-1"
    property string m_idBuilding: "-1"
    property string m_uuidBuilding: ""
    property alias map: map
    property QtObject markerModel
    property bool needShowCamera: configApp.showCameraOnMap
    property alias mapItemView: mapItemView
    property alias tempModel: tempModel
    property alias polygon: polygon
    property alias opacityMask: opacityMask
    property alias image: image
    property alias itemForSvg: itemForSvg
    property var switchMoveMarker
    property double angleRotationImage: 0

    Plugin

{         id: mapPlugin         name: "osm"         parameters: [             PluginParameter \{ name: "osm.mapping.providersrepository.disabled"; value: true }

,
            PluginParameter { name: "osm.mapping.custom.host"; value: configApp.urlMapServer },
            PluginParameter { name: "osm.mapping.host"; value: configApp.urlMapServer },
            PluginParameter { name: "osm.mapping.cache.directory"; value: fileWorker.getPathMapCashe() }
        ]
    }

    Map
    {
        id: map
        property double kmOnPixel: 1
        property int oldZoomLevel: 10
        anchors.fill: parent
        plugin: mapPlugin
        zoomLevel: 18
        minimumZoomLevel: 7
        maximumZoomLevel: 30
        focus: true
        center: QtPositioning.coordinate(55.7522, 37.6156) // Moscow
//        copyrightsVisible: false  //убирает подпись карты

        //------------------------------------------------------------------------------------------------------
        property geoCoordinate startCentroid
        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
            property double proportionXFromCenter: 0
            property double proportionYFromCenter: 0
            property var lastPosition
            // 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/120
            property: "zoomLevel"
            onWheel:

{                 lastPosition = map.toCoordinate(Qt.point(mouseAreaMap.mouseX, mouseAreaMap.mouseY))                 proportionXFromCenter = (mouseAreaMap.mouseX - (mouseAreaMap.width / 2) ) / mouseAreaMap.width                 proportionYFromCenter = -(mouseAreaMap.mouseY - (mouseAreaMap.height / 2) ) / mouseAreaMap.height             }

        }
        DragHandler

{             id: drag             target: null             onTranslationChanged: (delta) => map.pan(-delta.x, -delta.y)         }

        MouseArea

{             id: mouseAreaMap             anchors.fill: parent             hoverEnabled: true         }

        //------------------------------------------------------------------------------------------------------

        ShaderEffectSource

{             anchors.fill: parent             id: shaderEffectSource             recursive: true         }

        //image on map---------------------------------------------
        MapPolygon

{             id: polygon             color: 'green'             path: [                 \{ latitude: 55.7637, longitude: 37.567890 }

,
                { latitude: 55.7637, longitude: 37.635 },
                { latitude: 55.69442, longitude:  37.635 },
                { latitude: 55.69442, longitude:  37.567890 }
            ]
            // visible: false
            z: 1
            opacity: 0.1
        }

        OpacityMask  // Actual masked image
        {
            id: opacityMask
            source: Item {
                id: itemForImage
                height: opacityMask.height
                width: opacityMask.width

                Item {
                    id: itemForSvg
                    anchors.centerIn: parent
                    property double proportion: 0
                    height: getHeightForSvg(itemForImage.width, itemForImage.height, root.angleRotationImage, proportion)
                    width: height * proportion
                    rotation: root.angleRotationImage

                    Image

{                         id: image                         anchors.fill: parent                         fillMode: Image.PreserveAspectFit                     }

                }
            }
            maskSource: polygon
            anchors.fill: polygon
            Rectangle

{                 anchors.fill: parent                 color: "blue"                 opacity: 0.1             }

        }

        //end image on map---------------------------------------------

        ListModel

{             id: tempModel         }

        MapItemView

{             id: mapItemView //            model: client.getMarkerModel(id)             model: tempModel             delegate: mapcomponent         }

        onZoomLevelChanged: {
            if (oldZoomLevel != ~~zoomLevel)

{                 updateModel()             }

            oldZoomLevel = zoomLevel
//            console.log("zoomLevel : " , ~~zoomLevel, oldZoomLevel)
            let latitudeCenter = visibleRegion.boundingGeoRectangle().center.latitude
            let kmOnDegree = 111.32 * Math.cos(latitudeCenter * (Math.PI / 180))
            kmOnPixel = (kmOnDegree * visibleRegion.boundingGeoRectangle().width) / map.width
        }

        MenuBlueprintMarker {
            id: menuMarker
            z:1
            property bool isHaveAlarm: false
            property string name: ""

            MMenuItem {
                id: menuItemShowAlarms
                text: qsTr("Show alarms") // "Показать тревоги"
                enabled: menuMarker.isHaveAlarm
                onClicked:

{                     let arr = client.getOnlyAlarmSensorsInAlarmFromList(menuMarker.m_arrUuids)                     menuMarker.openArrSensorsAndOnlyActiveAlarm(arr, menuMarker.name)                 }

            }
        }
    }

    Component {
        id: mapcomponent
        MapQuickItem {
            id: marker
            width: 40
            height: 40
//            anchorPoint.x: imageMarker.width/2
//            anchorPoint.y: imageMarker.height
            anchorPoint.x: markerForMap.width/2
            anchorPoint.y: markerForMap.height/2
            coordinate: QtPositioning.coordinate(model.position["latitude"],
                                                 model.position["longitude"])

            MouseArea{
                acceptedButtons: Qt.LeftButton | Qt.RightButton
                anchors.fill: parent
                hoverEnabled: true

                MToolTip {
//                    text: model.toolTip + model.arrNamesRole
                    height: alarmsRepeaterInListWithNames.height + 10
                    width: alarmsRepeaterInListWithNames.width + 10
                    visible: parent.containsMouse && !switchMoveMarker.checked
                    y: -height
                    x: -(width / 2) + (parent.width / 2)

                    AlarmsRepeaterInListWithNames

{                         id: alarmsRepeaterInListWithNames                     }

                    onVisibleChanged: {
                        if (visible)

{                             alarmsRepeaterInListWithNames.setArrUuidsBuildings(model.arrUuids)                         }

else

{                             alarmsRepeaterInListWithNames.clear()                         }

                    }
                }

                onPressed: {
                    if (mouse.button === Qt.LeftButton) {
                        if (switchMoveMarker.checked)

{                             uuidForMove = model.id                             map.gesture.enabled = false                         }

                    } else if (mouse.button === Qt.RightButton)

{                         menuMarker.isHaveAlarm = markerForMap.isHaveAlarm                         menuMarker.name = model.name                         menuMarker.x = marker.x                         menuMarker.y = marker.y                         menuMarker.openMenu(buildings.getObjectsuuidFromBuildings(model.arrUuids), model.name)                     }

                }
                onPositionChanged: {
                    if (uuidForMove === model.id)

{                         var mousePos = map.mapFromItem(marker, mouse.x, mouse.y)                         var coordinate = map.toCoordinate(mousePos)                         marker.coordinate = coordinate                     }

                }
                onReleased: {
                    if (uuidForMove === model.id)

{                         map.gesture.enabled = false                         var mousePos = map.mapFromItem(marker, mouse.x, mouse.y)                         var coordinate = map.toCoordinate(mousePos)                         mapItemView.model.updatePositionMarkersFromQmlForMap(model.arrUuids, coordinate["latitude"], coordinate["longitude"])                         uuidForMove = ""                         switchMoveMarker.checked = false                         root.updateModel()                     }

                }
            }

            sourceItem: MarkerForMap {
                id: markerForMap
                width: marker.width
                height: marker.height
                property var arrColorsAngles: model.arrColorsAngles

                MLabel

{                     id: labelMarker //                    text: model.countSensors                     text: model.countArrUuids //+ "\r\n" + model.countSensors                     color: themeStyles.colorMarkerText                     anchors.verticalCenter: parent.verticalCenter                     anchors.horizontalCenter: parent.horizontalCenter                     font.pixelSize: marker.height * 0.3                 }

                Component.onCompleted: {
                    if (model.id !== undefined)

{                         fillModel(model.arrColorsAngles)                    }
                }
                onArrColorsAnglesChanged: {
                    if (model.id !== undefined){                         fillModel(model.arrColorsAngles)                    }

                }

                MarkerCameraForMap {
                    id: markerCameraForMap
                    z: -1
//                    height: markerForMap.height * 2
                    height: getSize(maxDistanceMetr)
                    width: height
                    anchors.centerIn: parent
                    visible: needShowCamera
                    videoObjects: model.videoFromObjects
                    anchors.margins: -15

                    function getSize(distance) {
                        let diameter = distance * 2
                        let size = markerForMap.height * 2
                        let newSize = (diameter / 1000) / map.kmOnPixel
                        if (newSize > map.width * 2)

{                             return map.width * 2                         }

                        return newSize > size ? newSize : size
                    }
                }

            }
        }
    }
}

 

```