epmet-work-pc/src/views/modules/workSys/mapConfig.vue

<template>
  <div>
    <div style="position: relative">

      <div class="div_search">

        <el-select v-model="selAgencyId"
                   size="small"
                   placeholder="请选择或点击区域选择">
          <el-option @click.native="orgChange(index)"
                     v-for="(item,index) in subAgencyArray"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <div v-if="selAgencyId && subAgencyArray.length>0">
          <el-button v-if="showBtn&&!hasPolygon"
                     size="small"
                     style="margin-left:10px"
                     type="primary"
                     icon="el-icon-plus"
                     @click="handleAddPolygon">{{method==='mAddPolygon'?'取消绘制':'绘制区域'}}</el-button>
          <el-button v-if="showBtn&&hasPolygon"
                     size="small"
                     style="margin-left:10px"
                     type="primary"
                     icon="el-icon-edit"
                     @click="handleEditPolygon">{{method==='mEditPolygon'?'取消绘制':'重新绘制'}}</el-button>
          <!-- <el-button v-if="showBtn&&hasPolygon"
                     size="small"
                     style="margin-left:10px"
                     type="primary"
                     icon="el-icon-delete"
                     @click="handleDelPolygon">删除区域</el-button> -->
          <el-button v-if="showBtn"
                     size="small"
                     style="margin-left:10px"
                     type="primary"
                     icon="el-icon-upload2"
                     @click="handleManually">手动录入</el-button>
          <!-- <el-button v-if="showBtn"
                     style="margin-left:10px"
                     type="primary"
                     icon="el-icon-delete"
                     @click="handleSetOffset">设置偏差</el-button> -->
          <span v-if="showBtn&&hasPolygon"> 经度偏差：</span>
          <el-input-number v-if="showBtn&&hasPolygon"
                           resize="none"
                           size="small"
                           style="width:200px"
                           :precision="6"
                           :step="0.00001"
                           placeholder='请输入经度偏差'
                           v-model="xOffset">
          </el-input-number>
          <span v-if="showBtn&&hasPolygon"> 纬度偏差：</span>
          <el-input-number v-if="showBtn&&hasPolygon"
                           resize="none"
                           size="small"
                           :precision="6"
                           :step="0.00001"
                           style="width:200px"
                           placeholder='请输入维度偏差'
                           v-model="yOffset">
          </el-input-number>

          <el-button v-if="showBtn&&hasPolygon"
                     style="margin-left:10px"
                     type="primary"
                     size="small"
                     icon="el-icon-folder-add"
                     @click="handleOffsetOk">保存</el-button>
          <!-- <el-button v-if="showBtn"
                     style="margin-left:10px"
                     type="primary"
                     size="mini"
                     icon="el-icon-delete"
                     @click="handleOffsetCancel">预览</el-button> -->

        </div>
      </div>
      <div class="div_back">
        <el-button v-if="runNum>0"
                   style="margin-left:10px"
                   type="primary"
                   icon="el-icon-back"
                   @click="handleBack">返回上一级</el-button>
      </div>
      <div class="div_tip">
        <span>按住alt键单击标注，可以进入下一级地图</span>
      </div>
      <div id="map"
           class="div_map"
           :style="{height:mapHeight+'px'}"></div>

    </div>
    <el-dialog title="手动录入"
               :visible.sync="dialogVisible"
               width="50%"
               :before-close="handleClose">
      <div class="div_textarea">
        <el-input type="textarea"
                  :autosize="{ minRows: 20, maxRows: 50}"
                  :rows="20"
                  style="width:600px;height:500px"
                  placeholder='请复制坐标数据'
                  v-model="polygonManullyString">
        </el-input>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleManuallyOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import Projection from 'ol/proj/Projection.js';
import GeoJSON from 'ol/format/GeoJSON.js';
import { defaults as defaultControls, ZoomToExtent } from 'ol/control.js';
import { defaults as defaultInteractions, Modify, Select, DoubleClickZoom } from 'ol/interaction.js';
import { getCenter } from 'ol/extent.js';
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style.js';
import Draw from 'ol/interaction/Draw.js';
import { mapGetters } from "vuex";
import { Loading } from 'element-ui'; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import { altKeyOnly, click, pointerMove } from 'ol/events/condition';

var centerPointGlobal = [120.664619, 36.504963]
let loading;//加载动画

let x = 1500
let y = 700
let size = [x, y]
let extent = [-x, -y, x, y]
let projection = new Projection({
  code: 'xkcd-image',
  units: 'pixels',
  extent: extent
});

let map;
let mapView;
let gaodeMapLayer;//背景地图图层
let parentLayer;//上级组织图层
let parentSource;//上级组织多边形
let polygonLayer;//标注图层
let polygonSource;//标注多边形

let draw;//绘制handle
let select;//选中标注
let selectAltClick;
let selectedFeatures;

//标注的文字样式
var createTextStyle = function (feature) {
  return new Text({
    textAlign: undefined,
    font: "bold 18px Arial",
    //fontFamily: "Courier New, monospace",
    fontWeight: "bold",
    text: feature.values_.name,
    //text: "名称",
    fill: new Fill({ color: "#007ab9" }),
    stroke: new Stroke({ color: "#ffffff", width: 3 }),
    offsetY: 0,
    overflow: true,
  });
};
//上级组织标注样式
var parentStyleFunction = (function () {
  return function (feature) {
    return new Style({
      // fill: new Fill({
      //   color: [255, 255, 255, 0.3]
      // }),
      stroke: new Stroke({
        color: [0, 103, 182, 1],
        width: 2
      }),

      // text: createTextStyle(feature)
    });;
  };
})()

var polygonStyleFunction = (function () {
  return function (feature) {
    return new Style({
      fill: new Fill({
        color: [255, 255, 255, 0.3]
      }),
      stroke: new Stroke({
        color: [0, 153, 255, 1],
        width: 3
      }),

      text: createTextStyle(feature)
    });;
  };
})()

const vueGis = {
  name: 'HomeMap',
  data () {
    return {
      method: "",//绘制方法
      centerPoint: [],//中心点位置
      zoom: 14,//缩放范围：区14
      minZoom: 1,//最小缩放
      isMapLoaded: false,//地图是否加载完毕

      orgData: {},//当前组织对象
      orgId: '',
      orgLevel: '',

      subAgencyArray: [],//下拉框数据
      selAgencyIndex: 0,
      selAgencyId: '',//下拉框选中的组织id
      selAgency: {},//下拉框选中的组织对象
      hasPolygon: false,//下拉框选中的组织是否有标注
      showBtn: false,

      selPolygonId: '',//选择的多边形id
      selPolygon: {},

      //下钻层级记录
      runNum: 0,
      runAgency: [],
      center: [],
      zoom: null,
      parentPolygon: [],

      //手动录入弹出框
      dialogVisible: false,
      showOffset: false,
      // polygonManullyString: "POLYGON (( 120.33902844 36.10290786, 120.33928218 36.10292997, 120.33956336 36.10316381, 120.34016675 36.10367715, 120.34044913 36.10391476, 120.34045707 36.10392145, 120.34068696 36.10411489, 120.34103181 36.10436285, 120.34117309 36.10441824, 120.34134613 36.10447927, 120.34164715 36.10465122, 120.34124679 36.10507284, 120.34088128 36.10538902, 120.34076198 36.10549222, 120.34053890 36.10520966, 120.34044967 36.10507284, 120.34030632 36.10494761, 120.34019091 36.10484679, 120.33976558 36.10448095, 120.33966658 36.10439980, 120.33947147 36.10425822, 120.33932037 36.10417613, 120.33913002 36.10411307, 120.33895751 36.10406073, 120.33879451 36.10403693, 120.33864104 36.10403158, 120.33864031 36.10395235, 120.33863211 36.10305897, 120.33902175 36.10290728, 120.33902844 36.10290786))",
      polygonManullyString: "",
      polygonStringResult: '',

      xOffset: 0,
      yOffset: 0,
    }
  },
  async mounted () {
    //加载组织数据
    await this.loadOrgData()
    // this.runAgency.push(this.orgData)

    //初始化地图
    this.initMap()

    //上级组织多边形图层
    this.addParentLayer()
    this.loadParentPolygon()

    //添加标注图层
    this.addPolygonLayer()

    //加载当前园区的标注
    this.loadPolygon(this.subAgencyArray)

  },
  methods: {
    //切换下级组织
    orgChange (index) {

      this.selAgencyIndex = index

      selectedFeatures.clear()

      if (this.subAgencyArray.length > 0 && (index || index === 0)) {
        this.showBtn = true
        this.selAgency = this.subAgencyArray[index]
        if (this.selAgency.coordinates) {
          this.hasPolygon = true
          this.highlightPolygon()
        } else {
          this.hasPolygon = false
        }

      } else {
        this.showBtn = false
      }

    },

    //刷新地图  isRefreshView:是否需要重置中心点，如果是绘制、删除区域，不需要，如果是下钻或返回需要
    async refreshMap (isRefreshView) {
      //加载组织数据
      await this.loadOrgData()
      this.loadParentPolygon()
      //加载当前园区的标注
      this.loadPolygon(this.subAgencyArray)

      //重置地图中心点
      // if (isRefreshView) {
      //   this.setMapLocation()
      //   mapView.setCenter(this.centerPoint);
      //   mapView.setZoom(this.zoom);
      // }
    },

    //返回上一级组织
    handleBack () {

      this.center = this.runAgency[this.runNum - 1].center
      this.zoom = this.runAgency[this.runNum - 1].zoom
      this.selAgencyId = ''
      this.runNum--
      this.runAgency.pop()

      if (this.runNum === 0) {
        this.orgId = ''
        this.orgLevel = ''
      } else {
        this.orgId = this.runAgency[this.runAgency.length - 1].id
        this.orgLevel = this.runAgency[this.runAgency.length - 1].level
      }

      this.refreshMap(true)

    },

    //加载组织数据
    async loadOrgData () {
      const url = "/gov/org/agency/maporg"
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
      let params = {
        orgId: this.orgId,
        level: this.orgLevel
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.orgData = data
        this.subAgencyArray = []
        if (this.runNum === 0) {//第一次进入，绘制本级
          this.subAgencyArray.push(data)
          // this.selAgencyId = data.id
        } else {
          this.parentPolygon = []
          this.parentPolygon.push(data)

          if (data.children && data.children.length > 0) {
            this.subAgencyArray = data.children
            // this.selAgencyId = this.subAgencyArray[0].id
          } else {
            this.subAgencyArray = []
            // this.selAgencyId = ''
          }
        }

      } else {
        this.$message.error(msg)
      }

    },

    //加载父级组织多边形
    loadParentPolygon () {
      parentSource.clear()//清空标注

      let featureData = []//标注数据
      if (this.parentPolygon && this.parentPolygon.length > 0) {//判断是否存在下级标注
        let oneData = {}

        this.parentPolygon.forEach(agencyItem => {

          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
            oneData = {
              type: 'Feature',
              id: agencyItem.id,
              properties: {
                id: agencyItem.id,
                level: agencyItem.level,
                name: agencyItem.name
              },
              geometry: {
                type: 'Polygon',
                coordinates: [],
              },
            }
            let coorArray = agencyItem.coordinates.split(',')//坐标数组

            let itemArray = []//单个点位的[lon,lat]，数组
            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组

            coorArray.forEach((item, index) => {
              itemArray.push(item)
              if (index % 2 == 0) {//偶

              } else {//奇
                polygonArray.push(itemArray)
                itemArray = []
              }

            });
            oneData.geometry.coordinates.push(polygonArray)
            featureData.push(oneData)
          }
        });
      }

      if (featureData && featureData.length > 0) {
        var geojsonObject = {
          'type': 'FeatureCollection',
          'features': featureData
        };
        let feature = (new GeoJSON()).readFeatures(geojsonObject)
        parentSource.addFeatures(feature)

      }

    },
    //加载当前园区的标注
    loadPolygon (subAgencyArray) {
      polygonSource.clear()//清空标注

      let featureData = []//标注数据
      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
        let oneData = {}

        subAgencyArray.forEach(agencyItem => {

          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
            oneData = {
              type: 'Feature',
              id: agencyItem.id,
              properties: {
                id: agencyItem.id,
                level: agencyItem.level,
                name: agencyItem.name
              },
              geometry: {
                type: 'Polygon',
                coordinates: [],
              },
            }
            let coorArray = agencyItem.coordinates.split(',')//坐标数组

            let itemArray = []//单个点位的[lon,lat]，数组
            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组

            coorArray.forEach((item, index) => {
              itemArray.push(item)
              if (index % 2 == 0) {//偶

              } else {//奇
                polygonArray.push(itemArray)
                itemArray = []
              }

            });
            oneData.geometry.coordinates.push(polygonArray)
            featureData.push(oneData)
          }
        });
      }

      if (featureData && featureData.length > 0) {
        var geojsonObject = {
          'type': 'FeatureCollection',
          'features': featureData
        };
        let feature = (new GeoJSON()).readFeatures(geojsonObject)
        polygonSource.addFeatures(feature)

      }
      this.orgChange(this.selAgencyIndex)
    },

    //选择feature
    selectFeature (e) {

      if (e.selected.length > 0) {
        console.log("selectFeature22222222222222222222222")
        if (this.method === undefined || this.method === '') {
          this.selAgencyId = e.selected[0].id_
          this.subAgencyArray.forEach((element, index) => {
            if (element.id === e.selected[0].id_) {
              this.selAgencyIndex = index
              this.orgChange(index)
            }

          });
        }
      }

    },
    //下钻到下一级
    toSubAgency (e) {
      if (!e.selected[0]) {
        return false
      }

      if (this.method != 'mAddPolygon' && this.level != 'neighborHood') {

        this.selAgencyId = ''
        //下钻到下一级
        this.subAgencyArray.forEach(item => {
          if (item.id === e.selected[0].id_) {
            this.selPolygonId = item.id
            this.selPolygon = item
            this.orgId = item.id
            this.orgLevel = item.level

          }
        });

        this.runNum++
        this.selPolygon.center = map.getView().getCenter()
        this.selPolygon.zoom = map.getView().getZoom()
        console.log('center', map.getView().getCenter())
        console.log('zoom', map.getView().getZoom())


        this.runAgency.push(this.selPolygon)
        this.selAgencyIndex = 0
        this.refreshMap(true)

      }
    },

    //高亮某个标注
    highlightPolygon () {

      let features = polygonSource.getFeatures()
      features.forEach(element => {

        if (element.id_ === this.selAgencyId) {

          selectedFeatures.push(element)
          let polygon = element.getGeometry();
          map.getView().fit(polygon, map.getSize());
          this.zoom = map.getView().getZoom() - 2
          mapView.setZoom(this.zoom);
        }
      });



    },
    //设置地图定位的中心点和缩放级别
    setMapLocation () {
      this.centerPoint = []

      if (this.center && this.center.length > 0) {
        this.centerPoint = this.center
      } else if (this.orgData.longitude && this.orgData.latitude) {

        this.centerPoint.push(this.orgData.longitude)
        this.centerPoint.push(this.orgData.latitude)
      } else {

        this.centerPoint = centerPointGlobal
      }

      if (!this.zoom) {
        this.setZoom(this.orgData.agencyLevel)
      }
    },

    //根据组织层级设置缩放级别
    setZoom (agencyLevel) {
      if (agencyLevel === 'district') {
        this.zoom = 12
      } else if (agencyLevel === 'street') {
        this.zoom = 13
      } else if (agencyLevel === 'community') {
        this.zoom = 14
      }

    },

    initMap () {
      this.setMapLocation()

      gaodeMapLayer = new TileLayer({
        title: "地图",
        source: new XYZ({
          //指定url瓦片
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: true//x方向平铺，也可以选择false
        }),
        zIndex: 20
      });

      mapView = new View({
        //中心点坐标
        center: this.centerPoint,
        // projection: 'EPSG:3857',
        projection: 'EPSG:4326',
        zoom: this.zoom,
        minZoom: this.minZoom
      }),
        //初始化map和地图底图
        //创建地图容器
        map = new Map({
          layers: [gaodeMapLayer],
          //加载瓦片图层数据
          view: mapView,
          target: 'map'
          //目标加载到map中
        })

      map.on('singleclick', function (e) {
        // console.log(e.coordinate)
        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));

      })

      //去除双击放大效果
      const dblClickInteraction = map
        .getInteractions()
        .getArray()
        .find(interaction => {
          return interaction instanceof DoubleClickZoom;
        });
      map.removeInteraction(dblClickInteraction);

    },

    //添加标注图层
    addParentLayer () {
      parentSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
      });

      parentLayer = new VectorLayer({
        source: parentSource,
        style: parentStyleFunction,
        zIndex: 50
      });


      map.addLayer(parentLayer)


    },
    //添加标注图层
    addPolygonLayer () {
      polygonSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
      });

      polygonLayer = new VectorLayer({
        source: polygonSource,
        style: polygonStyleFunction,
        zIndex: 50
      });

      //选中多边形后的样式
      var overlayStyle = (function () {

        return function (feature) {
          var styles = {};
          styles['Polygon'] = [
            new Style({
              stroke: new Stroke({
                color: '#ec9000',
                width: 2
              })
            }),

            new Style({
              fill: new Fill({
                color: 'rgba(0, 0, 255, 0.1)'
              })
            }),
            new Style({
              text: createTextStyle(feature)
            })
          ];
          styles['MultiPolygon'] = styles['Polygon'];
          return styles[feature.getGeometry().getType()];
        };
      })();

      select = new Select({
        style: overlayStyle
      });

      selectAltClick = new Select({
        condition: function (mapBrowserEvent) {
          return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent);
        },
      });

      selectedFeatures = select.getFeatures();

      map.addLayer(polygonLayer)
      map.addInteraction(select);
      map.addInteraction(selectAltClick);

      select.on('select', e => {
        this.selectFeature(e)
      });
      selectAltClick.on('select', e => {
        this.toSubAgency(e)
      });

    },
    //点击【手动录入】
    handleManually () {
      this.dialogVisible = true
    },

    //点击【手动录入】
    handleClose () {
      this.dialogVisible = false
    },

    handleManuallyOk () {
      //转化成需要的格式
      //120.54033616308595,36.53603370922851,120.69620469335939,36.5408402277832,120.63166001562502,36.46771248120117,120.52728989843752,36.458786089599606,120.54033616308595,36.53603370922851
      //中国经纬度范围
      // 经度范围：73°33′E至135°05′E 东经
      // 纬度范围：3°51′N至53°33′N 北纬

      const arrayString = this.polygonManullyString
      let array = arrayString.split(/[, ]/)
      console.log(array)
      this.polygonStringResult = ''
      array.forEach(element => {
        let num = Number(element)
        if (num) {
          this.polygonStringResult = this.polygonStringResult + element + ','
        }

      });

      this.polygonStringResult = this.polygonStringResult.substring(0, this.polygonStringResult.length - 1)

      this.addPolygon(this.polygonStringResult)
    },

    handleSetOffset () {
      this.showOffset = true
    },
    handleOffsetOk () {
      let selPolygonString = ""
      let offsetPolygonString = ''//偏移后的坐标字符串
      this.subAgencyArray.forEach(element => {
        if (element.id === this.selAgencyId && element.coordinates && element.coordinates.length > 0) {
          selPolygonString = element.coordinates
        }
      });

      if (selPolygonString) {
        let tempArray = selPolygonString.split(',')

        tempArray.forEach((element, index) => {
          let aaa = 0

          if (index % 2 === 0) {//偶数
            aaa = parseFloat(element) + parseFloat(this.xOffset)
          } else {
            aaa = parseFloat(element) + parseFloat(this.yOffset)
          }

          if (index % 2 !== 0) {//奇数

          }
          offsetPolygonString = offsetPolygonString + aaa + ','

        });

        offsetPolygonString = offsetPolygonString.substring(0, offsetPolygonString.length - 1)
      }



      console.log('selPolygonString', selPolygonString)
      console.log('offsetPolygonString', offsetPolygonString)

      this.addPolygon(offsetPolygonString)


    },
    handleSetOffset () {
      this.handleOffsetCancel = false
    },

    //点击【绘制区域】
    handleAddPolygon () {
      if (this.method === 'mAddPolygon') {
        this.method = ""
        map.removeInteraction(draw);
      } else if (this.selAgency) {
        this.method = 'mAddPolygon';
        //绘制
        this.drawPolygon()
      } else {
        this.$message({
          type: "warning",
          message: "请先选择组织"
        });
      }


    },

    //点击【重新绘制】
    handleEditPolygon () {
      if (this.method === 'mEditPolygon') {
        this.method = ""
        map.removeInteraction(draw);
        this.loadPolygon(this.subAgencyArray)
      } else {

        this.method = 'mEditPolygon';
        //暂时隐藏要重新绘制的标注
        this.hidePolygon()

        //绘制
        this.drawPolygon()
      }

    },

    //点击【删除标注】
    handleDelPolygon () {
      map.removeInteraction(draw);
      this.$confirm("确认删除" + this.selAgency.name + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.method = 'delPolygon';
          this.delPolygon()
        })
        .catch(err => {
          if (err == "cancel") {
            // this.$message({
            //   type: "info",
            //   message: "已取消删除"
            // });
          }
          this.method = ""
        });


    },

    //隐藏Polygon（前端隐藏，非删除）
    hidePolygon () {
      let polygonTempArray = []

      this.subAgencyArray.forEach(element => {
        if (element.id !== this.selAgencyId) {
          polygonTempArray.push(element)
        }
      });

      this.loadPolygon(polygonTempArray)

    },

    //绘制Polygon
    drawPolygon () {
      draw = new Draw({
        source: polygonSource,
        type: "Polygon"
      });
      map.addInteraction(draw);

      draw.on('drawend', feature => {
        this.polygonCoor = feature.feature.values_.geometry.flatCoordinates

        let coorString = ""
        for (let i = 0; i < this.polygonCoor.length; i++) {
          coorString = coorString + this.polygonCoor[i] + ","
        }
        if (this.polygonCoor.length > 0) {
          coorString = coorString.substring(0, coorString.length - 1)
        }

        if (this.method === 'mEditPolygon') {
          this.$confirm("是否确认覆盖原有区域?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.addPolygon(coorString)

            })
            .catch(err => {
              this.loadPolygon(this.subAgencyArray)


            });

        } else {
          this.addPolygon(coorString)
        }

        this.method = ""
        map.removeInteraction(draw);

      });
    },

    //新增标注
    async addPolygon (coorString) {
      console.log(coorString)
      const url = "/gov/org/agency/mapaddarea"

      let params = {
        orgId: this.selAgency.id,
        level: this.selAgency.level,
        coordinates: coorString
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.$message({
          type: "success",
          message: "绘制成功"
        });
        if (this.dialogVisible) {
          this.dialogVisible = false
        }
        this.refreshMap(false)
      } else {
        this.$message({
          type: "error",
          message: "绘制失败，请重试"
        });
      }

    },

    //删除标注
    async delPolygon () {
      const url = "/gov/org/agency/mapdelarea"

      let params = {
        orgId: this.selAgency.id,
        level: this.selAgency.level

      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.$message({
          type: "success",
          message: "删除成功"
        });
        this.method = ""
        this.selAgencyIndex = 0
        this.refreshMap(false)
      }


    },
    //开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, //是否锁定
        text: '正在加载……', //加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' //背景颜色
      });

    },

    //结束加载动画
    endLoading () {
      //clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  props: {

    vueFlag: {
      type: String,
      default: "alarm"
    }
  },
  computed: {

    extentXOffset () {

      if (this.clientHeight < 900) {
        return 0.88
      } else {
        return 0.95
      }
    },
    extentYOffset () {

      return 0.95
    },
    imgExtent () {

      return [-x * this.extentXOffset, -y * this.extentYOffset, x * this.extentXOffset, y * this.extentYOffset]
    },
    mapHeight () {

      return this.clientHeight - 170;

    },
    // zoom: {
    //   get () {
    //     //根据不同屏幕分辨率，控制zoom大小
    //     if (this.clientHeight < 900) {
    //       return 2.3
    //     } else {
    //       return 2.8
    //     }
    //   },
    //   set (value) {
    //   }
    // },
    ...mapGetters(["clientHeight"])

  },
  components: {},
}
export default vueGis;
</script>

<style scoped>
.div_search {
  z-index: 10;

  display: flex;
}
.div_back {
  z-index: 10;
  right: 10px;
  top: 1px;
  position: absolute;
  display: flex;
}
.div_tip {
  z-index: 10;
  position: absolute;
  bottom: 1px;
  right: 2px;
  background: rgba(255, 255, 255, 0.6);
  padding: 3px 10px;
  font-size: 15px;
}
.div_map {
  margin-top: 15px;
  width: 100%;
}
.div_textarea {
  text-align: center;
}
</style>  
<style>
.ol-overlaycontainer-stopevent {
  display: none;
}
</style>