From 3dc278f10a4c3e3db7ce3a445bed710bdc88916e Mon Sep 17 00:00:00 2001
From: xiebin <123456>
Date: Wed, 16 Nov 2022 17:10:51 +0800
Subject: [PATCH] 基地信息坐标有误差的问题
---
src/components/splitScreen/index.vue | 437 ++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 406 insertions(+), 31 deletions(-)
diff --git a/src/components/splitScreen/index.vue b/src/components/splitScreen/index.vue
index 29d7def..acca634 100644
--- a/src/components/splitScreen/index.vue
+++ b/src/components/splitScreen/index.vue
@@ -2,16 +2,48 @@
<template>
<div class="current-wrapper" style="height: 100%; width: 100%; position: relative;">
<div class="map-box" id="viewer-container-one">
- <select-time ref="leftRoller" :type="'viewerOne'" class="time"></select-time>
+ <div class="selectname">
+ <select-name ref="selectNameOne" @selectItem="selectItemOne" :value="currentTitle" :selectList="farmSelectList"></select-name>
+ </div>
+ <select-time
+ ref="ViewerOne"
+ :type="'viewerOne'"
+ class="time"
+ :selectList="viewerOneLayers"
+ ></select-time>
</div>
<div class="map-box" id="viewer-container-two">
- <select-time ref="leftRoller" :type="'viewerTwo'" class="time"></select-time>
+ <div class="selectname">
+ <select-name ref="selectNameTwo" @selectItem="selectItemTwo" :value="currentTitle" :selectList="farmSelectList"></select-name>
+ </div>
+ <select-time
+ ref="ViewerTwo"
+ :type="'viewerTwo'"
+ class="time"
+ :selectList="viewerTwoLayers"
+ ></select-time>
</div>
<div class="map-box" id="viewer-container-three">
- <select-time ref="leftRoller" :type="'viewerThree'" class="time"></select-time>
+ <div class="selectname">
+ <select-name ref="selectNameThree" @selectItem="selectItemThree" :value="currentTitle" :selectList="farmSelectList"></select-name>
+ </div>
+ <select-time
+ ref="ViewerThree"
+ :type="'viewerThree'"
+ class="time"
+ :selectList="viewerThreeLayers"
+ ></select-time>
</div>
<div class="map-box" id="viewer-container-four">
- <select-time ref="leftRoller" :type="'viewerFour'" class="time"></select-time>
+ <div class="selectname">
+ <select-name ref="selectNameFour" @selectItem="selectItemFour" :value="currentTitle" :selectList="farmSelectList"></select-name>
+ </div>
+ <select-time
+ ref="ViewerFour"
+ :type="'viewerFour'"
+ class="time"
+ :selectList="viewerFourLayers"
+ ></select-time>
</div>
<div class="line-row"></div>
@@ -20,6 +52,7 @@
</template>
<script>
+import { viewdata } from '@/assets/viewdata.js'
window.viewerOne = null
window.viewerTwo = null
window.viewerThree = null
@@ -35,13 +68,283 @@
data () {
return {
- rollerCloseShow: false
+ rollerCloseShow: false,
+ viewerOneLayers: [],
+ viewerTwoLayers: [],
+ viewerThreeLayers: [],
+ viewerFourLayers: [],
+ farmSelectList: viewdata,
+ currentTitle: viewdata[0].name
}
},
- computed: {
-
+ created () {
+ // 初始化数据
+ this.viewerOneLayers = this.farmSelectList[0].childItem
+ this.viewerTwoLayers = this.farmSelectList[0].childItem
+ this.viewerThreeLayers = this.farmSelectList[0].childItem
+ this.viewerFourLayers = this.farmSelectList[0].childItem
+ this.$refs.ViewerOne.init()
+ this.$refs.ViewerTwo.init()
+ this.$refs.ViewerThree.init()
+ this.$refs.ViewerFour.init()
+ // this.viewerOneLayers = [{
+ // title: '2022年5月影像',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ // layer: 'nanchengdom',
+ // style: 'default',
+ // tileMatrixSetID: 'default028mm',
+ // format: 'image/png',
+ // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // maximumLevel: 19,
+ // tileMatrixLabels: [
+ // '0',
+ // '1',
+ // '2',
+ // '3',
+ // '4',
+ // '5',
+ // '6',
+ // '7',
+ // '8',
+ // '9',
+ // '10',
+ // '11',
+ // '12',
+ // '13',
+ // '14',
+ // '15',
+ // '16',
+ // '17',
+ // '18',
+ // '19'
+ // ]
+ // }, {
+ // title: '2022年7月影像',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdomjuly/MapServer/WMTS',
+ // layer: 'nanchengdomjuly',
+ // style: 'default',
+ // tileMatrixSetID: 'default028mm',
+ // format: 'image/png',
+ // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // maximumLevel: 19,
+ // tileMatrixLabels: [
+ // '0',
+ // '1',
+ // '2',
+ // '3',
+ // '4',
+ // '5',
+ // '6',
+ // '7',
+ // '8',
+ // '9',
+ // '10',
+ // '11',
+ // '12',
+ // '13',
+ // '14',
+ // '15',
+ // '16',
+ // '17',
+ // '18',
+ // '19'
+ // ]
+ // }]
+ //
+ // this.viewerTwoLayers = [{
+ // title: '2022年5月影像',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ // layer: 'nanchengdom',
+ // style: 'default',
+ // tileMatrixSetID: 'default028mm',
+ // format: 'image/png',
+ // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // maximumLevel: 19,
+ // tileMatrixLabels: [
+ // '0',
+ // '1',
+ // '2',
+ // '3',
+ // '4',
+ // '5',
+ // '6',
+ // '7',
+ // '8',
+ // '9',
+ // '10',
+ // '11',
+ // '12',
+ // '13',
+ // '14',
+ // '15',
+ // '16',
+ // '17',
+ // '18',
+ // '19'
+ // ]
+ // }, {
+ // title: '2022年7月影像',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdomjuly/MapServer/WMTS',
+ // layer: 'nanchengdomjuly',
+ // style: 'default',
+ // tileMatrixSetID: 'default028mm',
+ // format: 'image/png',
+ // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // maximumLevel: 19,
+ // tileMatrixLabels: [
+ // '0',
+ // '1',
+ // '2',
+ // '3',
+ // '4',
+ // '5',
+ // '6',
+ // '7',
+ // '8',
+ // '9',
+ // '10',
+ // '11',
+ // '12',
+ // '13',
+ // '14',
+ // '15',
+ // '16',
+ // '17',
+ // '18',
+ // '19'
+ // ]
+ // }]
+ //
+ // this.viewerThreeLayers = [{
+ // title: '2022年5月影像',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ // layer: 'nanchengdom',
+ // style: 'default',
+ // tileMatrixSetID: 'default028mm',
+ // format: 'image/png',
+ // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // maximumLevel: 19,
+ // tileMatrixLabels: [
+ // '0',
+ // '1',
+ // '2',
+ // '3',
+ // '4',
+ // '5',
+ // '6',
+ // '7',
+ // '8',
+ // '9',
+ // '10',
+ // '11',
+ // '12',
+ // '13',
+ // '14',
+ // '15',
+ // '16',
+ // '17',
+ // '18',
+ // '19'
+ // ]
+ // }, {
+ // title: '2022年7月影像',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdomjuly/MapServer/WMTS',
+ // layer: 'nanchengdomjuly',
+ // style: 'default',
+ // tileMatrixSetID: 'default028mm',
+ // format: 'image/png',
+ // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // maximumLevel: 19,
+ // tileMatrixLabels: [
+ // '0',
+ // '1',
+ // '2',
+ // '3',
+ // '4',
+ // '5',
+ // '6',
+ // '7',
+ // '8',
+ // '9',
+ // '10',
+ // '11',
+ // '12',
+ // '13',
+ // '14',
+ // '15',
+ // '16',
+ // '17',
+ // '18',
+ // '19'
+ // ]
+ // }]
+ //
+ // this.viewerFourLayers = [{
+ // title: '2022年5月影像',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ // layer: 'nanchengdom',
+ // style: 'default',
+ // tileMatrixSetID: 'default028mm',
+ // format: 'image/png',
+ // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // maximumLevel: 19,
+ // tileMatrixLabels: [
+ // '0',
+ // '1',
+ // '2',
+ // '3',
+ // '4',
+ // '5',
+ // '6',
+ // '7',
+ // '8',
+ // '9',
+ // '10',
+ // '11',
+ // '12',
+ // '13',
+ // '14',
+ // '15',
+ // '16',
+ // '17',
+ // '18',
+ // '19'
+ // ]
+ // }, {
+ // title: '2022年7月影像',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdomjuly/MapServer/WMTS',
+ // layer: 'nanchengdomjuly',
+ // style: 'default',
+ // tileMatrixSetID: 'default028mm',
+ // format: 'image/png',
+ // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // maximumLevel: 19,
+ // tileMatrixLabels: [
+ // '0',
+ // '1',
+ // '2',
+ // '3',
+ // '4',
+ // '5',
+ // '6',
+ // '7',
+ // '8',
+ // '9',
+ // '10',
+ // '11',
+ // '12',
+ // '13',
+ // '14',
+ // '15',
+ // '16',
+ // '17',
+ // '18',
+ // '19'
+ // ]
+ // }]
},
+
mounted () {
const that = this
@@ -86,6 +389,19 @@
}
}
})
+
+ // 去除logo
+ const primitiveArrOne = window.viewerOne.scene.primitives._primitives
+ window.viewerOne.scene.primitives.remove(primitiveArrOne[0])
+
+ const primitiveArrTwo = window.viewerTwo.scene.primitives._primitives
+ window.viewerTwo.scene.primitives.remove(primitiveArrTwo[0])
+
+ const primitiveArrThree = window.viewerThree.scene.primitives._primitives
+ window.viewerThree.scene.primitives.remove(primitiveArrThree[0])
+
+ const primitiveArrFour = window.viewerFour.scene.primitives._primitives
+ window.viewerFour.scene.primitives.remove(primitiveArrFour[0])
if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
window.viewerOne.setOptions({
@@ -146,34 +462,33 @@
})
)
- // 矢量电子
- // 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,
+ // 设置默认的影像 遍历所有基地影像加载太慢
+ const UrlTemplateImageryProvider = new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: viewdata[0].childItem[0].url,
+ maximumLevel: 18
+ })
+ window.viewerOne.imageryLayers.addImageryProvider(UrlTemplateImageryProvider)
+ window.viewerTwo.imageryLayers.addImageryProvider(UrlTemplateImageryProvider)
+ window.viewerThree.imageryLayers.addImageryProvider(UrlTemplateImageryProvider)
+ window.viewerFour.imageryLayers.addImageryProvider(UrlTemplateImageryProvider)
+
+ // 遍历所有基地影像
+ // viewdata.forEach(item => {
+ // const UrlTemplateImageryProvider = new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ // url: item.childItem[0].url,
// 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.initHandler(window.viewerOne, window.viewerTwo, window.viewerThree, window.viewerFour)
+ // window.viewerOne.imageryLayers.addImageryProvider(UrlTemplateImageryProvider)
+ // window.viewerTwo.imageryLayers.addImageryProvider(UrlTemplateImageryProvider)
+ // window.viewerThree.imageryLayers.addImageryProvider(UrlTemplateImageryProvider)
+ // window.viewerFour.imageryLayers.addImageryProvider(UrlTemplateImageryProvider)
+ // })
window.viewerOne.camera.setView({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- 116.56705776, 27.42386903, 1800.0
+ viewdata[0].latitude, viewdata[0].longitude, 1800.0
),
orientation: {
// 指向
@@ -188,7 +503,7 @@
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- 116.56705776, 27.42386903, 1800.0
+ viewdata[0].latitude, viewdata[0].longitude, 1800.0
),
orientation: {
// 指向
@@ -203,7 +518,7 @@
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- 116.56705776, 27.42386903, 1800.0
+ viewdata[0].latitude, viewdata[0].longitude, 1800.0
),
orientation: {
// 指向
@@ -218,7 +533,7 @@
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- 116.56705776, 27.42386903, 1800.0
+ viewdata[0].latitude, viewdata[0].longitude, 1800.0
),
orientation: {
// 指向
@@ -233,9 +548,62 @@
}
global.DC.ready(initViewer)
+
+ this.$refs.ViewerOne.screenInit()
+ this.$refs.ViewerTwo.screenInit()
+ this.$refs.ViewerThree.screenInit()
+ this.$refs.ViewerFour.screenInit()
})
},
methods: {
+ setUrlTemplateImageryProvider (item, viewer) {
+ // 设置默认的影像 遍历所有基地影像加载太慢
+ const UrlTemplateImageryProvider = new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: item.url,
+ maximumLevel: 18
+ })
+ viewer.imageryLayers.addImageryProvider(UrlTemplateImageryProvider)
+ },
+ goToViewerOneBylatlon (lat, lon, viewer) {
+ viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ lat, lon, 1800.0
+ ),
+ orientation: {
+ // 指向
+ heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ },
+ selectItemOne (item, index) {
+ this.viewerOneLayers = item.childItem
+ this.$refs.ViewerOne.init()
+ this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerOne)
+ this.setUrlTemplateImageryProvider(item.selectItem, window.viewerOne)
+ },
+ selectItemTwo (item, index) {
+ this.viewerTwoLayers = item.childItem
+ this.$refs.ViewerTwo.init()
+ this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerTwo)
+ this.setUrlTemplateImageryProvider(item.selectItem, window.viewerTwo)
+ },
+ selectItemThree (item, index) {
+ this.viewerThreeLayers = item.childItem
+ this.$refs.ViewerThree.init()
+ this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerThree)
+ this.setUrlTemplateImageryProvider(item.selectItem, window.viewerThree)
+ },
+ selectItemFour (item, index) {
+ this.viewerFourLayers = item.childItem
+ this.$refs.ViewerFour.init()
+ this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerFour)
+ this.setUrlTemplateImageryProvider(item.selectItem, window.viewerFour)
+ },
cameraSetView (viewer, camera) {
viewer.camera.setView({
destination: camera.position,
@@ -356,6 +724,13 @@
transform: translate(-50%, 0);
z-index: 99;
}
+ .selectname {
+ position: absolute;
+ top: 35px;
+ left: 30%;
+ transform: translate(-50%, 0);
+ z-index: 99;
+ }
}
.line-row {
--
Gitblit v1.9.3