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/remote/index.vue | 373 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 236 insertions(+), 137 deletions(-)
diff --git a/src/components/remote/index.vue b/src/components/remote/index.vue
index 4998304..3287315 100644
--- a/src/components/remote/index.vue
+++ b/src/components/remote/index.vue
@@ -2,6 +2,9 @@
<template>
<div style="height: 100%; width: 100%; position: relative;">
<div v-show="SelectTimeFlag">
+ <div class="selectname_left">
+ <select-name ref="selectNameLeft" @selectItem="selectItemLeft" :value="currentTitle" :selectList="farmSelectList"></select-name>
+ </div>
<select-time
ref="leftRoller"
:leftOrRight="'left'"
@@ -11,6 +14,9 @@
</div>
<div v-show="SelectTimeFlag">
+ <div class="selectname_right">
+ <select-name ref="selectNameRight" @selectItem="selectItemRight" :selectList="farmSelectList" :value="currentTitle"></select-name>
+ </div>
<select-time
ref="rightRoller"
:leftOrRight="'right'"
@@ -27,6 +33,11 @@
>
<el-button slot="append" @click="setLocation" icon="el-icon-search"></el-button>
</el-input>
+
+ <div class="selectname_index">
+ <select-name ref="selectName" :value="currentTitle" :selectList="farmSelectList" @selectItem="selectItem"></select-name>
+ </div>
+
</div>
<div class="tool-box">
@@ -98,161 +109,168 @@
v-if="!rollerCloseShow && !screenShow"
style="position: fixed; top: auto; left: 0; right: 0; bottom: 44px; margin: auto; width: 610px; height: 68px;"
>
- <time-line></time-line>
+ <time-line :timeLineList="timeLineList" :currentObj="currentObj" :currentInd="currentInd"></time-line>
</div>
</div>
</template>
<script>
+// import SelectName from '@/components/selectName'
+import { viewdata } from '@/assets/viewdata.js'
let baselayerElc = null
let num = 0
-
export default {
name: 'remote',
-
+ // components: { SelectName },
data () {
return {
// 左边集合
leftRollerLayers: [],
// 右边集合
rightRollerLayers: [],
-
SelectTimeFlag: false,
rollerCloseShow: false,
screenShow: false,
- location: ''
+ location: '',
+ farmSelectList: viewdata,
+ currentTitle: viewdata[0].name,
+ timeLineList: viewdata[0].childItem,
+ currentObj: viewdata[0].childItem[0],
+ currentInd: 0
}
},
created () {
- this.leftRollerLayers = [{
- 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.leftRollerLayers = [
+ // {
+ // title: '2022年6月影像',
+ // 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.rightRollerLayers = [{
- 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.rightRollerLayers = [{
+ // title: '2022年6月影像',
+ // 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 () {
if (global.viewer != null) {
@@ -271,7 +289,7 @@
})
// 去除logo
- let primitiveArr = global.viewer.scene.primitives._primitives
+ const primitiveArr = global.viewer.scene.primitives._primitives
global.viewer.scene.primitives.remove(primitiveArr[0])
if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
@@ -290,6 +308,24 @@
maximumLevel: 18
})
)
+
+ viewdata.forEach(item => {
+ global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: item.childItem[0].url,
+ maximumLevel: 18
+ })
+ )
+ })
+ // var layerOne = new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ // url: 'http://59.55.128.155:9003/image/wmts/x6FjrhkG/{z}/{x}/{y}',
+ // // url: 'http://59.55.128.155:9003/image/wmts/vNjFuYLb/{z}/{x}/{y}',
+ // maximumLevel: 18
+ // })
+ //
+ // global.viewer.imageryLayers.addImageryProvider(layerOne)
+
+ // global.viewer.flyTo(layerOne)
// http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer
@@ -315,12 +351,12 @@
// )
global.viewer.use(new global.DC.Measure())
-
+ // 初始化地图坐标 默认显示第一个基地
global.viewer.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: {
// 指向
@@ -337,10 +373,50 @@
global.DC.ready(initViewer)
},
methods: {
+ goToDcBylatlon (lat, lon) {
+ global.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ lat, lon, 2800.0
+ ),
+ orientation: {
+ // 指向
+ heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ },
deactivate () {
global.viewer.measure.deactivate()
},
-
+ // 遥感监测多时相基地下拉事件
+ selectItem (item, index) {
+ this.timeLineList = item.childItem
+ this.currentObj = this.timeLineList[0]
+ this.currentInd = 0
+ this.goToDcBylatlon(item.latitude, item.longitude)
+ },
+ // 遥感监测卷帘左基地下拉事件
+ selectItemLeft (item, index) {
+ this.leftRollerLayers = item.childItem
+ this.rightRollerLayers = item.childItem
+ this.$refs.selectNameRight.currentTitle = item.name
+ this.$refs.leftRoller.init()
+ this.$refs.rightRoller.init()
+ this.goToDcBylatlon(item.latitude, item.longitude)
+ },
+ // 遥感监测卷帘右基地下拉事件
+ selectItemRight (item, index) {
+ this.leftRollerLayers = item.childItem
+ this.rightRollerLayers = item.childItem
+ this.$refs.selectNameLeft.currentTitle = item.name
+ this.$refs.rightRoller.init()
+ this.$refs.leftRoller.init()
+ this.goToDcBylatlon(item.latitude, item.longitude)
+ },
// 根据地址获取坐标
addrToGetCoordinate (addr) {
const that = this
@@ -350,7 +426,6 @@
address: addr
})
.then((res) => {
- console.log(res)
if (res.status === 0) {
// 用获取到的经纬度，修改地图的中心点
global.viewer.camera.flyTo({
@@ -469,8 +544,14 @@
this.rollerCloseShow = true
this.SelectTimeFlag = true
this.deactivate()
+
+ // 初始化数据
+ this.leftRollerLayers = this.farmSelectList[0].childItem
this.$refs.leftRoller.init()
+ this.rightRollerLayers = this.farmSelectList[0].childItem
this.$refs.rightRoller.init()
+ // this.$refs.leftRoller.init()
+ // this.$refs.rightRoller.init()
},
closeRollerShutters () {
@@ -505,7 +586,25 @@
top: 25px;
left: 50px;
z-index: 9;
- width: 320px;
+ width: 485px;
+ display: flex;
+}
+.selectname_left {
+ position: absolute;
+ top: 30px;
+ left: 15%;
+ transform: translate(-50%, 0);
+ z-index: 99;
+}
+.selectname_right {
+ position: absolute;
+ top: 30px;
+ right: 35%;
+ transform: translate(50%, 0);
+ z-index: 99;
+}
+.selectname_index {
+ padding-left: 20px;
}
.l-time {
--
Gitblit v1.9.3