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/map/index.vue | 166 +++++++++++++++++++++++++++++--------------------------
1 files changed, 88 insertions(+), 78 deletions(-)
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 8501a1e..73bdbc9 100644
--- a/src/components/map/index.vue
+++ b/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,
--
Gitblit v1.9.3