From e733164e1c779b3aef7245936b9daf7875bf791e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 14 Dec 2023 17:12:33 +0800
Subject: [PATCH] 解决屏幕缩放导致鼠标位置不准确的问题，右侧，切换校区后的显示BUG
---
src/components/mobilemap/index.vue | 183 +++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 172 insertions(+), 11 deletions(-)
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index 7ed28b2..82e3d8b 100644
--- a/src/components/mobilemap/index.vue
+++ b/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;
}
--
Gitblit v1.9.3