From 54de656fb5f41a0ad982bdf896a1ea1691c0dede Mon Sep 17 00:00:00 2001
From: xiebin <123456>
Date: Fri, 02 Sep 2022 14:24:57 +0800
Subject: [PATCH] 遥感监测修改、遥感监测新增基地跳转地图
---
src/components/splitScreen/index.vue | 646 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 362 insertions(+), 284 deletions(-)
diff --git a/src/components/splitScreen/index.vue b/src/components/splitScreen/index.vue
index 017ffd2..5bd4f81 100644
--- a/src/components/splitScreen/index.vue
+++ b/src/components/splitScreen/index.vue
@@ -2,6 +2,9 @@
<template>
<div class="current-wrapper" style="height: 100%; width: 100%; position: relative;">
<div class="map-box" id="viewer-container-one">
+ <div class="selectname">
+ <select-name ref="selectNameOne" @selectItem="selectItemOne" :value="currentTitle" :selectList="farmSelectList"></select-name>
+ </div>
<select-time
ref="ViewerOne"
:type="'viewerOne'"
@@ -10,6 +13,9 @@
></select-time>
</div>
<div class="map-box" id="viewer-container-two">
+ <div class="selectname">
+ <select-name ref="selectNameTwo" @selectItem="selectItemTwo" :value="currentTitle" :selectList="farmSelectList"></select-name>
+ </div>
<select-time
ref="ViewerTwo"
:type="'viewerTwo'"
@@ -18,6 +24,9 @@
></select-time>
</div>
<div class="map-box" id="viewer-container-three">
+ <div class="selectname">
+ <select-name ref="selectNameThree" @selectItem="selectItemThree" :value="currentTitle" :selectList="farmSelectList"></select-name>
+ </div>
<select-time
ref="ViewerThree"
:type="'viewerThree'"
@@ -26,6 +35,9 @@
></select-time>
</div>
<div class="map-box" id="viewer-container-four">
+ <div class="selectname">
+ <select-name ref="selectNameFour" @selectItem="selectItemFour" :value="currentTitle" :selectList="farmSelectList"></select-name>
+ </div>
<select-time
ref="ViewerFour"
:type="'viewerFour'"
@@ -40,6 +52,7 @@
</template>
<script>
+import { viewdata } from '@/assets/viewdata.js'
window.viewerOne = null
window.viewerTwo = null
window.viewerThree = null
@@ -59,266 +72,277 @@
viewerOneLayers: [],
viewerTwoLayers: [],
viewerThreeLayers: [],
- viewerFourLayers: []
+ viewerFourLayers: [],
+ farmSelectList: viewdata,
+ currentTitle: viewdata[0].name
}
},
created () {
- 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'
- ]
- }]
+ // 初始化数据
+ 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 () {
@@ -367,16 +391,16 @@
})
// 去除logo
- let primitiveArrOne = window.viewerOne.scene.primitives._primitives
+ const primitiveArrOne = window.viewerOne.scene.primitives._primitives
window.viewerOne.scene.primitives.remove(primitiveArrOne[0])
- let primitiveArrTwo = window.viewerTwo.scene.primitives._primitives
+ const primitiveArrTwo = window.viewerTwo.scene.primitives._primitives
window.viewerTwo.scene.primitives.remove(primitiveArrTwo[0])
- let primitiveArrThree = window.viewerThree.scene.primitives._primitives
+ const primitiveArrThree = window.viewerThree.scene.primitives._primitives
window.viewerThree.scene.primitives.remove(primitiveArrThree[0])
- let primitiveArrFour = window.viewerFour.scene.primitives._primitives
+ const primitiveArrFour = window.viewerFour.scene.primitives._primitives
window.viewerFour.scene.primitives.remove(primitiveArrFour[0])
if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
@@ -438,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: {
// 指向
@@ -480,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: {
// 指向
@@ -495,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: {
// 指向
@@ -510,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: {
// 指向
@@ -533,6 +556,54 @@
})
},
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.childItem[0], window.viewerOne)
+ },
+ selectItemTwo (item, index) {
+ this.viewerTwoLayers = item.childItem
+ this.$refs.ViewerTwo.init()
+ this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerTwo)
+ this.setUrlTemplateImageryProvider(item.childItem[0], window.viewerTwo)
+ },
+ selectItemThree (item, index) {
+ this.viewerThreeLayers = item.childItem
+ this.$refs.ViewerThree.init()
+ this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerThree)
+ this.setUrlTemplateImageryProvider(item.childItem[0], window.viewerThree)
+ },
+ selectItemFour (item, index) {
+ this.viewerFourLayers = item.childItem
+ this.$refs.ViewerFour.init()
+ this.goToViewerOneBylatlon(item.latitude, item.longitude, window.viewerFour)
+ this.setUrlTemplateImageryProvider(item.childItem[0], window.viewerFour)
+ },
cameraSetView (viewer, camera) {
viewer.camera.setView({
destination: camera.position,
@@ -653,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