重新绘制

epmet-oper-web/src/views/modules/workSys/basicInfoMap.vue

@@ -0,0 +1,602 @@
+<template>
+  <div style="position: relative">
+
+    <!-- 组织路由 -->
+    <div>组织路由</div>
+
+    <div class="div_search">
+      <el-select v-model="selAgencyId"
+                 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>
+
+      <el-button v-if="showBtn&&!hasPolygon"
+                 style="margin-left:10px"
+                 type="primary"
+                 icon="el-icon-plus"
+                 @click="handleSearch">搜索</el-button>
+
+    </div>
+
+    <div class="div_content">
+
+      <div id="map"
+           class="div_map"
+           :style="{height:mapHeight+'px'}"></div>
+      <div class="div_data"></div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import { ZoomSlider, Zoom } from 'ol/control.js';
+import ImageLayer from 'ol/layer/Image.js';
+import Static from 'ol/source/ImageStatic.js';
+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 { transform } from 'ol/proj'
+import { altKeyOnly, click, pointerMove } from 'ol/events/condition';
+
+
+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 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 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: [],
+
+    }
+  },
+  async mounted () {
+    //加载组织数据
+    await this.loadOrgData()
+
+    //初始化地图
+    this.initMap()
+
+    //添加标注图层
+    this.addPolygonLayer()
+
+    //加载当前园区的标注
+    this.loadPolygon()
+
+  },
+  methods: {
+    //查询
+    handleSearch (index) {
+
+      this.selAgencyIndex = index
+
+      selectedFeatures.clear()
+
+      if (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
+      }
+
+    },
+
+    //刷新地图
+    async refreshMap (isRefreshView) {
+      //加载组织数据
+      await this.loadOrgData()
+
+      //加载当前园区的标注
+      await this.loadPolygon()
+
+      //重置地图中心点
+      if (isRefreshView) {
+        this.setMapLocation()
+        mapView.setCenter(this.centerPoint);
+        mapView.setZoom(this.zoom);
+      }
+    },
+
+    //高亮某个标注
+    highlightPolygon () {
+
+      let features = polygonSource.getFeatures()
+      features.forEach(element => {
+
+        if (element.id_ === this.selAgencyId) {
+
+          selectedFeatures.push(element)
+        }
+      });
+
+    },
+
+    //返回上一级组织
+    handleBack () {
+
+      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.runAgency.push(data)
+
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children
+          this.selAgencyId = this.subAgencyArray[0].id
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载当前园区的标注
+    loadPolygon () {
+      polygonSource.clear()//清空变电站标注
+
+      let featureData = []//标注数据
+      if (this.subAgencyArray && this.subAgencyArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        this.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) {
+      console.log(e)
+      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) {
+      console.log(e)
+      if (this.method != 'mAddPolygon' && this.level != 'neighborHood') {
+        //下钻到下一级
+        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.runAgency.push(this.selPolygon)
+        this.selAgencyIndex = 0
+        this.refreshMap(true)
+
+      }
+    },
+
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      this.centerPoint = []
+
+      if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+      }
+
+      this.setZoom(this.orgData.agencyLevel)
+    },
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 14
+      } else if (agencyLevel === 'street') {
+        this.zoom = 15
+      } else if (agencyLevel === 'community') {
+        this.zoom = 16
+      }
+
+    },
+
+    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);
+
+    },
+
+    //添加变电站标注图层
+    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)
+      });
+
+    },
+
+
+
+    //点击【重新绘制】
+    handleEditPolygon () {
+      if (this.method === 'mEditPolygon') {
+        this.method = ""
+        map.removeInteraction(draw);
+      } else {
+        this.method = 'mEditPolygon';
+        draw = new Draw({
+          source: polygonSource,
+          type: "Polygon"
+        });
+        map.addInteraction(draw);
+        draw.on('drawend', feature => {
+          this.polygonCoor = feature.feature.values_.geometry.flatCoordinates
+
+          var coorString = ""
+          for (var i = 0; i < this.polygonCoor.length; i++) {
+            coorString = coorString + this.polygonCoor[i] + ","
+          }
+          if (this.polygonCoor.length > 0) {
+            coorString = coorString.substring(0, coorString.length - 1)
+          }
+          console.log(coorString)
+
+        });
+      }
+
+    },
+
+
+    //开启加载动画
+    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 - 220;
+
+    },
+
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: {},
+}
+export default vueGis;
+</script>
+
+<style >
+.div_search {
+  text-align: center;
+  height: 50px;
+  width: 100px;
+  display: flex;
+}
+
+.div_content {
+  margin-top: 30px;
+  padding: 20px 30px;
+  display: flex;
+}
+
+.div_map {
+  width: 100%;
+}
+.div_data {
+  width: 300px;
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+</style>    

epmet-oper-web/src/views/modules/workSys/mapConfig.vue

@@ -165,7 +165,7 @@ const vueGis = {
     this.addPolygonLayer()
 
     //加载当前园区的标注
-    this.loadPolygon()
+    this.loadPolygon(this.subAgencyArray)
 
   },
   methods: {
@@ -198,7 +198,7 @@ const vueGis = {
       await this.loadOrgData()
 
       //加载当前园区的标注
-      await this.loadPolygon()
+      await this.loadPolygon(this.subAgencyArray)
 
       //重置地图中心点
       if (isRefreshView) {
@@ -266,14 +266,14 @@ const vueGis = {
     },
 
     //加载当前园区的标注
-    loadPolygon () {
+    loadPolygon (subAgencyArray) {
       polygonSource.clear()//清空变电站标注
 
       let featureData = []//标注数据
-      if (this.subAgencyArray && this.subAgencyArray.length > 0) {//判断是否存在下级标注
+      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
         let oneData = {}
 
-        this.subAgencyArray.forEach(agencyItem => {
+        subAgencyArray.forEach(agencyItem => {
 
           if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
             oneData = {
@@ -421,6 +421,7 @@ const vueGis = {
 
       })
 
+      //去除双击放大效果
       const dblClickInteraction = map
         .getInteractions()
         .getArray()
@@ -538,30 +539,20 @@ const vueGis = {
       if (this.method === 'mEditPolygon') {
         this.method = ""
         map.removeInteraction(draw);
+        this.loadPolygon(this.subAgencyArray)
       } else {
-        this.method = 'mEditPolygon';
-        draw = new Draw({
-          source: polygonSource,
-          type: "Polygon"
-        });
-        map.addInteraction(draw);
-        draw.on('drawend', feature => {
-          this.polygonCoor = feature.feature.values_.geometry.flatCoordinates
 
-          var coorString = ""
-          for (var i = 0; i < this.polygonCoor.length; i++) {
-            coorString = coorString + this.polygonCoor[i] + ","
-          }
-          if (this.polygonCoor.length > 0) {
-            coorString = coorString.substring(0, coorString.length - 1)
-          }
-          console.log(coorString)
+        this.method = 'mEditPolygon';
+        //暂时隐藏要重新绘制的标注
+        this.hidePolygon()
 
-        });
+        //绘制
+        this.drawPolygon()
       }
 
     },
 
+
     //点击【删除标注】
     handleDelPolygon () {
       map.removeInteraction(draw);
@@ -587,6 +578,44 @@ const vueGis = {
 
     },
 
+    //隐藏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)
+        }
+        console.log(coorString)
+        this.method = ""
+        map.removeInteraction(draw);
+        this.addPolygon(coorString)
+
+      });
+    },
     //新增标注
     async addPolygon (coorString) {
       const url = "/gov/org/agency/mapaddarea"