From 58060e64e1fa9cf3ffcf5e29f09c4c2edf8f2126 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 21 Jul 2022 17:25:34 +0800
Subject: [PATCH] 数据显示更换
---
src/components/mobilemap/index.vue | 306 +++++++++++++++++++++++++++++---------------------
1 files changed, 176 insertions(+), 130 deletions(-)
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index 261b43b..9336258 100644
--- a/src/components/mobilemap/index.vue
+++ b/src/components/mobilemap/index.vue
@@ -48,8 +48,8 @@
var baseLayers = []
-let viewerHeight = 500
-let heightChange = 500
+let viewerHeight = 800
+let heightChange = 800
let tilesetLayer = null
@@ -121,7 +121,7 @@
],
// areaLayer: null,
// mapCenter: [115.871863, 28.743861, 160.0],
- mapCenter: [114.03948009, 27.63018386, 500.0],
+ mapCenter: [116.02680670, 28.68340803, 800.0],
// mapCenter: [116.35381525 - 0.00035, 27.95839468 + 0.0025, 160.0],
// 控制4层缩放
// onelayerNum: 80,
@@ -131,15 +131,15 @@
// intervallayerNum: 20,
// frislayertHeight: 120, // 默认高度
onelayerNum: 100,
- twolayerNum: 200,
- threelayerNum: 300,
- fourlayerNum: 400,
- fivelayerNum: 500,
+ twolayerNum: 300,
+ threelayerNum: 500,
+ fourlayerNum: 800,
+ fivelayerNum: 1000,
sixlayerNum: null,
intervallayerNum: 50,
- frislayertHeight: 500, // 默认高度
+ frislayertHeight: 800, // 默认高度
useZoom: false, // 是否缩放 true 去掉了缩放， 抚州 false
addOthers: false // 加入了活动底图以及抚州底图 抚州 true
}
@@ -157,7 +157,8 @@
'dimensionData',
// "areaLayer", // 绿布
// "areaLayerSelect", // 绿布颜色控制
- 'urlParameterData' // url 参数
+ 'urlParameterData', // url 参数
+ 'pinchFlag'
])
},
watch: {
@@ -178,7 +179,7 @@
const that = this
if (that.titlesetLayerFlag == false && newCode == true) {
global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({
- url: '/img/bg/map.jpg'
+ url: '/img/bg/bg.png'
}))
silhouetteBlue =
@@ -215,20 +216,46 @@
that.dimensionData.roll
),
() => {
- baseLayerImgUrl.forEach((item, index) => {
- var obj = {}
- obj[Object.keys(item)[0]] = []
- Object.values(item)[0].forEach(citem => {
- var layer = new global.DC.Namespace.Cesium.SingleTileImageryProvider({
- url: citem.url,
- rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(citem.rectangle[0], citem.rectangle[1], citem.rectangle[2], citem.rectangle[3])
- })
- obj[Object.keys(item)[0]].push({ layer, id: citem.id + Object.keys(item)[0], rectangle: citem.rectangle })
- })
- baseLayers.push(obj)
- })
+ // baseLayerImgUrl.forEach((item, index) => {
+ // var obj = {}
+ // obj[Object.keys(item)[0]] = []
+ // Object.values(item)[0].forEach(citem => {
+ // var layer = new global.DC.Namespace.Cesium.SingleTileImageryProvider({
+ // url: citem.url,
+ // rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(citem.rectangle[0], citem.rectangle[1], citem.rectangle[2], citem.rectangle[3])
+ // })
+ // obj[Object.keys(item)[0]].push({ layer, id: citem.id + Object.keys(item)[0], rectangle: citem.rectangle })
+ // })
+ // baseLayers.push(obj)
+ // })
+
+ // global.viewer.imageryLayers.addImageryProvider(
+ // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ // url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
+ // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ // format: 'image/jpeg',
+ // show: true,
+ // maximumLevel: 18
+ // })
+ // )
+
+ // global.viewer.imageryLayers.addImageryProvider(
+ // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ // url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
+ // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ // format: 'image/jpeg',
+ // show: true,
+ // maximumLevel: 18
+ // })
+ // )
that.addBaseLayer()
+
+ // global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ // url: '/wp/{z}/{x}/{y}.png',
+ // fileExtension: 'png'
+ // // minimumLevel: 19
+ // }))
},
0
)
@@ -236,7 +263,7 @@
// 2.5D视角限制
global.viewer.scene.screenSpaceCameraController.minimumZoomDistance = that.zoomRange[0]
// 最大
- global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = that.zoomRange[1]
+ // global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = that.zoomRange[1]
// 设置相机缩小时的速率
global.viewer.scene.screenSpaceCameraController._minimumZoomRate = 2000
// 设置相机放大时的速率
@@ -382,7 +409,9 @@
})
// 地图点击事件
global.viewer.on(global.DC.MouseEventType.CLICK, (e) => {
- // console.log(e);
+ if (that.pinchFlag == true) {
+ return
+ }
if (e.overlay != undefined && e.layer.id == 'areaLayer') {
if (window.select.overlay != undefined) {
if (e.overlay != window.select.overlay) {
@@ -473,114 +502,128 @@
}
})
- that.$nextTick(() => {
- document.querySelector('.dc-zoom-controller').children[0].onclick = function () {
- const scene = global.viewer.scene
- const camera = scene.camera
+ // 双指事件
+ var scene = global.viewer.scene
+ var handler = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(scene.canvas)
- const focus = that._getCameraFocus(scene)
- const cameraPosition = that._getCameraPosition(camera, focus, 1 / 2)
- camera.flyTo({
- destination: cameraPosition,
- orientation: {
- heading: camera.heading,
- pitch: camera.pitch,
- roll: camera.roll
- },
- duration: 0.5,
- convert: false,
- complete: function () {
- var height = global.viewer.camera.positionCartographic.height
+ // 开始
+ handler.setInputAction(function (e) {
+ that.$store.commit('SET_PINCHFLAG', true)
+ }, global.DC.Namespace.Cesium.ScreenSpaceEventType.PINCH_START)
- if (that.dimension == '2.5D') {
- if (height < 98) {
- global.viewer.camera.setView({
- destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
- global.viewer.camera.positionCartographic.longitude,
- global.viewer.camera.positionCartographic.latitude,
- 100
- ),
- orientation: {
- // 指向
- heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0
- }
- })
+ // 结束
+ handler.setInputAction(function (e) {
+ that.$store.commit('SET_PINCHFLAG', false)
+ }, global.DC.Namespace.Cesium.ScreenSpaceEventType.PINCH_END)
- return
- }
+ // that.$nextTick(() => {
+ // document.querySelector('.dc-zoom-controller').children[0].onclick = function () {
+ // const scene = global.viewer.scene
+ // const camera = scene.camera
- if (height > that.fivelayerNum - that.intervallayerNum) {
- viewerHeight = that.fivelayerNum
- } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) {
- viewerHeight = that.fourlayerNum
- } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) {
- viewerHeight = that.threelayerNum
- } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) {
- viewerHeight = that.twolayerNum
- } else if (height <= that.onelayerNum + that.intervallayerNum) {
- viewerHeight = that.onelayerNum
- }
- }
- }
- })
- }
+ // const focus = that._getCameraFocus(scene)
+ // const cameraPosition = that._getCameraPosition(camera, focus, 1 / 2)
+ // camera.flyTo({
+ // destination: cameraPosition,
+ // orientation: {
+ // heading: camera.heading,
+ // pitch: camera.pitch,
+ // roll: camera.roll
+ // },
+ // duration: 0.5,
+ // convert: false,
+ // complete: function () {
+ // var height = global.viewer.camera.positionCartographic.height
- document.querySelector('.dc-zoom-controller').children[2].onclick = function () {
- const scene = global.viewer.scene
- const camera = scene.camera
+ // if (that.dimension == '2.5D') {
+ // if (height < 98) {
+ // global.viewer.camera.setView({
+ // destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ // global.viewer.camera.positionCartographic.longitude,
+ // global.viewer.camera.positionCartographic.latitude,
+ // 100
+ // ),
+ // orientation: {
+ // // 指向
+ // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // // 视角
+ // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
+ // roll: 0.0
+ // }
+ // })
- const focus = that._getCameraFocus(scene)
- const cameraPosition = that._getCameraPosition(camera, focus, -1)
- camera.flyTo({
- destination: cameraPosition,
- orientation: {
- heading: camera.heading,
- pitch: camera.pitch,
- roll: camera.roll
- },
- duration: 0.5,
- convert: false,
- complete: function () {
- var height = global.viewer.camera.positionCartographic.height
- if (that.dimension == '2.5D') {
- if (height > 702) {
- global.viewer.camera.setView({
- destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
- global.viewer.camera.positionCartographic.longitude,
- global.viewer.camera.positionCartographic.latitude,
- 702
- ),
- orientation: {
- // 指向
- heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0
- }
- })
+ // return
+ // }
- return
- }
+ // if (height > that.fivelayerNum - that.intervallayerNum) {
+ // viewerHeight = that.fivelayerNum
+ // } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) {
+ // viewerHeight = that.fourlayerNum
+ // } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) {
+ // viewerHeight = that.threelayerNum
+ // } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) {
+ // viewerHeight = that.twolayerNum
+ // } else if (height <= that.onelayerNum + that.intervallayerNum) {
+ // viewerHeight = that.onelayerNum
+ // }
+ // }
+ // }
+ // })
+ // }
- if (height > that.fivelayerNum - that.intervallayerNum) {
- viewerHeight = that.fivelayerNum
- } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) {
- viewerHeight = that.fourlayerNum
- } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) {
- viewerHeight = that.threelayerNum
- } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) {
- viewerHeight = that.twolayerNum
- } else if (height <= that.onelayerNum + that.intervallayerNum) {
- viewerHeight = that.onelayerNum
- }
- }
- }
- })
- }
- })
+ // document.querySelector('.dc-zoom-controller').children[2].onclick = function () {
+ // const scene = global.viewer.scene
+ // const camera = scene.camera
+
+ // const focus = that._getCameraFocus(scene)
+ // const cameraPosition = that._getCameraPosition(camera, focus, -1)
+ // camera.flyTo({
+ // destination: cameraPosition,
+ // orientation: {
+ // heading: camera.heading,
+ // pitch: camera.pitch,
+ // roll: camera.roll
+ // },
+ // duration: 0.5,
+ // convert: false,
+ // complete: function () {
+ // var height = global.viewer.camera.positionCartographic.height
+ // if (that.dimension == '2.5D') {
+ // if (height > 702) {
+ // global.viewer.camera.setView({
+ // destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ // global.viewer.camera.positionCartographic.longitude,
+ // global.viewer.camera.positionCartographic.latitude,
+ // 702
+ // ),
+ // orientation: {
+ // // 指向
+ // heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // // 视角
+ // pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
+ // roll: 0.0
+ // }
+ // })
+
+ // return
+ // }
+
+ // if (height > that.fivelayerNum - that.intervallayerNum) {
+ // viewerHeight = that.fivelayerNum
+ // } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) {
+ // viewerHeight = that.fourlayerNum
+ // } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) {
+ // viewerHeight = that.threelayerNum
+ // } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) {
+ // viewerHeight = that.twolayerNum
+ // } else if (height <= that.onelayerNum + that.intervallayerNum) {
+ // viewerHeight = that.onelayerNum
+ // }
+ // }
+ // }
+ // })
+ // }
+ // })
that.mapMouseMove()
@@ -712,8 +755,8 @@
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)
+ // console.log('经度：' + minx + '----' + maxx)
+ // console.log('纬度：' + miny + '----' + maxy)
params.minx = minx
params.maxx = maxx
@@ -739,7 +782,7 @@
query: { introduce: position, address: lntLat, ...(query || {}) },
useJWD: true // 仅使用经纬度
}
- console.log(d)
+ // console.log(d)
that.$store.dispatch('setMobileWindows', d)
},
@@ -771,7 +814,7 @@
updateBaseLayer (flag) {
const extent = this.getViewExtend()
- const array = baseLayers.filter(item => {
+ const array = baseLayerImgUrl.filter(item => {
return item[viewerHeight]
})
@@ -841,7 +884,10 @@
sm.rectangle[3] < extent.maxy
)
) {
- var layer = global.viewer.imageryLayers.addImageryProvider(sm.layer)
+ 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 })
}
@@ -944,7 +990,7 @@
// 2.5D视角限制
global.viewer.scene.screenSpaceCameraController.minimumZoomDistance = that.zoomRange[0]
// 最大
- global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = that.zoomRange[1]
+ // global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = that.zoomRange[1]
// 设置相机缩小时的速率
global.viewer.scene.screenSpaceCameraController._minimumZoomRate = 2000
// 设置相机放大时的速率
--
Gitblit v1.9.3