基地信息坐标有误差的问题

xiebin

2022-11-16 3dc278f10a4c3e3db7ce3a445bed710bdc88916e

 src/components/remote/index.vue

@@ -1,7 +1,31 @@
/* eslint-disable camelcase */
<template>
    <div style="height: 100%; width: 100%; position: relative;">
        <div class="location-box">
        <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'"
                class="l-time"
                :selectList="leftRollerLayers"
            ></select-time>
        </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'"
                class="r-time"
                :selectList="rightRollerLayers"
            ></select-time>
        </div>

        <div class="location-box" v-show="!rollerCloseShow && !screenShow">
            <el-input
                placeholder="请输入地点/经纬度：113.25，30.53"
                v-model="location"
@@ -9,24 +33,29 @@
            >
                <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">
            <div class="measure" v-show="screenShow">
            <!-- <div class="measure" v-show="screenShow">
                <div class="btn">
                    <span>
                        <i class="el-icon-time"></i>
                    </span>
                    标注
                </div>
            </div>
            </div>-->

            <div class="measure" v-show="!screenShow">
                <div class="btn">
                <div class="btn" @click="deactivate">
                    <span>
                        <i class="el-icon-time"></i>
                    </span>
                    标注
                    清除
                </div>
                <div class="line"></div>
                <div class="btn" @click="distanceSurface">
@@ -45,7 +74,7 @@
            </div>

            <div v-show="!rollerCloseShow && !screenShow" class="func">
                <div class="btn">
                <div class="btn" style="color: #fff; background: #469CF3; height: 100%;">
                    <span>
                        <i class="el-icon-time"></i>
                    </span>
@@ -80,35 +109,49 @@
            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 { getRemoteDetailsList,getFormat } 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],
            farmSelectList: null,
            currentTitle: null,
            timeLineList: null,
            currentObj: null,
            currentInd: 0
        }
    },

    computed: {

    },
    mounted () {
  created () {
      this.settingViewdata()
  },
  mounted () {
        if (global.viewer != null) {
            global.viewer = null
        }

        var _this = this
        function initViewer () {
            global.viewer = new global.DC.Viewer('viewer-container', {
                contextOptions: {
@@ -120,6 +163,10 @@
                }
            })

            // 去除logo
            const primitiveArr = global.viewer.scene.primitives._primitives
            global.viewer.scene.primitives.remove(primitiveArr[0])

            if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
                global.viewer.setOptions({
                    resolutionScale: window.devicePixelRatio
@@ -129,7 +176,7 @@
            // 影像
            global.viewer.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',
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
@@ -137,106 +184,30 @@
                })
            )

            // http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer

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

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

            // 矢量电子
            // 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,
            //         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
            //     })
            // )

            global.viewer.use(new global.DC.Measure())

          // _this.$nextTick(() => {
          //   if (viewdata.length > 0) {
          //     _this.settingViewdata()
          //   }
          // });

            // global.viewer.locationBar.enable = true
        }



        global.DC.ready(initViewer)
    },
    methods: {
        goToDcBylatlon (lat, lon) {
            global.viewer.camera.setView({
                // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                    116.56705776, 27.42386903, 1800.0
                        lat, lon, 2800.0
                ),
                orientation: {
                    // 指向
@@ -246,17 +217,45 @@
                    roll: 0.0
                }
            })

            // global.viewer.locationBar.enable = true
        }

        global.DC.ready(initViewer)
    },
    methods: {
        },
        deactivate () {
            global.viewer.measure.deactivate()
        },

        // 遥感监测多时相基地下拉事件
        selectItem (item, index) {
            this.timeLineList = item.childItem
            if(this.timeLineList.some(e=>{return e.type == "0"})){
                for(var i = 0; i<this.timeLineList.length;i++){
                    if(this.timeLineList[i].type == "0"){
                        this.currentObj = this.timeLineList[i]
                        this.currentInd = i
                        break
                    }
                }
            }else{
                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
@@ -266,7 +265,6 @@
                address: addr
            })
                .then((res) => {
                    console.log(res)
                    if (res.status === 0) {
                        // 用获取到的经纬度，修改地图的中心点
                        global.viewer.camera.flyTo({
@@ -354,12 +352,13 @@
            }
        },

        closeSplitScreen () {
            this.screenShow = false
        },

        splitScreen () {
            this.screenShow = true
            this.deactivate()
        },

        closeSplitScreen () {
            this.screenShow = false
        },

        distanceSurface () {
@@ -376,19 +375,74 @@
                    key: 'e9533f5acb2ac470b07f406a4d24b4f0'
                })
                global.viewer.mapSplit.enable = true

                global.viewer.mapSplit.addBaseLayer(baselayerElc)
            } else {
                global.viewer.mapSplit.enable = true
            }

            num++
            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 () {
            global.viewer.mapSplit.enable = false
            this.rollerCloseShow = false
            this.SelectTimeFlag = false

            this.$refs.leftRoller.clearLayer()
            this.$refs.rightRoller.clearLayer()

            // global.viewer.imageryLayers.removeAll()
        },
        settingViewdata() {
          getRemoteDetailsList().then(res => {
            var dataTmp = []
            dataTmp = getFormat(res.data.data,dataTmp)
            dataTmp.forEach(item => {
              global.viewer.imageryLayers.addImageryProvider(
                  new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: item.selectItem.url,
                    maximumLevel: 18
                  })
              )
            })
            // this.farmSelectList = dataTmp
            // this.currentTitle = dataTmp[0].name
            // this.timeLineList = dataTmp[0].childItem
            // this.currentObj = dataTmp[0].childItem[0]

            this.farmSelectList=dataTmp
            this.currentTitle= dataTmp[0].name
            this.timeLineList= dataTmp[0].childItem
            this.currentObj= dataTmp[0].selectItem
            this.currentInd = dataTmp[0].selectItem.index
            // 初始化地图坐标 默认显示第一个基地
            global.viewer.camera.setView({
              // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
              // fromDegrees()方法，将经纬度和高程转换为世界坐标
              destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                  dataTmp[0].latitude, dataTmp[0].longitude, 1800.0
              ),
              orientation: {
                // 指向
                heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                // 视角
                pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                roll: 0.0
              }
            })
          })


        }
    }
}
@@ -412,7 +466,41 @@
    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 {
    position: absolute;
    top: 30px;
    left: 25%;
    transform: translate(-50%, 0);
    z-index: 99;
}

.r-time {
    position: absolute;
    top: 30px;
    right: 25%;
    transform: translate(50%, 0);
    z-index: 99;
}

.tool-box {
@@ -458,7 +546,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%;
    }