From 75c50fbce61fcd54295ea4347ebf516990b583ee Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 13 Apr 2022 10:40:26 +0800
Subject: [PATCH] 图片更换等，逻辑修改
---
src/components/mobilemap/index.vue | 213 +++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 183 insertions(+), 30 deletions(-)
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index f86dfa7..c8e1ba6 100644
--- a/src/components/mobilemap/index.vue
+++ b/src/components/mobilemap/index.vue
@@ -42,7 +42,7 @@
let baseLayer = []
-let viewerHeight = 240
+let viewerHeight = 500
// baselayer
window.baselayer = null
@@ -114,25 +114,25 @@
],
// areaLayer: null,
// mapCenter: [115.871863, 28.743861, 160.0],
- mapCenter: [114.03928009, 27.63018386, 160.0],
+ mapCenter: [114.03948009, 27.63018386, 500.0],
// mapCenter: [116.35381525 - 0.00035, 27.95839468 + 0.0025, 160.0],
// 控制4层缩放
// onelayerNum: 80,
// towlayerNum: 120,
// threelayerNum: 160,
- // forlayerNum: null,
+ // fourlayerNum: null,
// intervallayerNum: 20,
// frislayertHeight: 120, // 默认高度
- onelayerNum: 60,
- towlayerNum: 120,
- threelayerNum: 180,
- forlayerNum: 240,
+ onelayerNum: 100,
+ towlayerNum: 200,
+ threelayerNum: 300,
+ fourlayerNum: 400,
- fivelayerNum: null,
+ fivelayerNum: 500,
sixlayerNum: null,
- intervallayerNum: 18,
- frislayertHeight: 240, // 默认高度
+ intervallayerNum: 36,
+ frislayertHeight: 500, // 默认高度
useZoom: false, // 是否缩放 true 去掉了缩放， 抚州 false
addOthers: false // 加入了活动底图以及抚州底图 抚州 true
}
@@ -178,7 +178,7 @@
this.onelayerNum = 100
this.towlayerNum = 300
this.threelayerNum = 500
- this.forlayerNum = 700
+ this.fourlayerNum = 700
this.fivelayerNum = null
this.sixlayerNum = null
@@ -313,12 +313,12 @@
// if (height > 200 && isSet) {
// conBack(200);
// }
- // const usMun = that.forlayerNum ? that.forlayerNum : that.threelayerNum;
+ // const usMun = that.fourlayerNum ? that.fourlayerNum : that.threelayerNum;
const usMun = that.sixlayerNum
? that.sixlayerNum
: that.fivelayerNum
? that.fivelayerNum
- : that.forlayerNum
+ : that.fourlayerNum
if (window.height1s > usMun && isSet) {
if (that.useZoom) {
return
@@ -770,12 +770,12 @@
that.$store.commit('set_frislayertHeight', that.frislayertHeight) // 送入默认弹窗高度
that.$store.commit('set_zoomRange', [
that.onelayerNum,
- // that.forlayerNum ? that.forlayerNum : that.threelayerNum,
+ // that.fourlayerNum ? that.fourlayerNum : that.threelayerNum,
that.sixlayerNum
? that.sixlayerNum
: that.fivelayerNum
? that.fivelayerNum
- : that.forlayerNum,
+ : that.fourlayerNum,
that.useZoom,
that.addOthers
]) // 送入移动端缩放范围
@@ -893,6 +893,60 @@
})
},
methods: {
+ getViewExtend () {
+ const params = {}
+ const extend = global.viewer.camera.computeViewRectangle()
+ if (typeof extend === 'undefined') {
+ // 2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
+ const canvas = global.viewer.scene.canvas
+ const upperLeft = new global.DC.Namespace.Cesium.Cartesian2(0, 0)// canvas左上角坐标转2d坐标
+ const lowerRight = new global.DC.Namespace.Cesium.Cartesian2(
+ canvas.clientWidth,
+ canvas.clientHeight
+ )// canvas右下角坐标转2d坐标
+
+ const ellipsoid = global.viewer.scene.globe.ellipsoid
+ const upperLeft3 = global.viewer.camera.pickEllipsoid(
+ upperLeft,
+ ellipsoid
+ )// 2D转3D世界坐标
+
+ const lowerRight3 = global.viewer.camera.pickEllipsoid(
+ lowerRight,
+ ellipsoid
+ )// 2D转3D世界坐标
+
+ const upperLeftCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic(
+ upperLeft3
+ )// 3D世界坐标转弧度
+ const lowerRightCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic(
+ lowerRight3
+ )// 3D世界坐标转弧度
+
+ const minx = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.longitude)// 弧度转经纬度
+ const maxx = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.longitude)// 弧度转经纬度
+
+ const miny = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.latitude)// 弧度转经纬度
+ const maxy = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.latitude)// 弧度转经纬度
+
+ console.log('经度：' + minx + '----' + maxx)
+ console.log('纬度：' + miny + '----' + maxy)
+
+ params.minx = minx
+ params.maxx = maxx
+ params.miny = miny
+ params.maxy = maxy
+ } else {
+ // 3D获取方式
+ params.maxx = global.DC.Namespace.Cesium.Math.toDegrees(extend.east)
+ params.maxy = global.DC.Namespace.Cesium.Math.toDegrees(extend.north)
+
+ params.minx = global.DC.Namespace.Cesium.Math.toDegrees(extend.west)
+ params.miny = global.DC.Namespace.Cesium.Math.toDegrees(extend.south)
+ }
+ return params // 返回屏幕所在经纬度范围
+ },
+
openPopupS (position, lntLat, query) {
const that = this
// 定制化窗体
@@ -905,6 +959,7 @@
console.log(d)
that.$store.dispatch('setMobileWindows', d)
},
+
flytos (jd, wd) {
const height = this.frislayertHeight
this.$store.dispatch('mapFlyTo', {
@@ -915,30 +970,104 @@
noOpen: true
})
},
+
addBaseLayer () {
if (baseLayer.length > 0) {
baseLayer.forEach(item => {
global.viewer.imageryLayers.remove(
- item
+ item.layer
)
})
}
baseLayer = []
+ this.updateBaseLayer(false)
+ },
+
+ updateBaseLayer (flag) {
+ const extent = this.getViewExtend()
baseLayerImgUrl.forEach(item => {
if (item[viewerHeight]) {
item[viewerHeight].forEach(sm => {
- var layer = global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({
- url: `${sm.url}?m=${Math.random()}`,
- rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(sm.rectangle[0], sm.rectangle[1], sm.rectangle[2], sm.rectangle[3])
- }))
+ let startFlag = true
- baseLayer.push(layer)
+ if (flag == true) {
+ baseLayer.forEach(dt => {
+ if (dt.id == sm.id) startFlag = false
+ })
+ }
+
+ if (startFlag == false) return
+
+ if (
+ (
+ sm.rectangle[0] > extent.minx &&
+ sm.rectangle[1] > extent.miny &&
+ sm.rectangle[2] < extent.maxx &&
+ sm.rectangle[3] < extent.maxy
+ ) ||
+ (
+ sm.rectangle[0] < extent.minx &&
+ sm.rectangle[1] < extent.maxy &&
+ sm.rectangle[2] > extent.minx &&
+ sm.rectangle[3] > extent.maxy
+ ) ||
+ (
+ sm.rectangle[0] < extent.maxx &&
+ sm.rectangle[1] < extent.maxy &&
+ sm.rectangle[2] > extent.maxx &&
+ sm.rectangle[3] > extent.maxy
+ ) ||
+ (
+ sm.rectangle[0] < extent.maxx &&
+ sm.rectangle[1] < extent.miny &&
+ sm.rectangle[2] > extent.maxx &&
+ sm.rectangle[3] > extent.miny
+ ) ||
+ (
+ sm.rectangle[0] < extent.minx &&
+ sm.rectangle[1] < extent.miny &&
+ sm.rectangle[2] > extent.minx &&
+ sm.rectangle[3] > extent.miny
+ ) ||
+ (
+ sm.rectangle[0] > extent.minx &&
+ sm.rectangle[1] < extent.maxy &&
+ sm.rectangle[2] < extent.maxx &&
+ sm.rectangle[3] > extent.maxy
+ ) ||
+ (
+ sm.rectangle[0] > extent.minx &&
+ sm.rectangle[1] > extent.miny &&
+ sm.rectangle[2] > extent.maxx &&
+ sm.rectangle[3] < extent.maxy
+ ) ||
+ (
+ sm.rectangle[0] > extent.minx &&
+ sm.rectangle[1] < extent.miny &&
+ sm.rectangle[2] < extent.maxx &&
+ sm.rectangle[3] > extent.miny
+ ) ||
+ (
+ sm.rectangle[0] < extent.minx &&
+ sm.rectangle[1] > extent.miny &&
+ sm.rectangle[2] > extent.minx &&
+ sm.rectangle[3] < extent.maxy
+ )
+ ) {
+ var layer = global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({
+ url: sm.url,
+ rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(sm.rectangle[0], sm.rectangle[1], sm.rectangle[2], sm.rectangle[3])
+ }))
+
+ baseLayer.push({ layer, id: sm.id })
+ }
})
}
})
},
+
// 按钮控制视图改变得事件
controlButton () {
const that = this
@@ -948,7 +1077,12 @@
return
}
if (that.dimension == '2.5D') {
- if (viewerHeight == that.forlayerNum) {
+ if (viewerHeight == that.fivelayerNum) {
+ that.butSetViews(that.fourlayerNum)
+ return
+ }
+
+ if (viewerHeight == that.fourlayerNum) {
that.butSetViews(that.threelayerNum)
return
}
@@ -982,11 +1116,17 @@
}
if (viewerHeight == that.threelayerNum) {
- that.butSetViews(that.forlayerNum)
+ that.butSetViews(that.fourlayerNum)
+ return
+ }
+
+ if (viewerHeight == that.fourlayerNum) {
+ that.butSetViews(that.fivelayerNum)
}
}
}
},
+
// 位置更改并且重新加载视图
butSetViews (num) {
viewerHeight = num
@@ -1008,6 +1148,7 @@
this.addBaseLayer()
},
+
// 手动控制地图缩放得
mapMouseMove () {
const that = this
@@ -1016,11 +1157,19 @@
if (that.useZoom) {
return
}
+
if (that.dimension == '2.5D') {
var height = global.viewer.camera.positionCartographic.height
if (that.startWheel == true) {
if (height < viewerHeight - that.intervallayerNum) {
- if (viewerHeight == that.forlayerNum) {
+ if (viewerHeight == that.fivelayerNum) {
+ that.butSetViews(that.fourlayerNum)
+
+ that.startWheel = false
+ return
+ }
+
+ if (viewerHeight == that.fourlayerNum) {
that.butSetViews(that.threelayerNum)
that.startWheel = false
@@ -1055,7 +1204,14 @@
}
if (viewerHeight == that.threelayerNum) {
- that.butSetViews(that.forlayerNum)
+ that.butSetViews(that.fourlayerNum)
+
+ that.startWheel = false
+ return
+ }
+
+ if (viewerHeight == that.fourlayerNum) {
+ that.butSetViews(that.fivelayerNum)
that.startWheel = false
}
@@ -1079,6 +1235,8 @@
}
}
+ that.updateBaseLayer(true)
+
setTimeout(() => {
that.startWheel = true
}, 100)
@@ -1094,11 +1252,6 @@
width: 100%;
height: 100%;
position: relative;
- // canvas {
- // width: 300%;
- // height: 300%;
- // transform: translate(-50%, -50%);
- // }
}
.heights {
background-color: #fff;
--
Gitblit v1.9.3