项目管理修改，底图切换修改

Surpriseplus

2023-03-21 c2a697c7399dcfb3ebae5333f05f91f488d2cb41

 src/components/ProjectOl.vue

@@ -1,16 +1,44 @@
<template>
  <div id="mapView" class="projectBox">
  <div
    id="mapView"
    class="projectBox"
  >
    <div class="Tools box_divm">
      <el-button
        type="success"
        icon="el-icon-plus"
        @click="drowPoint"
      ></el-button>
      <el-button
        type="danger"
        icon="el-icon-delete"
        @click="clearDrawPoint"
      ></el-button>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item :label="$t('dataManage.projectObj.longitude')">
          {{formInline.lon}}
        </el-form-item>
        <el-form-item :label="$t('dataManage.projectObj.latitude')">
          {{formInline.lat}}
        </el-form-item>
        <el-form-item :label="$t('dataManage.projectObj.country')">
          {{formInline.country}}
        </el-form-item>
        <el-form-item :label="$t('dataManage.projectObj.province')">
          {{formInline.province}}
        </el-form-item>
        <el-form-item :label="$t('dataManage.projectObj.county')">
          {{formInline.location}}
        </el-form-item>

        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-plus"
            @click="drowPoint"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="clearDrawPoint"
          ></el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
@@ -27,12 +55,20 @@
import Feature from 'ol/Feature';
import { Circle as CircleStyle, Style, Fill, Stroke } from 'ol/style';
import { Point } from 'ol/geom';
import { project_selectLocation } from '../api/api.js'
export default {
  data() {
    return {
      mapol: null,
      drawLayer: null,
      draw: null,
      formInline: {
        lon: '',
        lat: '',
        location: '',
        province: '',
        country: ''
      }
    };
  },
  methods: {
@@ -60,7 +96,7 @@
        .replace('POINT(', '')
        .replace(')', '');
      var a1 = value.split(' ');
      console.log(a1);
      this.showLoacation(a1)
      var a2 = transform(
        [parseFloat(a1[0]), parseFloat(a1[1])],
        'EPSG:4326',
@@ -90,6 +126,13 @@
        this.mapol.removeLayer(this.drawLayer);
        this.drawLayer = null;
        this.$store.state.projeOl = null;
        this.formInline = {
          lon: '',
          lat: '',
          location: '',
          province: '',
          country: ''
        }
      }
    },

@@ -114,12 +157,35 @@
        let geom = feature.getGeometry();
        var extent = geom.flatCoordinates;
        var a1 = transform([extent[0], extent[1]], 'EPSG:3857', 'EPSG:4326');

        this.showLoacation(a1)
        this.$store.state.projeOl =
          'POINT(' + a1[0].toFixed(6) + ' ' + a1[1].toFixed(6) + ')';
        this.mapol.removeInteraction(this.draw);
      });
    },
    async showLoacation(res) {
      this.formInline.lon = res[0].toFixed(6);
      this.formInline.lat = res[1].toFixed(6);
      const data = await project_selectLocation({
        x: res[0],
        y: res[1],
      });
      if (data.code == 200) {
        for (var i in data.result) {
          var key = data.result[i].key;
          var val = data.result[i].value;
          if (key == "国") {
            this.formInline.country = val;
          } else if (key == "省") {
            this.formInline.province = val;
          } else if (key == "市") {
            this.formInline.location = val;
          }
        }
      }
    }


  },
  mounted() {
    this.initOlMap();
@@ -127,17 +193,20 @@
};
</script>

<style>
<style lang="less" scoped>
.projectBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  /deep/.el-form-item {
    margin-bottom: 0px;
  }
}
.Tools {
  position: absolute;
   

  opacity: 0.9;
  z-index: 40;
  padding: 10px;