基础信息

src/views/modules/visual/basicinfo/basicInfoMain.vue

@@ -1,13 +1,14 @@
 <template>
-  <div style="position: relative">
+  <div calss="div_main"
+       style="position: relative">
 
     <!-- 组织路由 -->
     <div>
       <div class="router_line"></div>
-      <div calss="div_router">
+      <div class="div_router">
         <span class="router_parents"
               v-for="(item,index) in runAgency"
-              :key="index">{{runAgency.name}} <span class="router_parents arrow">{{">"}}</span></span>
+              :key="index">{{item.name}}<span class="arrow">></span></span>
 
         <span class="router_child">{{orgData.name}}</span>
       </div>
@@ -22,7 +23,7 @@
       <div class="div_data">
         <div class="div_search">
           <el-input style="width:200px"
-                    v-model="selAgencyId"
+                    v-model="name"
                     placeholder="请输入姓名"></el-input>
 
           <el-button style="margin-left:10px"
@@ -41,33 +42,31 @@
 <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 Select, DoubleClickZoom } from 'ol/interaction.js';
+import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
-import { Circle as Fill, Stroke, Style, Text } from 'ol/style.js';
+import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style.js';
-
 import { mapGetters } from "vuex";
 import { Loading } from 'element-ui'; //引入Loading服务
 import { requestPost } from "@/js/dai/request";
 
-import { altKeyOnly, click } from 'ol/events/condition';
+
 
 let loading;//加载动画
 
+let x = 1500
+let y = 700
+
 let map;
 let mapView;
 let gaodeMapLayer;//背景地图图层
 let polygonLayer;//变电站标注图层
 let polygonSource;//变电站标注多边形
-
 let select;//选中标注
-let selectAltClick;
+
-let selectedFeatures;
 
 //变电站标注的文字样式
 var createTextStyle = function (feature) {
@@ -115,22 +114,16 @@ const vueGis = {
       orgLevel: '',
 
       subAgencyArray: [],//下拉框数据
-      selAgencyIndex: 0,
-      selAgencyId: '',//下拉框选中的组织id
-      selAgency: {},//下拉框选中的组织对象
-      hasPolygon: false,//下拉框选中的组织是否有标注
-      showBtn: false,
 
       selPolygonId: '',//选择的多边形id
       selPolygon: {},
 
+      //右侧列表
+      name: "",
+
       //下钻层级记录
       runNum: 0,
-      runAgency: [
+      runAgency: [],
-        {
-          name: '111'
-        }
-      ],
 
     }
   },
@@ -145,22 +138,22 @@ const vueGis = {
     this.addPolygonLayer()
 
     //加载当前园区的标注
-    this.loadPolygon()
+    this.loadPolygon(this.subAgencyArray)
 
   },
   methods: {
-
     handleSearch () {
 
     },
 
+
     //刷新地图
     async refreshMap (isRefreshView) {
       //加载组织数据
       await this.loadOrgData()
 
       //加载当前园区的标注
-      await this.loadPolygon()
+      await this.loadPolygon(this.subAgencyArray)
 
       //重置地图中心点
       if (isRefreshView) {
@@ -201,10 +194,11 @@ const vueGis = {
 
       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 {
@@ -214,14 +208,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 = {
@@ -269,22 +263,9 @@ const vueGis = {
         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)
@@ -302,7 +283,7 @@ const vueGis = {
 
       this.runNum++
       this.runAgency.push(this.selPolygon)
-      this.selAgencyIndex = 0
+
       this.refreshMap(true)
 
 
@@ -385,7 +366,6 @@ const vueGis = {
       polygonSource = new VectorSource({
         //features: (new GeoJSON()).readFeatures(geojsonObject)
       });
-      debugger
 
       polygonLayer = new VectorLayer({
         source: polygonSource,
@@ -424,23 +404,16 @@ const vueGis = {
         style: overlayStyle
       });
 
-      selectedFeatures = select.getFeatures();
 
       map.addLayer(polygonLayer)
       map.addInteraction(select);
-      map.addInteraction(selectAltClick);
 
       select.on('select', e => {
         this.toSubAgency(e)
       });
 
-
     },
 
-
-
-
-
     //开启加载动画
     startLoading () {
       loading = Loading.service({
@@ -468,28 +441,23 @@ const vueGis = {
   },
   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 - 240;
+      return this.clientHeight - 120;
 
     },
-
+    // zoom: {
+    //   get () {
+    //     //根据不同屏幕分辨率，控制zoom大小
+    //     if (this.clientHeight < 900) {
+    //       return 2.3
+    //     } else {
+    //       return 2.8
+    //     }
+    //   },
+    //   set (value) {
+    //   }
+    // },
     ...mapGetters(["clientHeight"])
 
   },
@@ -499,6 +467,9 @@ export default vueGis;
 </script>
 
 <style lang="scss">
+.div_main {
+  background-color: #12a3ff;
+}
 .router_line {
   width: 106px;
   height: 1px;
@@ -506,11 +477,15 @@ export default vueGis;
   /* opacity: 0.09; */
 }
 .div_router {
-  margin-top: 2px;
+  margin-top: 5px;
 
   .router_parents {
     color: #a0c3d9;
     font-size: 8px;
+
+    .arrow {
+      padding: 0 5px;
+    }
   }
 
   .router_child {