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

shuishen

2023-12-14 e733164e1c779b3aef7245936b9daf7875bf791e

 src/components/mobilemap/index.vue

@@ -1,6 +1,25 @@
<template>
    <div class="mobile-map-container">
        <div id="sceneview"></div>

        <mobileCortrolSearch ref="mobileCortrolSearch">
            <template slot="selectCampusBox">
                <div class="select-campus-box" v-if="campusData.length > 1">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link icons">
                            {{ campusData.find(item => item.dictKey == campusValue).dictValue }} <i
                                class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="(item, index) in campusData" :key="index" :command="item">
                                {{ item.dictValue }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </template>
        </mobileCortrolSearch>

        <!-- 随地图改变图标弹窗↓ -->
        <div id="mobile-map_popup_content"></div>
        <mobileWindow ref="MobileWindow"></mobileWindow>
@@ -12,11 +31,10 @@
        <mobileCortrol ref="mobileCortrol"></mobileCortrol>
        <mobileCortrolButtom ref="mobileCortrolButtom" :mapCenter="mapCenter" :frislayertHeight="frislayertHeight">
        </mobileCortrolButtom>
        <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
        <!-- 控制↑ -->
        <!-- 控制大弹窗的弹窗 -->
        <!-- v-if="mBigPopupAfter" -->
        <mobilePopupOurAfter></mobilePopupOurAfter>
        <mobilePopupOurAfter ref="MobilePopupOurAfter"></mobilePopupOurAfter>
        <!-- 大弹窗 -->
        <mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur>
        <!-- 测试-跳转位置 -->
@@ -24,7 +42,7 @@
        <!-- 实景窗口 -->
        <mobilePanorama></mobilePanorama>
        <!-- 退出导航 -->
        <mobileCloseRouter></mobileCloseRouter>
        <mobileCloseRouter ref="MobileCloseRouter"></mobileCloseRouter>
        <!-- 退出活动 -->
        <mobileCloseRouterMany></mobileCloseRouterMany>
        <!-- 活动窗口 -->
@@ -37,6 +55,7 @@
import axios from 'axios'
import { mapGetters } from 'vuex'
import { getBuildClock } from '@/api/mobile/buildsClock/buildsClock' // 楼栋详情
import { getListarc } from '@/api/mobile/public/arc'

import OlView from "ol/View.js"

@@ -62,34 +81,35 @@
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.613918275550715, -0.0457081387615907618595],
        resolution: 0.00001903568804664224,
        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.6202242373625, -0.0781745423945008147645],
        resolution: 0.00001903568804664224,
        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'
    }
]

@@ -132,7 +152,8 @@
                height: 0
            },
            map2D: this.$store.state.openlayerData.openlayers.map2D,
            campusValue: ''
            campusData: [],
            campusValue: 1
        }
    },

@@ -152,6 +173,8 @@
        campusValue: {
            handler (newData) {
                this.$nextTick(() => {
                    this.$refs.MobileCloseRouter.mobileRouterClose()

                    this.campusCut(newData)

                    this.$refs.mobileLeftNav.initialize(newData)
@@ -160,6 +183,10 @@
                })
            }
        }
    },

    created () {
        this.getStreet()
    },

    mounted () {
@@ -304,7 +331,8 @@
            const that = this

            getBuildClock({
                mechanismname: event.target.values_.attributes['楼栋号']
                mechanismname: event.target.values_.attributes['楼栋号'],
                campus: this.campusValue
            }).then((res) => {
                if (JSON.stringify(res.data.data) == '{}') return
                const item = res.data.data
@@ -367,8 +395,8 @@
            })
            // 瓦片数据源
            const tileArcGISXYZ = new XYZ({
                tileGrid: tileGrid,
                projection: "EPSG:4326",
                tileGrid: tileGrid,
                url: curCampus.tileUrl,
            })

@@ -396,15 +424,29 @@

            this.map2D.setView(new OlView({
                // 初始化中心点坐标
                projection: "EPSG:4326",
                center: curCampus.center,
                resolution: curCampus.resolution,
                projection: "EPSG:4326",
                extent: curCampus.fullExtent,
            }))
        },

        setCampusValue (val) {
            this.campusValue = val

            this.$store.commit('SET_CURRENTCAMPUS', val)
        },

        handleCommand (command) {
            this.$refs.MobilePopupOurAfter.closeBigPopupAfter()
            this.setCampusValue(command.dictKey)
        },

        getStreet () {
            getListarc().then((res) => {
                this.setCampusValue(res.data.data[0].dictKey)
                this.campusData = res.data.data
            })
        }
    }
}
@@ -428,6 +470,17 @@
    /* overflow: hidden; */
}

.select-campus-box {
    width: 28%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #f1f1f1;
    border-right: 1px solid #C0C4CC;
    box-sizing: border-box;
    z-index: 299;
}

.esri-view-surface--inset-outline:focus::after {
    outline: none !important;
}