解决屏幕缩放导致鼠标位置不准确的问题，右侧，切换校区后的显示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,19 +55,65 @@
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"

import OlLayerTile from "ol/layer/Tile.js"

import XYZ from "ol/source/XYZ"

import VectorLayer from "ol/layer/Vector"
import VectorSource from "ol/source/Vector"

import { OverviewMap, defaults } from "ol/control"
import { Polygon } from 'ol/geom'

import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import { Icon, Style, Fill, Text, Stroke, Circle } from 'ol/style.js'
import TilegridTileGrid from "ol/tilegrid/TileGrid"

let architecturePolygon = null
let select = null
let sitePositionLayer = null

let campusLayers = [
    {
        key: 1,
        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.00015228550437313792, 0.00007614275218656896, 0.00003807137609328448,
            0.00001903568804664224, 0.00000951784402332112, 0.00000475892201166056
        ],
        fullExtent: [
            112.51303616638316, -0.103420786429659, 112.67880038471827,
            0.000004508906477476281
        ],
        polygonUrl: 'https://fkxt.jxstnu.edu.cn/changjing/lkarcgisapp'
    },

    {
        key: 2,
        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.00015228550437313792, 0.00007614275218656896, 0.00003807137609328448,
            0.00001903568804664224, 0.00000951784402332112, 0.00000475892201166056
        ],
        fullExtent: [
            112.51302551881798, -0.16235359398493399, 112.72742295590702, 0.000004509195932360471
        ],
        polygonUrl: 'https://fkxt.jxstnu.edu.cn/changjing/fllkarcgisapp'
    }
]

let campusLoadLayer

export default {
    name: 'mobilemapBox',
@@ -87,7 +151,9 @@
                width: 0,
                height: 0
            },
            map2D: this.$store.state.openlayerData.openlayers.map2D
            map2D: this.$store.state.openlayerData.openlayers.map2D,
            campusData: [],
            campusValue: 1
        }
    },

@@ -102,18 +168,32 @@
                this.bigPopup.height = '0'
                this.bigPopup.display = 'none'
            }
        },

        campusValue: {
            handler (newData) {
                this.$nextTick(() => {
                    this.$refs.MobileCloseRouter.mobileRouterClose()

                    this.campusCut(newData)

                    this.$refs.mobileLeftNav.initialize(newData)

                    this.createdLayers(newData)
                })
            }
        }
    },

    created () {
        this.getStreet()
    },

    mounted () {
        const that = this
        this.map2D.setTarget('sceneview')
        this.map2D.getView().setResolution(0.00009517844023321122)

        this.$nextTick(() => {
            that.$refs.mobileLeftNav.initialize()

            sitePositionLayer = new VectorLayer({
                // 图标图层
                zIndex: 99,
@@ -122,7 +202,6 @@

            this.map2D.addLayer(sitePositionLayer)

            this.createdLayers()

            this.map2D.on("singleclick", function (event) {
                let flag = true
@@ -206,9 +285,13 @@
            select = null
        },

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

            if (architecturePolygon) {
                this.map2D.removeLayer(architecturePolygon)
            }
            architecturePolygon = new VectorLayer({
                // 图标图层
                source: new VectorSource(),
@@ -218,7 +301,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) => {
@@ -248,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
@@ -298,6 +382,72 @@
                )
            }
        },

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

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

            campusLoadLayer = new OlLayerTile({
                source: tileArcGISXYZ,
            })

            this.map2D.addLayer(campusLoadLayer)


            this.map2D.controls = defaults().extend([
                // 添加一个鹰眼控件
                new OverviewMap({
                    // 实例化一个OverviewMap类的对象，并加入到地图中
                    collapsed: false,
                    view: new OlView({
                        // 初始化中心点坐标
                        center: curCampus.center,
                    }),
                    layers: [
                        campusLoadLayer
                    ]
                })
            ])

            this.map2D.setView(new OlView({
                // 初始化中心点坐标
                projection: "EPSG:4326",
                center: curCampus.center,
                resolution: curCampus.resolution,
                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
            })
        }
    }
}
</script>
@@ -320,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;
}