tz-onest-data/data-ui/src/views/data/common/ISuperMap.vue

<template>
  <div>
    <el-dialog title="经纬度" :visible.sync="showLongitude" append-to-body width="80%"  @close='close' >
      <el-input v-show="false" v-model="obj.longitude"></el-input>
      <el-input v-show="false" v-model="obj.latitude"></el-input>
      <Supermap ref="Supermap" style="width: 100%;height: 75vh;" :mapDiv="uuid" :mapSite="{doubleClickZoom:false}"
                :codes="['9fa5']" :isSideBySide="false" :showLatLng="showLL"></Supermap>
      <el-button type="primary" @click="closeDialog">确定</el-button>
    </el-dialog>
    <el-dialog title="线坐标" :visible.sync="showLongitudex" append-to-body @close='close' width="80%" >
      <Supermap ref="LineSupermap" style="width: 100%;height:75vh"
                :mapDiv="uuid" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
                :showLineLatLng="showAreaLatLng"></Supermap>
      <el-button type="primary" @click="closeDialog">确定</el-button>
    </el-dialog>
    <el-dialog title="区域坐标" :visible.sync="showLongitudeq"  @close='close' width="80%" >
      <Supermap ref="areaSupermap" style="width: 100%;height:75vh"
                :mapDiv="uuid" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']"
                :isSideBySide="false" :showAreaLatLng="showAreaLatLng"></Supermap>
      <el-button type="primary" @click="closeDialog">确定</el-button>
    </el-dialog>
    <el-dialog :title="(sign===1?'经纬度':(sign===2?'线坐标':'区域坐标'))" :visible.sync="visible" append-to-body width="80%"
               @close='close'>
      <supermap ref="supermap" style="width: 100%; height: 75vh" :putSmUserID_layer="putSmUserID_layer"
                @showLatLng="showLatLng"></supermap>
      <el-button type="primary" @click="closeDialog">确定</el-button>
    </el-dialog>
  </div>
</template>


<script>
  import {getConfigKey} from "@/api/system/config";

  const uuidv4 = require("uuid/v4")
  import supermap from '@/views/components/supermap-2.5d';
  import Supermap from '@/views/components/supermap';


  export default {
    //基本地图
    name: "ISuperMap",
    components: {supermap, Supermap},
    data() {
      return {
        uuid: '',
        sign: undefined,
        title: "",
        visible: false,
        showLongitude: false,
        showLongitudex: false,
        showLongitudeq: false,
        obj: {
          longitude: undefined,
          latitude: undefined,
          xiantude: undefined,
        }
      };
    },
    methods: {
      putSmUserID_layer: function (entity) {

      },
      showAreaLatLng: function (latlng) {
        this.obj.xiantude = JSON.stringify(latlng);
      },
      showLatLng: function (val) {
        if (this.sign === 1) {
          this.obj.longitude = val.longitude;
          this.obj.latitude = val.latitude;
        }
        if (this.sign === 2 || this.sign === 3) {
          this.obj.xiantude = JSON.stringify(val.markerList);
        }
      },
      showLL: function (lat, lng) {
        this.obj.latitude = lat;
        this.obj.longitude = lng;
      },
      init(sign, form,NB,type) {
        const regex = /^\d+(\.\d+)?$/;
        if (this.$parent.form.longitude != null) {
          if (!regex.test(form.longitude) ) {
            this.$message.warning('无效字符');
            this.visible = false;
            this.$parent.ISuperMapvisible = false;
            this.$parent.form.latitude = null;
            this.$parent.form.longitude = null;
          }
        }
        if (this.$parent.form.latitude != null) {
          if (!regex.test(form.latitude)) {
            this.$message.warning('无效字符');
            this.visible = false;
            this.$parent.ISuperMapvisible = false;
            this.$parent.form.latitude = null;
            this.$parent.form.longitude  = null;
          }
        }
        if(NB=='NB'){
          getConfigKey('supermapKey').then(response => {
            let isN = response.msg;
            if (isN === 'true') this.visible = true;
            if (isN === 'false') sign === 2 ? this.showLongitudex = true : (sign === 1 ? this.showLongitude = true : this.showLongitudeq = true);
            this.sign = sign;
            this.uuid = uuidv4();
            this.$nextTick(() => {
                //2.5d 线/区域 轨迹
                if ((this.sign === 2 && this.visible === true) || (this.sign === 3 && this.visible === true)) {
                  const arr = JSON.parse(form.xiantude == undefined || form.xiantude == null ? "[]" : form.xiantude);
                  setTimeout(() => {
                    this.$refs.supermap.superMapInfo(this.sign, arr,NB);
                  }, 2000);
                }
              }
            )
          })
        }
        else {
          getConfigKey('supermapKey').then(response => {
            let isN = response.msg;
            if (isN === 'true') this.visible = true;
            if (isN === 'false') sign === 2 ? this.showLongitudex = true : (sign === 1 ? this.showLongitude = true : this.showLongitudeq = true);
            this.sign = sign;
            this.uuid = uuidv4();
            this.$nextTick(() => {
                //2d 点
                if (this.sign === 1 && this.showLongitude === true) {
                  setTimeout(() => {
                    this.$refs.Supermap.clearM(false);
                    if (form.longitude!==null && form.longitude!=='' && form.longitude!==undefined) {
                      this.$refs.Supermap.setMarkers([{lng: form.longitude, lat: form.latitude, icon: "marker"}])
                    }
                  }, 2000);
                }
                // //2.5d 点
                // if (this.sign === 1 && this.visible === true) {
                //   setTimeout(() => {
                //     this.$refs.supermap.superMapInfo(this.sign, {longitude: form.longitude, latitude: form.latitude});
                //   }, 2000)
                // }
                //2.5d 点
                if (this.sign === 1 && this.visible === true) {
                  setTimeout(() => {
                    this.$refs.supermap.superMapInfo(this.sign, {longitude: form.longitude, latitude: form.latitude});
                  }, 2000);
                  setTimeout(() => {
                    this.$refs.supermap.loadRoad()
                  }, 7000);
                }
                //2.5d 线/区域
                if ((this.sign === 2 && this.visible === true) || (this.sign === 3 && this.visible === true)) {
                  const arr = JSON.parse(form.xiantude == undefined || form.xiantude == null ? "[]" : form.xiantude);
                  const array = [];
                  for (let i = 0; i < arr.length; i++) {
                    array.push(arr[i].lng);
                    array.push(arr[i].lat);
                  }
                  setTimeout(() => {
                    this.$refs.supermap.superMapInfo(this.sign, {
                      graphicsList: array && array.length > 0 ? array : [],
                      color: "rgba(23,22,22,0)",
                      withAlpha: 0.8
                    });
                  }, 2000)
                  if (type == 1 || type == 2 || type == 3 || type ==6){
                    setTimeout(() => {
                      type == 1 ? this.$refs.supermap.loadLindi() : (type == 2 ? this.$refs.supermap.loadShuixi() : (type == 3 ? this.$refs.supermap.loadRoad() :this.$refs.supermap.loadNongtian()))
                    }, 10000);
                  }

                }


                //2d 线
                if (this.sign === 2 && this.showLongitudex === true) {
                  const arr = JSON.parse(form.xiantude);
                  setTimeout(() => {
                    this.$refs.LineSupermap.setConnectList(arr && arr.length > 0 ? arr : [], "#1a1919");
                  }, 2000)
                }
                //2d 区域
                if (this.sign === 3 && this.showLongitudeq === true) {
                  const arr = JSON.parse(form.xiantude);
                  setTimeout(() => {
                    this.$refs.areaSupermap.setGraphicsList(
                      arr && arr.length > 0 ? arr : [],
                      "#1a1919");
                  }, 2000)
                }
              }
            )
          })

        }
      },
      closeDialog() {
        if (this.obj.longitude || (this.obj.xiantude && JSON.parse(this.obj.xiantude).length > 0)) this.$emit('send', this.obj);
        this.visible = false;
        this.showLongitude = false;
        this.showLongitudex = false;
        this.showLongitudeq = false;
      },
      close() {
        this.$emit('send', true);
        this.visible = false;
        this.showLongitude = false;
        this.showLongitudex = false;
        this.showLongitudeq = false;
      },
    }

  };
</script>