dzhh-frontend/.svn/pristine/11/1192b3789a17616ab1bbd962f7fbbbd5a0d6aab8.svn-base

<template>
    <j-modal
        :title='title'
        :width='width'
        :visible='visible'
        switchFullscreen
        @ok='handleOk'
        :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
        @cancel='handleCancel'
        cancelText='关闭'>
        <div class='attrPane'>
            <rm-boundary-marker-form ref='realForm' @ok='submitCallback' :lng='this.lng' :lat='this.lat'
                                     :disabled='disableSubmit' @coordsChange='coordsChange'></rm-boundary-marker-form>
        </div>
        <div class='geomPane'>
          <basic-map ref="locMap" height='775px' layersUrl='/resManager.catalog/rescatalog/resList' :model="{...model,layerName:'界桩点'}"></basic-map>
        </div>
    </j-modal>
</template>

<script>

import RmBoundaryMarkerForm from './RmBoundaryMarkerForm'
import BasicMap from "../../../../../components/BasicMap/BasicMap";
import proj4 from "proj4";
import {register} from "ol/proj/proj4";
import {transform} from "ol/proj";

export default {
    name: 'RmBoundaryMarkerModal',
    components: {
      BasicMap,
        RmBoundaryMarkerForm
    },
    data() {
        return {
            lng: 0,
            lat: 0,
            title: '',
            width: 1200,
            visible: false,
            disableSubmit: false,
          model:{},
        }
    },
  beforeCreate() {
    proj4.defs("EPSG:4548",
      "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
    proj4.defs("EPSG:4527",
      "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
    proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");

    register(proj4);
  },
    methods: {
        add() {
            this.visible = true
            this.$nextTick(() => {
                this.$refs.realForm.add()
            })
        },
        edit(record) {
          this.model = record;
          let coord=[record.hzb,record.zzb];
          //测绘系统的坐标系与正常坐标系XY轴是反的，横坐标对应纬度
          if (record.hzb > 39000000 || record.zzb > 39000000) {        //情况1:4527坐标，带带号投影坐标，坐标位数应为前8后7
            this.lng = record.hzb>record.zzb?record.hzb:record.zzb;
            this.lat = record.hzb>record.zzb?record.zzb:record.hzb;
            coord= transform([this.lng,this.lat], 'EPSG:4527', 'EPSG:4490');
          } else if (record.hzb > 180 || record.zzb > 180) {           //情况2:4548坐标，无带号投影坐标，坐标位数应为前6后7
            this.lng = record.hzb<record.zzb?record.hzb:record.zzb
            this.lat = record.hzb<record.zzb?record.zzb:record.hzb
            coord = transform([this.lng,this.lat], 'EPSG:4548', 'EPSG:4490');
          } else {                                                     //情况3:4490坐标，经纬度坐标
            this.lng = record.hzb>record.zzb?record.hzb:record.zzb
            this.lat = record.hzb>record.zzb?record.zzb:record.hzb
          }
          this.lng=parseFloat(coord[0].toFixed(6));
          this.lat=parseFloat(coord[1].toFixed(6));
            this.visible = true
            this.$nextTick(() => {
                this.$refs.realForm.edit({...record})
            })
          this.model=record;
        },
        close() {
            this.$emit('close')
            this.visible = false
        },
        handleOk() {
            this.$refs.realForm.submitForm()
        },
        submitCallback() {
            this.$emit('ok')
            this.visible = false
        },
        handleCancel() {
            this.close()
        },
        locateByCoords() {
            let loc_x = this.hzb
            let loc_y = this.zzb
            this.$nextTick(() => {
                this.$refs.locMap.locateByCoords(loc_x, loc_y)
            })
        },
        coordsTranslated(coords) {
            this.lng = coords[0].toFixed(6)
            this.lat = coords[1].toFixed(6)
        },
        locMapReady() {
            this.locateByCoords()
        },
        coordsChange(x,y) {
            this.$refs.locMap.locateByCoords({...this.model,lng:x,lat:y,geoinfo:''});
            this.edit({...this.model,hzb:x,zzb:y});
        }
    }
}
</script>

<style scoped>
.attrPane {
    width: 33%;
    display: inline-block;
    overflow-y: auto;
    height: 775px;
}

.geomPane {
    width: 66%;
    display: inline-block;
}
</style>