解决屏幕缩放导致鼠标位置不准确的问题，右侧，切换校区后的显示BUG

shuishen

2023-12-14 e733164e1c779b3aef7245936b9daf7875bf791e

 src/components/map/index.vue

@@ -6,7 +6,7 @@

        <mapPopup />

        <!-- <campusBuildingSearch ref="campusBuildingSearch" /> -->
        <campusBuildingSearch ref="campusBuildingSearch" />

        <campusNav ref="campusNavRoute" v-show="campusNavFlag" />

@@ -40,40 +40,41 @@
import { Icon, Style, Fill, Text, Stroke, Circle } from 'ol/style.js'
import TilegridTileGrid from "ol/tilegrid/TileGrid"


let architecturePolygon = null
let select = null


let campusLayers = [
    {
        key: 1,
        tileUrl: "https://fkxt.jxstnu.edu.cn/changjing/arcgis/rest/services/ksd1/MapServer/tile/{z}/{y}/{x}",
        center: [112.63716735643777, -0.087080937773012637833],
        resolution: 0.00014276766034981682,
        tileUrl: "https://fkxt.jxstnu.edu.cn/changjing/arcgis/rest/services/ksdhjzxq/MapServer/tile/{z}/{y}/{x}",
        center: [112.605918275550715, -0.0457081387615907618595],
        resolution: 0.00003807137609328448,
        origin: [-400.0, 399.9999999999998],
        resolutions: [
            0.00019035688046642243, 0.00014276766034981682, 0.00009517844023321122,
            0.00004758922011660561,
            0.00015228550437313792, 0.00007614275218656896, 0.00003807137609328448,
            0.00001903568804664224, 0.00000951784402332112, 0.00000475892201166056
        ],
        fullExtent: [
            112.51302281804038, -0.17416638494176828, 112.76131189483516,
            0.000004509395743004334,
        ]
            112.51303616638316, -0.103420786429659, 112.67880038471827,
            0.000004508906477476281
        ],
        polygonUrl: 'https://fkxt.jxstnu.edu.cn/changjing/lkarcgisapp'
    },

    {
        key: 2,
        tileUrl: "https://dev.jxpskj.com:8023/arcgis156/rest/services/cc/MapServer/tile/{z}/{y}/{x}",
        center: [115.79624983, 28.6416099],
        resolution: 0.000007138383017490841,
        origin: [-400.0, 400.0],
        tileUrl: "https://fkxt.jxstnu.edu.cn/changjing/arcgis/rest/services/ksdflxq/MapServer/tile/{z}/{y}/{x}",
        center: [112.6102242373625, -0.0741745423945008147645],
        resolution: 0.00003807137609328448,
        origin: [-400.0, 399.9999999999998],
        resolutions: [
            0.000014276766034981682, 0.000007138383017490841, 0.00000475892201166056,
            0.00000237946100583028,
            0.00015228550437313792, 0.00007614275218656896, 0.00003807137609328448,
            0.00001903568804664224, 0.00000951784402332112, 0.00000475892201166056
        ],
        fullExtent: [
            115.76861782444642, 28.63584422760626, 115.82432471553928, 28.663308794331794,
        ]
            112.51302551881798, -0.16235359398493399, 112.72742295590702, 0.000004509195932360471
        ],
        polygonUrl: 'https://fkxt.jxstnu.edu.cn/changjing/fllkarcgisapp'
    }
]

@@ -159,7 +160,22 @@
                this.campusCut(newData)

                this.$nextTick(() => {
                    this.$store.commit('SET_DETAILSPOPUP', false)
                    this.$store.commit('SET_MONITORPOPUP', false)
                    this.$store.commit('SET_PANORAMAPOPUP', false)

                    this.$store.dispatch('delVisitedViews', this.$route)

                    this.$store.commit('SET_ARCNAVBARFLAG', false)
                    this.$store.commit('SET_SEARCHPOPUPFLAG', false)

                    this.$router.push('/pcLayout/default')

                    this.$refs.leftNav.initialize(newData)

                    this.$refs.campusNavRoute.closeModel()

                    this.createdLayers(newData)
                })
            }
        }
@@ -192,29 +208,30 @@
            'orgNavBarFlag',
            'arcNavBarFlag',
            'searchPopupFlag',
            'calenderShow'
            'calenderShow',
            'closeMapClick'
        ])
    },

    mounted () {
        const that = this
        this.map2D.setTarget('viewer-container')
        this.$nextTick(() => {
            this.$refs.leftNav.initialize()

            this.createdLayers()
            this.map2D.setTarget('viewer-container')

            that.map2D.on('pointermove', that.mouseMoveEvent)

            this.map2D.on("singleclick", function (event) {
                if (that.closeMapClick) return

                let flag = true

                that.map2D.forEachFeatureAtPixel(
                    event.pixel,
                    [event.originalEvent.offsetX, event.originalEvent.offsetY],
                    (feature) => {
                        if (flag == false) {
                            return
                        }
                        if (feature.values_.type == 'point') {
                        if (feature.values_.type == 'point' || feature.values_.type == 'navigationPoint') {
                            flag = false
                        }

@@ -224,9 +241,15 @@
            })
        })
    },

    methods: {
        createdLayers () {
        createdLayers (campusKey) {
            const that = this
            let curCampus = campusLayers.find(item => item.key == campusKey)

            if (architecturePolygon) {
                this.map2D.removeLayer(architecturePolygon)
            }

            architecturePolygon = new VectorLayer({
                // 图标图层
@@ -237,7 +260,7 @@

            axios
                .get(
                    'https://fkxt.jxstnu.edu.cn/changjing/lkarcgisapp?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson'
                    curCampus.polygonUrl + '?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson'
                )
                .then((resultData) => {
                    resultData.data.features.forEach((item) => {
@@ -267,6 +290,8 @@
            let flag = true
            var that = this

            if (that.closeMapClick) return

            if (select != null && select.values_.type == 'polygon') {
                select.setStyle(new Style({

@@ -280,19 +305,19 @@
            select = null

            that.map2D.forEachFeatureAtPixel(
                event.pixel,
                [event.originalEvent.offsetX, event.originalEvent.offsetY],
                (feature) => {
                    if (flag == false) {
                        return
                    }

                    if (feature.values_.type == 'point') {
                    if (feature.values_.type == 'point' || feature.values_.type == 'navigationPoint') {
                        flag = false
                        return
                    }

                    if (select != null) {
                        if (feature != select) {
                    if (feature.values_.type == 'polygon') {
                        if (select != null && feature != select) {
                            select.setStyle(new Style({

                                fill: new Fill({
@@ -303,26 +328,27 @@

                            select = null
                        }

                        if (select == null) {
                            select = feature

                            select.setStyle(
                                new Style({

                                    fill: new Fill({
                                        color: 'rgba(108, 245, 113, 0.6)'
                                    }),

                                    stroke: new Stroke({
                                        color: 'rgba(3, 255, 13, 1)',
                                        width: 1,
                                    }),

                                })
                            )
                        }
                    }

                    if (select == null) {
                        select = feature

                        select.setStyle(
                            new Style({

                                fill: new Fill({
                                    color: 'rgba(108, 245, 113, 0.6)'
                                }),

                                stroke: new Stroke({
                                    color: 'rgba(3, 255, 13, 1)',
                                    width: 1,
                                }),

                            })
                        )
                    }
                }
            )
        },
@@ -333,37 +359,21 @@

            this.$store.commit('CLEAR_ALL', null)

            getDetail({ mechanismname: event.target.values_.attributes['楼栋号'] }).then((res) => {
            getDetail({ mechanismname: event.target.values_.attributes['楼栋号'], campus: this.layoutElement.campusValue }).then((res) => {
                if (JSON.stringify(res.data.data) == '{}') return
                let result = res.data.data

                that.$store.commit('SET_MONITORPOPUP', false)
                that.$store.commit("SET_PANORAMAPOPUP", false)
                let curLngLat = this.map2D.getCoordinateFromPixel([event.event.originalEvent.offsetX, event.event.originalEvent.offsetY])

                this.$store.commit('SET_STATENAME', result.mechanismname)
                this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
                this.$store.commit('SET_INTRODUCETEXT', result.introduce)

                let imgArr = result.tpurl.split(',')

                this.$store.commit('SET_POPUPBGURL', imgArr[0])
                this.$store.commit('SET_POPUPIMGATLAS', imgArr)
                this.$store.commit('SET_POPUPQRURL', result.codeurl)

                this.$store.commit("SET_POINTPOSITION", [
                    Number(event.event.coordinate[0]),
                    Number(event.event.coordinate[1]),
                    Number(0),
                    Number(0),
                    Number(-90),
                    Number(0),
                ])

                this.$store.commit("SET_DETAILSPOPUP", true)
                this.$store.dispatch('setOurDataInPoput', {
                    item: result,
                    lng: curLngLat[0],
                    lat: curLngLat[1]
                })

                this.openPopups({
                    lng: Number(event.event.coordinate[0]),
                    lat: Number(event.event.coordinate[1]),
                    lng: Number(curLngLat[0]),
                    lat: Number(curLngLat[1]),
                    item: result,
                    event
                })
@@ -382,21 +392,21 @@

        mapClick (e) {
            this.$refs.campusNavRoute.shortcutShow(e)
            // this.$refs.campusBuildingSearch.shortcutShow(e)
            this.$refs.campusBuildingSearch.shortcutShow(e)
        },

        campusCut (campusKey) {
            if (campusLoadLayer) this.map2D.removeLayer(campusLoadLayer)
            let curCampus = campusLayers.find(item => item.key == campusKey)

            const tileGrid = new TilegridTileGrid({
            let tileGrid = new TilegridTileGrid({
                tileSize: 256,
                origin: curCampus.origin,
                extent: curCampus.fullExtent,
                resolutions: curCampus.resolutions,
            })
            // 瓦片数据源
            const tileArcGISXYZ = new XYZ({
            let tileArcGISXYZ = new XYZ({
                tileGrid: tileGrid,
                projection: "EPSG:4326",
                url: curCampus.tileUrl,