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 +++++++++-------
src/components/remote/index.vue | 373 ++++++---
src/components/selectTime/index.vue | 59
src/components/timeLine/index.vue | 961 +++++++++++++------------
src/assets/viewdata.js | 46 +
src/components/selectName/index.vue | 85 ++
6 files changed, 1,238 insertions(+), 932 deletions(-)
diff --git a/src/assets/viewdata.js b/src/assets/viewdata.js
new file mode 100644
index 0000000..f07d88e
--- /dev/null
+++ b/src/assets/viewdata.js
@@ -0,0 +1,46 @@
+export const viewdata = [
+ {
+ name: '南城县南城麻姑集团',
+ latitude: '116.625419',
+ longitude: '27.586658',
+ childItem: [
+ { title: '2022年6月', url: 'http://59.55.128.155:9003/image/wmts/x6FjrhkG/{z}/{x}/{y}' }
+ ]
+ },
+ {
+ name: '南城县水龙米业',
+ latitude: '116.642107',
+ longitude: '27.596825',
+ childItem: [
+ { title: '2022年6月', url: 'http://59.55.128.155:9003/image/wmts/EigNM2I4/{z}/{x}/{y}' }
+ ]
+ },
+ {
+ name: '南城县田南村绿色基地',
+ latitude: '116.56705776',
+ longitude: '27.42386903',
+ childItem: [
+ { title: '2022年6月', url: 'http://59.55.128.155:9003/image/wmts/vNjFuYLb/{z}/{x}/{y}' },
+ { title: '2022年7月', url: 'http://59.55.128.155:9003/image/wmts/XPkwzs0M/{z}/{x}/{y}' },
+ { title: '2022年8月', url: 'http://59.55.128.155:9003/image/wmts/YnJOjH09/{z}/{x}/{y}' }
+ ]
+ },
+ {
+ name: '南城县有机种植基地',
+ latitude: '116.778964',
+ longitude: '27.563004',
+ childItem: [
+ { title: '2022年6月', url: 'http://59.55.128.155:9003/image/wmts/syOssp0f/{z}/{x}/{y}' },
+ { title: '2022年7月', url: 'http://59.55.128.155:9003/image/wmts/taX7ipoo/{z}/{x}/{y}' },
+ { title: '2022年8月', url: 'http://59.55.128.155:9003/image/wmts/JqaZaGwd/{z}/{x}/{y}' }
+ ]
+ },
+ {
+ name: '南城县育秧中心',
+ latitude: '116.650792',
+ longitude: '27.633852',
+ childItem: [
+ { title: '2022年8月', url: 'http://59.55.128.155:9003/image/wmts/U49OG6vT/{z}/{x}/{y}' }
+ ]
+ }
+]
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 {
diff --git a/src/components/selectName/index.vue b/src/components/selectName/index.vue
new file mode 100644
index 0000000..be896d8
--- /dev/null
+++ b/src/components/selectName/index.vue
@@ -0,0 +1,85 @@
+<template>
+ <div>
+ <div class="current-select" @click="listFlag = !listFlag">
+ <div class="title">{{ currentTitle }}</div>
+ <i class="el-icon-caret-bottom"></i>
+ </div>
+
+ <div class="list-box" v-show="listFlag">
+ <ul>
+ <li v-for="(item, index) in selectList"
+ :key="index"
+ @click="currentClick(item, index)"
+ >{{item.name}}</li>
+ </ul>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'selectName',
+ props: ['selectList', 'value'],
+ data () {
+ return {
+ listFlag: false,
+ currentTitle: null,
+ currentIndex: null
+ }
+ },
+ created () {
+ this.currentTitle = this.value
+ },
+ methods: {
+
+ currentClick (item, index) {
+ // 触发Student组件实例身上的atguigu事件
+ this.$emit('selectItem', item, index)
+ if (this.currentIndex == index) {
+ this.listFlag = false
+ return
+ }
+ this.currentTitle = item.name
+ this.currentIndex = index
+
+ this.listFlag = false
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.current-select {
+ padding: 0 15px;
+ width: 166px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: #ffffff;
+ border-radius: 4px 4px 4px 4px;
+ box-sizing: border-box;
+ font-size: 12px;
+ color: #717171;
+ cursor: pointer;
+}
+
+.list-box {
+ position: absolute;
+ top: 32px;
+ width: 166px;
+ height: 240px;
+ overflow-y: auto;
+ background: #ffffff;
+ border-radius: 4px 4px 4px 4px;
+ box-sizing: border-box;
+ font-size: 12px;
+ color: #717171;
+
+ li {
+ line-height: 30px;
+ text-align: center;
+ cursor: pointer;
+ }
+}
+</style>
diff --git a/src/components/selectTime/index.vue b/src/components/selectTime/index.vue
index 62fb5f0..9e7ca81 100644
--- a/src/components/selectTime/index.vue
+++ b/src/components/selectTime/index.vue
@@ -43,15 +43,16 @@
methods: {
init () {
- if (this.leftOrRight == 'left') {
+ this.$nextTick(() => {
this.currentTitle = this.selectList[0].title
this.currentIndex = 0
+
+ this.removeLeftAddLayer()
+ this.removeRightAddLayer()
+
this.leftAddLayer(this.selectList[0])
- } else {
- this.currentTitle = this.selectList[1].title
- this.currentIndex = 1
- this.rightAddLayer(this.selectList[1])
- }
+ this.rightAddLayer(this.selectList[0])
+ })
},
screenInit () {
@@ -83,31 +84,22 @@
leftAddLayer (params) {
leftCurrentLayer = global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
url: params.url,
- layer: params.layer,
- style: params.style,
- tileMatrixSetID: params.tileMatrixSetID,
- format: params.format,
- tilingScheme: params.tilingScheme,
- maximumLevel: params.maximumLevel,
- tileMatrixLabels: params.tileMatrixLabels
- }), 10
+ maximumLevel: 18,
+ ltileMatrixSetID: 'default028mm',
+ layer: 'nanchengdom'
+ })
)
},
-
rightAddLayer (params) {
rightCurrentLayer = global.viewer.mapSplit.addBaseLayer(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
url: params.url,
- layer: params.layer,
- style: params.style,
- tileMatrixSetID: params.tileMatrixSetID,
- format: params.format,
- tilingScheme: params.tilingScheme,
- maximumLevel: params.maximumLevel,
- tileMatrixLabels: params.tileMatrixLabels
- }), 21
+ maximumLevel: 18,
+ tileMatrixSetID: 'default028mm',
+ layer: 'nanchengRightdom'
+ })
)
},
@@ -127,16 +119,12 @@
addLayers (variable, params) {
window[variable] = window[this.type].imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: params.url,
- layer: params.layer,
- style: params.style,
- tileMatrixSetID: params.tileMatrixSetID,
- format: params.format,
- tilingScheme: params.tilingScheme,
- maximumLevel: params.maximumLevel,
- tileMatrixLabels: params.tileMatrixLabels
- }), 10
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: params.url,
+ maximumLevel: 18,
+ ltileMatrixSetID: 'default028mm',
+ layer: 'nanchengdom'
+ })
)
},
@@ -152,7 +140,6 @@
this.listFlag = false
return
}
-
if (this.leftOrRight) {
this.currentTitle = item.title
this.currentIndex = index
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 {
diff --git a/src/components/timeLine/index.vue b/src/components/timeLine/index.vue
index bb2fd71..fce5382 100644
--- a/src/components/timeLine/index.vue
+++ b/src/components/timeLine/index.vue
@@ -18,7 +18,7 @@
<img ref="TimePointer" class="pointer" src="../../../public/img/icon/lump.png" style="left: 16px" alt />
<div ref="TextPopup" class="text-popup" style="left: -36px; top: -44px;">
- {{currentObj.timestamp}}
+ {{currentObj.title}}
<div class="arrows"></div>
</div>
</div>
@@ -30,500 +30,511 @@
<script>
let currentYxOne = null
-let currentYxTwo = null
+const currentYxTwo = null
export default {
name: 'timeLine',
+ props: ['timeLineList', 'currentObj', 'currentInd'],
data () {
return {
timeIndex: 2,
- timeLineList: [
- {
- timestamp: '2021年9月影像',
- 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'
- ]
- },
- {
- timestamp: '2021年10月影像',
- 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'
- ]
- },
- {
- timestamp: '2021年11月影像',
- 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'
- ]
- },
- {
- timestamp: '2021年12月影像',
- 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'
- ]
- },
- {
- timestamp: '2022年1月影像',
- 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'
- ]
- },
- {
- timestamp: '2022年2月影像',
- 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'
- ]
- },
- {
- timestamp: '2022年3月影像',
- 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'
- ]
- },
- {
- timestamp: '2022年4月影像',
- 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'
- ]
- },
- {
- timestamp: '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'
- ]
- },
- {
- timestamp: '2022年6月影像',
- 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'
- ]
- },
- {
- timestamp: '2022年7月影像',
- 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'
- ]
- },
- {
- timestamp: '2022年8月影像',
- 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'
- ]
- }],
- currentObj: {
- timestamp: '2021年9月影像',
- 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'
- ]
- },
- currentInd: 0,
+ // timeLineList: [
+ // {
+ // timestamp: '2021年9月影像',
+ // 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'
+ // ]
+ // },
+ // {
+ // timestamp: '2021年10月影像',
+ // 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'
+ // ]
+ // },
+ // {
+ // timestamp: '2021年11月影像',
+ // 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'
+ // ]
+ // },
+ // {
+ // timestamp: '2021年12月影像',
+ // 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'
+ // ]
+ // },
+ // {
+ // timestamp: '2022年1月影像',
+ // 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'
+ // ]
+ // },
+ // {
+ // timestamp: '2022年2月影像',
+ // 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'
+ // ]
+ // },
+ // {
+ // timestamp: '2022年3月影像',
+ // 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'
+ // ]
+ // },
+ // {
+ // timestamp: '2022年4月影像',
+ // 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'
+ // ]
+ // },
+ // {
+ // timestamp: '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'
+ // ]
+ // },
+ // {
+ // timestamp: '2022年6月影像',
+ // 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'
+ // ]
+ // },
+ // {
+ // timestamp: '2022年7月影像',
+ // 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'
+ // ]
+ // },
+ // {
+ // timestamp: '2022年8月影像',
+ // 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'
+ // ]
+ // }],
+ // currentObj: {
+ // timestamp: '2021年9月影像',
+ // 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'
+ // ]
+ // },
+ // currentInd: 0,
leftStart: false,
rightStart: true
}
},
mounted () {
- this.$nextTick(() => {
- this.addBaseLayer()
- })
+ // this.$nextTick(() => {
+ // this.addBaseLayer()
+ // })
},
-
+ watch: {
+ currentInd: {
+ handler (newName, oldName) {
+ if (newName == 0) {
+ this.$refs.TimePointer.style.left = 0 + 14 + 'px'
+ this.$refs.TextPopup.style.left = 0 - 38 + 'px'
+ }
+ }
+ }
+ },
methods: {
- addBaseLayer () {
+ addBaseLayer (item) {
currentYxOne = 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'
- ]
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: item.url,
+ maximumLevel: 18
})
)
-
- currentYxTwo = global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: this.currentObj.url,
- layer: this.currentObj.layer,
- style: this.currentObj.style,
- tileMatrixSetID: this.currentObj.tileMatrixSetID,
- format: this.currentObj.format,
- tilingScheme: this.currentObj.tilingScheme,
- maximumLevel: this.currentObj.maximumLevel,
- tileMatrixLabels: this.currentObj.tileMatrixLabels
- })
- )
+ // currentYxOne = 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'
+ // ]
+ // })
+ // )
+ //
+ // currentYxTwo = global.viewer.imageryLayers.addImageryProvider(
+ // new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ // url: this.currentObj.url,
+ // layer: this.currentObj.layer,
+ // style: this.currentObj.style,
+ // tileMatrixSetID: this.currentObj.tileMatrixSetID,
+ // format: this.currentObj.format,
+ // tilingScheme: this.currentObj.tilingScheme,
+ // maximumLevel: this.currentObj.maximumLevel,
+ // tileMatrixLabels: this.currentObj.tileMatrixLabels
+ // })
+ // )
},
removeBaseLayer () {
if (currentYxOne != null) {
global.viewer.imageryLayers.remove(currentYxOne)
currentYxOne = null
- }
-
- if (currentYxTwo != null) {
- global.viewer.imageryLayers.remove(currentYxTwo)
- currentYxTwo = null
}
},
selectTime (e, item, index) {
@@ -544,7 +555,7 @@
}
}
- this.addBaseLayer()
+ this.addBaseLayer(item)
},
changeActive (index) {
this.timeIndex = index
--
Gitblit v1.9.3