zhny-dsjdp.git - Gitblit

			@@ -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;