智慧农业大数据平台
shuishen
2022-08-05 b717153193abaddde13c9ea83e4bd24d70a6a7c4
src/components/splitScreen/index.vue
@@ -2,16 +2,36 @@
<template>
    <div class="current-wrapper" style="height: 100%; width: 100%; position: relative;">
        <div class="map-box" id="viewer-container-one">
            <select-time ref="leftRoller" :type="'viewerOne'" class="time"></select-time>
            <select-time
                ref="ViewerOne"
                :type="'viewerOne'"
                class="time"
                :selectList="viewerOneLayers"
            ></select-time>
        </div>
        <div class="map-box" id="viewer-container-two">
            <select-time ref="leftRoller" :type="'viewerTwo'" class="time"></select-time>
            <select-time
                ref="ViewerTwo"
                :type="'viewerTwo'"
                class="time"
                :selectList="viewerTwoLayers"
            ></select-time>
        </div>
        <div class="map-box" id="viewer-container-three">
            <select-time ref="leftRoller" :type="'viewerThree'" class="time"></select-time>
            <select-time
                ref="ViewerThree"
                :type="'viewerThree'"
                class="time"
                :selectList="viewerThreeLayers"
            ></select-time>
        </div>
        <div class="map-box" id="viewer-container-four">
            <select-time ref="leftRoller" :type="'viewerFour'" class="time"></select-time>
            <select-time
                ref="ViewerFour"
                :type="'viewerFour'"
                class="time"
                :selectList="viewerFourLayers"
            ></select-time>
        </div>
        <div class="line-row"></div>
@@ -35,13 +55,272 @@
    data () {
        return {
            rollerCloseShow: false
            rollerCloseShow: false,
            viewerOneLayers: [],
            viewerTwoLayers: [],
            viewerThreeLayers: [],
            viewerFourLayers: []
        }
    },
    computed: {
    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'
            ]
        }]
    },
    mounted () {
        const that = this
@@ -233,6 +512,11 @@
            }
            global.DC.ready(initViewer)
            this.$refs.ViewerOne.screenInit()
            this.$refs.ViewerTwo.screenInit()
            this.$refs.ViewerThree.screenInit()
            this.$refs.ViewerFour.screenInit()
        })
    },
    methods: {