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/timeLine/index.vue | 670 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 490 insertions(+), 180 deletions(-)
diff --git a/src/components/timeLine/index.vue b/src/components/timeLine/index.vue
index 3245627..dd1eeef 100644
--- a/src/components/timeLine/index.vue
+++ b/src/components/timeLine/index.vue
@@ -2,8 +2,7 @@
<!--时间线-->
<div class="time-box">
<div class="l-btn" @click="moveLeft">
- <img src="/img/icon/left.png" />
- <div class="year-box">{{timeLineList[0].timestamp}}</div>
+ <img src="../../../public/img/icon/left.png" />
</div>
<div class="time-line-box">
<div class="ul_box">
@@ -16,214 +15,524 @@
</ul>
</div>
- <img ref="TimePointer" class="pointer" src="/img/icon/lump.png" style="left: 16px" alt />
+ <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.info}}
+ {{currentObj.title}}
<div class="arrows"></div>
</div>
</div>
<div class="r-btn" @click="moveRight">
- <img src="/img/icon/right.png" />
- <div class="year-box">{{timeLineList[timeLineList.length - 1].timestamp}}</div>
+ <img src="../../../public/img/icon/right.png" />
</div>
</div>
</template>
<script>
let currentYxOne = null
-let currentYxTwo = null
+const currentYxTwo = null
export default {
name: 'timeLine',
+ props: ['timeLineList', 'currentObj', 'currentInd'],
data () {
return {
timeIndex: 2,
- timeLineList: [
- {
- timestamp: '2012',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- icon: 'el-iconprev',
- year: '2012',
- info: '2012第一季度'
- }, {
- timestamp: '2013年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2013',
- info: '2012第二季度'
- }, {
- timestamp: '2014年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2014',
- info: '2012第三季度'
- }, {
- timestamp: '2015年',
- color: '#999',
- fontsize: 18,
- year: '2015',
- size: '28',
- bgcolor: '#e4e7ed',
- info: '2012第四季度'
- }, {
- timestamp: '2016年',
- color: '#999',
- fontsize: 18,
- size: '28',
- year: '2016',
- bgcolor: '#e4e7ed',
- info: '2013第一季度'
- }, {
- timestamp: '2017年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2017',
- info: '2013第二季度'
- }, {
- timestamp: '2018年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2018',
- info: '2013第三季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2013第四季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2014第一季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2014第二季度'
- }],
- currentObj: {
- timestamp: '2012',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- icon: 'el-iconprev',
- year: '2012',
- info: '2012第一季度'
- },
- 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) {
+ this.$refs.TimePointer.style.left = parseInt(newName)*48+2 + 14 + 'px'
+ this.$refs.TextPopup.style.left = parseInt(newName)*48+2 - 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: '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'
- ]
- })
- )
+ // 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) {
@@ -233,19 +542,19 @@
this.currentObj = item
this.currentInd = index
-
if (parseInt(this.$refs.mytimeline.style.left) < 0) {
+
this.$refs.TimePointer.style.left = e.target.offsetLeft + parseInt(this.$refs.mytimeline.style.left) + 14 + 'px'
this.$refs.TextPopup.style.left = e.target.offsetLeft + parseInt(this.$refs.mytimeline.style.left) - 38 + 'px'
} else {
+
if (e.target.offsetLeft <= 480) {
this.$refs.TimePointer.style.left = e.target.offsetLeft + 14 + 'px'
this.$refs.TextPopup.style.left = e.target.offsetLeft - 38 + 'px'
}
}
- this.addBaseLayer()
- // offsetX
+ this.addBaseLayer(item)
},
changeActive (index) {
this.timeIndex = index
@@ -402,6 +711,7 @@
position: absolute;
width: 120px;
line-height: 36px;
+ text-align: center;
z-index: 1;
background: #fff;
font-size: 12px;
--
Gitblit v1.9.3