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

shuishen

2023-12-14 e733164e1c779b3aef7245936b9daf7875bf791e

 src/components/map/index.vue

@@ -40,45 +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/ksd1206/MapServer/tile/{z}/{y}/{x}",
        center: [10800, -4900],
        resolution: 4.233341800016934,
        origin: [-5123200.0, 10002100],
        projection: 'EPSG:4548',
        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: [
            16.933367200067735, 8.466683600033868, 4.233341800016934,
            2.116670900008467, 1.0583354500042335, 0.5291677250021167,
            0.26458386250105836
            0.00015228550437313792, 0.00007614275218656896, 0.00003807137609328448,
            0.00001903568804664224, 0.00000951784402332112, 0.00000475892201166056
        ],
        fullExtent: [
            -0.5, -11468.5, 18506.5,
            0.5,
            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],
        projection: '4548',
        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: ''
        polygonUrl: 'https://fkxt.jxstnu.edu.cn/changjing/fllkarcgisapp'
    }
]

@@ -168,11 +164,16 @@
                    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.$store.commit('SET_SEARCHPOPUPFLAG', false)

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

                    this.$refs.leftNav.initialize(newData)

                    this.$refs.campusNavRoute.closeModel()

                    this.createdLayers(newData)
                })
@@ -214,8 +215,9 @@

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

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

            this.map2D.on("singleclick", function (event) {
@@ -224,7 +226,7 @@
                let flag = true

                that.map2D.forEachFeatureAtPixel(
                    event.pixel,
                    [event.originalEvent.offsetX, event.originalEvent.offsetY],
                    (feature) => {
                        if (flag == false) {
                            return
@@ -239,6 +241,7 @@
            })
        })
    },

    methods: {
        createdLayers (campusKey) {
            const that = this
@@ -302,7 +305,7 @@
            select = null

            that.map2D.forEachFeatureAtPixel(
                event.pixel,
                [event.originalEvent.offsetX, event.originalEvent.offsetY],
                (feature) => {
                    if (flag == false) {
                        return
@@ -356,17 +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

                let curLngLat = this.map2D.getCoordinateFromPixel([event.event.originalEvent.offsetX, event.event.originalEvent.offsetY])

                this.$store.dispatch('setOurDataInPoput', {
                    item: result
                    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
                })
@@ -385,23 +392,23 @@

        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: curCampus.projection,
                projection: "EPSG:4326",
                url: curCampus.tileUrl,
            })

@@ -431,7 +438,7 @@
                // 初始化中心点坐标
                center: curCampus.center,
                resolution: curCampus.resolution,
                // projection: curCampus.projection,
                projection: "EPSG:4326",
                extent: curCampus.fullExtent,
            }))
        }