遥感监测修改、遥感监测新增基地跳转地图

xiebin

2022-09-02 54de656fb5f41a0ad982bdf896a1ea1691c0dede

 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 {