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/remote/index.vue | 340 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 214 insertions(+), 126 deletions(-)
diff --git a/src/components/remote/index.vue b/src/components/remote/index.vue
index 90e6af9..a0e650f 100644
--- a/src/components/remote/index.vue
+++ b/src/components/remote/index.vue
@@ -1,7 +1,31 @@
/* eslint-disable camelcase */
<template>
<div style="height: 100%; width: 100%; position: relative;">
- <div class="location-box">
+ <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'"
+ class="l-time"
+ :selectList="leftRollerLayers"
+ ></select-time>
+ </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'"
+ class="r-time"
+ :selectList="rightRollerLayers"
+ ></select-time>
+ </div>
+
+ <div class="location-box" v-show="!rollerCloseShow && !screenShow">
<el-input
placeholder="请输入地点/经纬度：113.25，30.53"
v-model="location"
@@ -9,24 +33,29 @@
>
<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">
- <div class="measure" v-show="screenShow">
+ <!-- <div class="measure" v-show="screenShow">
<div class="btn">
<span>
<i class="el-icon-time"></i>
</span>
标注
</div>
- </div>
+ </div>-->
<div class="measure" v-show="!screenShow">
- <div class="btn">
+ <div class="btn" @click="deactivate">
<span>
<i class="el-icon-time"></i>
</span>
- 标注
+ 清除
</div>
<div class="line"></div>
<div class="btn" @click="distanceSurface">
@@ -45,7 +74,7 @@
</div>
<div v-show="!rollerCloseShow && !screenShow" class="func">
- <div class="btn">
+ <div class="btn" style="color: #fff; background: #469CF3; height: 100%;">
<span>
<i class="el-icon-time"></i>
</span>
@@ -80,35 +109,49 @@
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 { getRemoteDetailsList,getFormat } 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],
+ farmSelectList: null,
+ currentTitle: null,
+ timeLineList: null,
+ currentObj: null,
+ currentInd: 0
}
},
-
- computed: {
-
- },
- mounted () {
+ created () {
+ this.settingViewdata()
+ },
+ mounted () {
if (global.viewer != null) {
global.viewer = null
}
-
+ var _this = this
function initViewer () {
global.viewer = new global.DC.Viewer('viewer-container', {
contextOptions: {
@@ -120,6 +163,10 @@
}
})
+ // 去除logo
+ const primitiveArr = global.viewer.scene.primitives._primitives
+ global.viewer.scene.primitives.remove(primitiveArr[0])
+
if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
global.viewer.setOptions({
resolutionScale: window.devicePixelRatio
@@ -129,7 +176,7 @@
// 影像
global.viewer.imageryLayers.addImageryProvider(
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
+ url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
format: 'image/jpeg',
show: true,
@@ -137,106 +184,30 @@
})
)
- // http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer
- global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
- // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
- layer: 'nanchengyjjddom',
- 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'
- ]
- })
- )
-
- global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
- // 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'
- ]
- })
- )
-
- // 矢量电子
- // 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
- // })
- // )
global.viewer.use(new global.DC.Measure())
+ // _this.$nextTick(() => {
+ // if (viewdata.length > 0) {
+ // _this.settingViewdata()
+ // }
+ // });
+
+ // global.viewer.locationBar.enable = true
+ }
+
+
+
+ global.DC.ready(initViewer)
+ },
+ methods: {
+ goToDcBylatlon (lat, lon) {
global.viewer.camera.setView({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- 116.56705776, 27.42386903, 1800.0
+ lat, lon, 2800.0
),
orientation: {
// 指向
@@ -246,17 +217,45 @@
roll: 0.0
}
})
-
- // global.viewer.locationBar.enable = true
- }
-
- global.DC.ready(initViewer)
- },
- methods: {
+ },
deactivate () {
global.viewer.measure.deactivate()
},
-
+ // 遥感监测多时相基地下拉事件
+ selectItem (item, index) {
+ this.timeLineList = item.childItem
+ if(this.timeLineList.some(e=>{return e.type == "0"})){
+ for(var i = 0; i<this.timeLineList.length;i++){
+ if(this.timeLineList[i].type == "0"){
+ this.currentObj = this.timeLineList[i]
+ this.currentInd = i
+ break
+ }
+ }
+ }else{
+ 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
@@ -266,7 +265,6 @@
address: addr
})
.then((res) => {
- console.log(res)
if (res.status === 0) {
// 用获取到的经纬度，修改地图的中心点
global.viewer.camera.flyTo({
@@ -354,12 +352,13 @@
}
},
- closeSplitScreen () {
- this.screenShow = false
- },
-
splitScreen () {
this.screenShow = true
+ this.deactivate()
+ },
+
+ closeSplitScreen () {
+ this.screenShow = false
},
distanceSurface () {
@@ -376,19 +375,74 @@
key: 'e9533f5acb2ac470b07f406a4d24b4f0'
})
global.viewer.mapSplit.enable = true
-
- global.viewer.mapSplit.addBaseLayer(baselayerElc)
} else {
global.viewer.mapSplit.enable = true
}
num++
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 () {
global.viewer.mapSplit.enable = false
this.rollerCloseShow = false
+ this.SelectTimeFlag = false
+
+ this.$refs.leftRoller.clearLayer()
+ this.$refs.rightRoller.clearLayer()
+
+ // global.viewer.imageryLayers.removeAll()
+ },
+ settingViewdata() {
+ getRemoteDetailsList().then(res => {
+ var dataTmp = []
+ dataTmp = getFormat(res.data.data,dataTmp)
+ dataTmp.forEach(item => {
+ global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: item.selectItem.url,
+ maximumLevel: 18
+ })
+ )
+ })
+ // this.farmSelectList = dataTmp
+ // this.currentTitle = dataTmp[0].name
+ // this.timeLineList = dataTmp[0].childItem
+ // this.currentObj = dataTmp[0].childItem[0]
+
+ this.farmSelectList=dataTmp
+ this.currentTitle= dataTmp[0].name
+ this.timeLineList= dataTmp[0].childItem
+ this.currentObj= dataTmp[0].selectItem
+ this.currentInd = dataTmp[0].selectItem.index
+ // 初始化地图坐标 默认显示第一个基地
+ global.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ dataTmp[0].latitude, dataTmp[0].longitude, 1800.0
+ ),
+ orientation: {
+ // 指向
+ heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ })
+
+
}
}
}
@@ -412,7 +466,41 @@
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 {
+ position: absolute;
+ top: 30px;
+ left: 25%;
+ transform: translate(-50%, 0);
+ z-index: 99;
+}
+
+.r-time {
+ position: absolute;
+ top: 30px;
+ right: 25%;
+ transform: translate(50%, 0);
+ z-index: 99;
}
.tool-box {
@@ -458,7 +546,7 @@
margin-left: 30px;
width: 40px;
height: 40px;
- background: url(/img/icon/roller-close.png) no-repeat;
+ background: url(../../../public/img/icon/roller-close.png) no-repeat;
background-size: 100% 100%;
}
--
Gitblit v1.9.3