代码更新

suerprisePlus

2024-05-30 05d9fb2ae038a5b3bf80eaaa864141bc278084a5

 src/components/ProjectOl.vue

@@ -1,230 +1,230 @@
<template>
  <div
    id="mapView"
    class="projectBox"
  >
    <div class="Tools box_divm">
      <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>

<script>
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj';
import VectorSource from 'ol/source/Vector';
import { Vector as VectorLayer, Tile } from 'ol/layer';
import { Draw } from 'ol/interaction';
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: {
    initOlMap() {


      var val = 'http://{host}/LFData/2d/tiles/img/{z}/{x}/{y}.png';
      if (val.indexOf('{host}') > -1) {
        val = val.replace("{host}", iisHost)
      }
      var vectorLayer = new TileLayer({
        source: new XYZ({
          url: val,
        }),
      });



      this.mapol = new Map({
        target: 'mapView',
        layers: [vectorLayer],
        view: new View({
          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4,
          projection: 'EPSG:3857',
        }),
      });
      if (this.$store.state.projeOl != null) {
        this.showPointInMap();
      }
    },
    showPointInMap() {
      var value = this.$store.state.projeOl
        .replace('POINT(', '')
        .replace(')', '');
      var a1 = value.split(' ');
      this.showLoacation(a1)
      var a2 = transform(
        [parseFloat(a1[0]), parseFloat(a1[1])],
        'EPSG:4326',
        'EPSG:3857'
      );
      var feature = new Feature({
        geometry: new Point(a2),
      });
      feature.setStyle(
        new Style({
          image: new CircleStyle({
            fill: new Fill({
              color: 'blue',
            }),
            radius: 4,
          }),
        })
      );
      let source = new VectorSource();
      source.addFeature(feature);
      this.drawLayer = new VectorLayer();
      this.drawLayer.setSource(source);
      this.mapol.addLayer(this.drawLayer);
    },
    clearDrawPoint() {
      if (this.drawLayer) {
        this.mapol.removeLayer(this.drawLayer);
        this.drawLayer = null;
        this.$store.state.projeOl = null;
        this.formInline = {
          lon: '',
          lat: '',
          location: '',
          province: '',
          country: ''
        }
      }
    },

    drowPoint() {
      const source = new VectorSource({ wrapX: false });
      if (this.drawLayer) {
        this.mapol.removeLayer(this.drawLayer);
      }
      this.drawLayer = new VectorLayer({
        source: source,
      });
      this.mapol.addLayer(this.drawLayer);
      this.draw = new Draw({
        source: source, // 和图层使用同一个source，画的图形在图层上，图层在地图上即可展示
        type: 'Point', // 可选择三角形，多边形，圆形等具体见官网demo
        freehand: false, // 画选还是点选
      });
      // 添加交互
      this.mapol.addInteraction(this.draw);
      this.draw.on('drawend', (e) => {
        let feature = e.feature;
        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 = parseFloat(res[0]).toFixed(6);
      this.formInline.lat = parseFloat(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();
  },
};
</script>

<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;
  width: 95%;
}
.primary {
  background: #409eff;
  border: #409eff;
  color: white;
}
</style>
<template>

  <div

    id="mapView"

    class="projectBox"

  >

    <div class="Tools box_divm">

      <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>



<script>

import TileLayer from 'ol/layer/Tile';

import XYZ from 'ol/source/XYZ';

import Map from 'ol/Map';

import View from 'ol/View';

import { transform } from 'ol/proj';

import VectorSource from 'ol/source/Vector';

import { Vector as VectorLayer, Tile } from 'ol/layer';

import { Draw } from 'ol/interaction';

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: {

    initOlMap() {





      var val = '{host}/LFData/2d/tiles/img/{z}/{x}/{y}.png';

      if (val.indexOf('{host}') > -1) {

        val = val.replace("{host}", iisHost)

      }

      var vectorLayer = new TileLayer({

        source: new XYZ({

          url: val,

        }),

      });







      this.mapol = new Map({

        target: 'mapView',

        layers: [vectorLayer],

        view: new View({

          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),

          zoom: 4,

          projection: 'EPSG:3857',

        }),

      });

      if (this.$store.state.projeOl != null) {

        this.showPointInMap();

      }

    },

    showPointInMap() {

      var value = this.$store.state.projeOl

        .replace('POINT(', '')

        .replace(')', '');

      var a1 = value.split(' ');

      this.showLoacation(a1)

      var a2 = transform(

        [parseFloat(a1[0]), parseFloat(a1[1])],

        'EPSG:4326',

        'EPSG:3857'

      );

      var feature = new Feature({

        geometry: new Point(a2),

      });

      feature.setStyle(

        new Style({

          image: new CircleStyle({

            fill: new Fill({

              color: 'blue',

            }),

            radius: 4,

          }),

        })

      );

      let source = new VectorSource();

      source.addFeature(feature);

      this.drawLayer = new VectorLayer();

      this.drawLayer.setSource(source);

      this.mapol.addLayer(this.drawLayer);

    },

    clearDrawPoint() {

      if (this.drawLayer) {

        this.mapol.removeLayer(this.drawLayer);

        this.drawLayer = null;

        this.$store.state.projeOl = null;

        this.formInline = {

          lon: '',

          lat: '',

          location: '',

          province: '',

          country: ''

        }

      }

    },



    drowPoint() {

      const source = new VectorSource({ wrapX: false });

      if (this.drawLayer) {

        this.mapol.removeLayer(this.drawLayer);

      }

      this.drawLayer = new VectorLayer({

        source: source,

      });

      this.mapol.addLayer(this.drawLayer);

      this.draw = new Draw({

        source: source, // 和图层使用同一个source，画的图形在图层上，图层在地图上即可展示

        type: 'Point', // 可选择三角形，多边形，圆形等具体见官网demo

        freehand: false, // 画选还是点选

      });

      // 添加交互

      this.mapol.addInteraction(this.draw);

      this.draw.on('drawend', (e) => {

        let feature = e.feature;

        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 = parseFloat(res[0]).toFixed(6);

      this.formInline.lat = parseFloat(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();

  },

};

</script>



<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;

  width: 95%;

}

.primary {

  background: #409eff;

  border: #409eff;

  color: white;

}

</style>