Merge branch 'master' of http://192.168.0.105:10010/r/zhny-dsjdp

guanqb

2022-09-02 0b07690c81429fffb5843db5097c68496481ee93

Merge branch 'master' of http://192.168.0.105:10010/r/zhny-dsjdp

 src/assets/viewdata.js

New file
@@ -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}' }
        ]
    }
]

 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 {
@@ -567,7 +666,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%;
    }


 src/components/selectName/index.vue

New file
@@ -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>

 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

 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 {

 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