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

xiebin

2022-09-02 54de656fb5f41a0ad982bdf896a1ea1691c0dede

 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 {