地图配置

epmet-oper-web/src/views/modules/demo/mapDemo copy.vue

@@ -1,122 +0,0 @@
-<template>
-  <div class="div_total"
-       :style="{height:mapHeight+'px'}">
-    <div class="div_left">
-      <div class="div_search">
-        <el-input placeholder="输入要搜索的名称"></el-input>
-        <el-button type="primary"
-                   icon="el-icon-search"
-                   circle
-                   @click="searchMap"></el-button>
-
-      </div>
-      <div class="map"
-           id="app">
-      </div>
-    </div>
-    <div class="div_right"></div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-
-//定义事件处理方法
-var clickHandler = function (evt) {
-  var lat = evt.latLng.getLat().toFixed(6);
-  var lng = evt.latLng.getLng().toFixed(6);
-  console.log("您点击的的坐标是：" + lat + "," + lng);
-}
-
-// 定义地图中心点坐标
-var center = new window.TMap.LatLng(39.984120, 116.307484)
-// 定义map变量，调用 TMap.Map() 构造函数创建地图
-var map
-var search
-var markers
-var infoWindowList = Array(10);
-
-
-
-export default {
-  data () {
-    return {
-
-    }
-  },
-  components: {
-
-  },
-
-  async mounted () {
-    this.initMap();
-
-  },
-  computed: {
-    mapHeight () {
-
-      return this.clientHeight - 130;
-
-    },
-    ...mapGetters(['clientHeight']),
-  },
-
-  methods: {
-    initMap () {
-      map = new window.TMap.Map(document.getElementById('app'), {
-        center: center, // 设置地图中心点坐标
-        zoom: 17.2, // 设置地图缩放级别
-        viewMode: '2D'
-        // pitch: 43.5, // 设置俯仰角
-        // rotation: 45 // 设置地图旋转角度
-      })
-      // var search = new window.TMap.service.Search({ pageSize: 10 });
-      // var markers = new window.TMap.MultiMarker({
-      //   map: map,
-      //   geometries: [],
-      // });
-      console.log(window.TMap)
-      console.log(window)
-
-      //Map实例创建后，通过on方法绑定点击事件
-      map.on("click", clickHandler)
-    },
-    searchMap () {
-
-    }
-
-
-  },
-  props: {
-
-  }
-}
-</script>
-<style>
-.div_total {
-  width: 100%;
-  display: flex;
-}
-.div_left {
-  width: 70%;
-  height: 100%;
-  position: relative;
-}
-
-.map {
-  height: 100%;
-}
-
-.div_search {
-  z-index: 9999;
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  display: flex;
-}
-
-/* .map {
-  width: 100%;
-  height: 400px;
-} */
-</style>

epmet-oper-web/src/views/modules/demo/mapDemo.vue

@@ -1,122 +0,0 @@
-<template>
-
-  <div class="div_total"
-       :style="{height:mapHeight+'px'}">
-    <!-- <div class="div_left"> -->
-    <!-- <div class="div_search">
-        <el-input placeholder="输入要搜索的名称"></el-input>
-        <el-button type="primary"
-                   icon="el-icon-search"
-                   circle
-                   @click="searchMap"></el-button>
-
-      </div> -->
-    <div id="map"
-         class="map"></div>
-  </div>
-  <!-- <div class="div_right"></div> -->
-  <!-- </div> -->
-
-</template>
-
-<script>
-import "ol/ol.css";
-import { transform } from 'ol/proj'
-import Map from "ol/Map";
-import OSM from "ol/source/OSM";
-import XYZ from "ol/source/XYZ";
-import TileLayer from "ol/layer/Tile";
-import View from "ol/View";
-
-import { mapGetters } from 'vuex'
-
-
-
-
-export default {
-  data () {
-    return {
-
-    }
-  },
-  components: {
-
-  },
-
-  async mounted () {
-    this.initMap();
-
-  },
-  computed: {
-    mapHeight () {
-
-      return this.clientHeight - 130;
-
-    },
-    ...mapGetters(['clientHeight']),
-  },
-
-  methods: {
-    initMap () {
-      //加载高德地图的数据源
-      var 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
-        })
-      });
-
-      //创建地图容器
-      var map = new Map({
-        layers: [gaodeMapLayer],
-        //加载瓦片图层数据
-        view: new View({
-          //中心点坐标
-          center: [120.38071744447801, 36.059107012804446],
-          // projection: 'EPSG:3857',
-          projection: 'EPSG:4326',
-          zoom: 11,
-          minZoom: 10
-        }),
-        target: 'map'
-        //目标加载到map中
-      })
-
-      map.on('singleclick', function (e) {
-        console.log(e.coordinate)
-        console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
-
-      })
-    }
-
-
-  },
-  props: {
-
-  }
-}
-</script>
-<style>
-.div_total {
-  width: 100%;
-}
-.div_left {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.map {
-  height: 100%;
-}
-
-.div_search {
-  z-index: 9999;
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  display: flex;
-}
-</style>

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

@@ -0,0 +1,731 @@
+<template>
+  <div style="position: relative">
+
+    <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="handleAddPolygon">{{method==='mAddPolygon'?'取消绘制':'绘制区域'}}</el-button>
+      <el-button v-if="showBtn&&hasPolygon"
+                 style="margin-left:10px"
+                 type="primary"
+                 icon="el-icon-edit"
+                 @click="handleEditPolygon">{{method==='mEditPolygon'?'取消绘制':'重新绘制'}}</el-button>
+      <el-button v-if="showBtn&&hasPolygon"
+                 style="margin-left:10px"
+                 type="primary"
+                 icon="el-icon-delete"
+                 @click="handleDelPolygon">删除区域</el-button>
+
+    </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 id="map"
+         class="div_map"
+         :style="{height:mapHeight+'px'}"></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: {
+    //切换下级组织
+    orgChange (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)
+      });
+
+    },
+
+    //点击【绘制区域】
+    handleAddPolygon () {
+      if (this.method === 'mAddPolygon') {
+        this.method = ""
+        map.removeInteraction(draw);
+      } else if (this.selAgency) {
+        this.method = 'mAddPolygon';
+        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 = ""
+          map.removeInteraction(draw);
+          this.addPolygon(coorString)
+
+        });
+      } else {
+        this.$message({
+          type: "warning",
+          message: "请先选择组织"
+        });
+      }
+
+
+    },
+
+    //点击【重新绘制】
+    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)
+
+        });
+      }
+
+    },
+
+    //点击【删除标注】
+    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 = ""
+        });
+
+
+    },
+
+    //新增标注
+    async addPolygon (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: "绘制成功"
+        });
+
+        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 - 120;
+
+    },
+    // zoom: {
+    //   get () {
+    //     //根据不同屏幕分辨率，控制zoom大小
+    //     if (this.clientHeight < 900) {
+    //       return 2.3
+    //     } else {
+    //       return 2.8
+    //     }
+    //   },
+    //   set (value) {
+    //   }
+    // },
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: {},
+}
+export default vueGis;
+</script>
+
+<style >
+.div_search {
+  z-index: 9999;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+}
+.div_back {
+  z-index: 9999;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+}
+.div_map {
+  width: 100%;
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+</style>