Merge remote-tracking branch 'origin/master'

zengh

2022-07-08 6f5331c9ba8b6ba44b45b6a89d7c7c813ab8052d

 src/components/splitScreen/index.vue

@@ -1,10 +1,18 @@
/* eslint-disable camelcase */
<template>
    <div class="current-wrapper" style="height: 100%; width: 100%; position: relative;">
        <div class="map-box" id="viewer-container-one"></div>
        <div class="map-box" id="viewer-container-two"></div>
        <div class="map-box" id="viewer-container-three"></div>
        <div class="map-box" id="viewer-container-four"></div>
        <div class="map-box" id="viewer-container-one">
            <select-time ref="leftRoller" :type="'viewerOne'" class="time"></select-time>
        </div>
        <div class="map-box" id="viewer-container-two">
            <select-time ref="leftRoller" :type="'viewerTwo'" class="time"></select-time>
        </div>
        <div class="map-box" id="viewer-container-three">
            <select-time ref="leftRoller" :type="'viewerThree'" class="time"></select-time>
        </div>
        <div class="map-box" id="viewer-container-four">
            <select-time ref="leftRoller" :type="'viewerFour'" class="time"></select-time>
        </div>

        <div class="line-row"></div>
        <div class="line-column"></div>
@@ -12,10 +20,10 @@
</template>

<script>
let viewerOne = null
let viewerTwo = null
let viewerThree = null
let viewerFour = null
window.viewerOne = null
window.viewerTwo = null
window.viewerThree = null
window.viewerFour = null

let handlerTL = null
let handlerTR = null
@@ -39,7 +47,7 @@

        this.$nextTick(() => {
            function initViewer () {
                viewerOne = new global.DC.Viewer('viewer-container-one', {
                window.viewerOne = new global.DC.Viewer('viewer-container-one', {
                    contextOptions: {
                        webgl: {
                            alpha: true,
@@ -49,7 +57,7 @@
                    }
                })

                viewerTwo = new global.DC.Viewer('viewer-container-two', {
                window.viewerTwo = new global.DC.Viewer('viewer-container-two', {
                    contextOptions: {
                        webgl: {
                            alpha: true,
@@ -59,7 +67,7 @@
                    }
                })

                viewerThree = new global.DC.Viewer('viewer-container-three', {
                window.viewerThree = new global.DC.Viewer('viewer-container-three', {
                    contextOptions: {
                        webgl: {
                            alpha: true,
@@ -69,7 +77,7 @@
                    }
                })

                viewerFour = new global.DC.Viewer('viewer-container-four', {
                window.viewerFour = new global.DC.Viewer('viewer-container-four', {
                    contextOptions: {
                        webgl: {
                            alpha: true,
@@ -80,25 +88,25 @@
                })

                if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
                    viewerOne.setOptions({
                    window.viewerOne.setOptions({
                        resolutionScale: window.devicePixelRatio
                    })

                    viewerTwo.setOptions({
                    window.viewerTwo.setOptions({
                        resolutionScale: window.devicePixelRatio
                    })

                    viewerThree.setOptions({
                    window.viewerThree.setOptions({
                        resolutionScale: window.devicePixelRatio
                    })

                    viewerFour.setOptions({
                    window.viewerFour.setOptions({
                        resolutionScale: window.devicePixelRatio
                    })
                }

                // 影像
                viewerOne.imageryLayers.addImageryProvider(
                window.viewerOne.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
@@ -108,7 +116,7 @@
                    })
                )

                viewerTwo.imageryLayers.addImageryProvider(
                window.viewerTwo.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
@@ -118,7 +126,7 @@
                    })
                )

                viewerThree.imageryLayers.addImageryProvider(
                window.viewerThree.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
@@ -128,83 +136,13 @@
                    })
                )

                viewerFour.imageryLayers.addImageryProvider(
                window.viewerFour.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                        url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_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
                    })
                )

                viewerOne.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'
                        ]
                    })
                )

                viewerOne.imageryLayers.addImageryProvider(
                    new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                        url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                        // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                        layer: 'nanchengdom',
                        style: 'default',
                        tileMatrixSetID: 'default028mm',
                        format: 'image/png',
                        tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                        maximumLevel: 19,
                        tileMatrixLabels: [
                            '0',
                            '1',
                            '2',
                            '3',
                            '4',
                            '5',
                            '6',
                            '7',
                            '8',
                            '9',
                            '10',
                            '11',
                            '12',
                            '13',
                            '14',
                            '15',
                            '16',
                            '17',
                            '18',
                            '19'
                        ]
                    })
                )

@@ -229,9 +167,9 @@
                //     })
                // )

                that.initHandler(viewerOne, viewerTwo, viewerThree, viewerFour)
                that.initHandler(window.viewerOne, window.viewerTwo, window.viewerThree, window.viewerFour)

                viewerOne.camera.setView({
                window.viewerOne.camera.setView({
                    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -246,7 +184,7 @@
                    }
                })

                viewerTwo.camera.setView({
                window.viewerTwo.camera.setView({
                    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -261,7 +199,7 @@
                    }
                })

                viewerThree.camera.setView({
                window.viewerThree.camera.setView({
                    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -276,7 +214,7 @@
                    }
                })

                viewerFour.camera.setView({
                window.viewerFour.camera.setView({
                    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -376,15 +314,15 @@
        handlerBL = null
        handlerBR = null

        viewerOne.destroy()
        viewerTwo.destroy()
        viewerThree.destroy()
        viewerFour.destroy()
        window.viewerOne.destroy()
        window.viewerTwo.destroy()
        window.viewerThree.destroy()
        window.viewerFour.destroy()

        viewerOne = null
        viewerTwo = null
        viewerThree = null
        viewerFour = null
        window.viewerOne = null
        window.viewerTwo = null
        window.viewerThree = null
        window.viewerFour = null
    }
}
</script>
@@ -407,8 +345,17 @@
    flex-wrap: wrap;

    .map-box {
        position: relative;
        width: 50%;
        height: 50%;

        .time {
            position: absolute;
            top: 35px;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 99;
        }
    }

    .line-row {