地图分析

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

@@ -2,18 +2,15 @@
   <div style="position: relative">
 
     <!-- 组织路由 -->
-    <div>组织路由</div>
+    <div>
-
+      <div class="router_line"></div>
-    <div class="div_search">
+      <div calss="div_router">
-      <el-input style="width:200px"
+        <span class="router_parents"
-                v-model="selAgencyId"
+              v-for="(item,index) in runAgency"
-                placeholder="请输入姓名"></el-input>
+              :key="index">{{runAgency.name}} <span class="router_parents arrow">{{">"}}</span></span>
-
+
-      <el-button style="margin-left:10px"
+        <span class="router_child">{{orgData.name}}</span>
-                 type="primary"
+      </div>
-                 icon="el-icon-plus"
-                 @click="handleSearch">搜索</el-button>
-
     </div>
 
     <div class="div_content">
@@ -21,8 +18,19 @@
       <div id="map"
            class="div_map"
            :style="{height:mapHeight+'px'}"></div>
+
       <div class="div_data">
+        <div class="div_search">
+          <el-input style="width:200px"
+                    v-model="selAgencyId"
+                    placeholder="请输入姓名"></el-input>
 
+          <el-button style="margin-left:10px"
+                     type="primary"
+                     icon="el-icon-plus"
+                     @click="handleSearch">搜索</el-button>
+
+        </div>
       </div>
     </div>
 
@@ -98,11 +106,9 @@ const vueGis = {
   name: 'HomeMap',
   data () {
     return {
-      method: "",//绘制方法
       centerPoint: [],//中心点位置
       zoom: 14,//缩放范围：区14
       minZoom: 1,//最小缩放
-      isMapLoaded: false,//地图是否加载完毕
 
       orgData: {},//当前组织对象
       orgId: '',
@@ -120,7 +126,11 @@ const vueGis = {
 
       //下钻层级记录
       runNum: 0,
-      runAgency: [],
+      runAgency: [
+        {
+          name: '111'
+        }
+      ],
 
     }
   },
@@ -139,26 +149,8 @@ const vueGis = {
 
   },
   methods: {
-    //查询
-    handleSearch (index) {
-
-      this.selAgencyIndex = index
-
-      selectedFeatures.clear()
 
-      if (index || index === 0) {
+    handleSearch () {
-        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
-      }
 
     },
 
@@ -178,19 +170,6 @@ const vueGis = {
       }
     },
 
-    //高亮某个标注
-    highlightPolygon () {
-
-      let features = polygonSource.getFeatures()
-      features.forEach(element => {
-
-        if (element.id_ === this.selAgencyId) {
-
-          selectedFeatures.push(element)
-        }
-      });
-
-    },
 
     //返回上一级组织
     handleBack () {
@@ -222,7 +201,6 @@ const vueGis = {
 
       if (code === 0) {
         this.orgData = data
-        this.runAgency.push(data)
 
         if (data.children && data.children.length > 0) {
           this.subAgencyArray = data.children
@@ -310,24 +288,24 @@ const vueGis = {
     //下钻到下一级
     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.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)
 
-        this.runNum++
-        this.runAgency.push(this.selPolygon)
-        this.selAgencyIndex = 0
-        this.refreshMap(true)
 
-      }
     },
 
     //设置地图定位的中心点和缩放级别
@@ -407,6 +385,7 @@ const vueGis = {
       polygonSource = new VectorSource({
         //features: (new GeoJSON()).readFeatures(geojsonObject)
       });
+      debugger
 
       polygonLayer = new VectorLayer({
         source: polygonSource,
@@ -445,12 +424,6 @@ const vueGis = {
         style: overlayStyle
       });
 
-      selectAltClick = new Select({
-        condition: function (mapBrowserEvent) {
-          return click(mapBrowserEvent) && altKeyOnly(mapBrowserEvent);
-        },
-      });
-
       selectedFeatures = select.getFeatures();
 
       map.addLayer(polygonLayer)
@@ -458,12 +431,10 @@ const vueGis = {
       map.addInteraction(selectAltClick);
 
       select.on('select', e => {
-        this.selectFeature(e)
-      });
-      selectAltClick.on('select', e => {
         this.toSubAgency(e)
       });
 
+
     },
 
 
@@ -527,7 +498,27 @@ const vueGis = {
 export default vueGis;
 </script>
 
-<style >
+<style lang="scss">
+.router_line {
+  width: 106px;
+  height: 1px;
+  border: 1px solid #000000;
+  /* opacity: 0.09; */
+}
+.div_router {
+  margin-top: 2px;
+
+  .router_parents {
+    color: #a0c3d9;
+    font-size: 8px;
+  }
+
+  .router_child {
+    color: #ffffff;
+    font-size: 8px;
+  }
+}
+
 .div_search {
   text-align: center;
   margin-top: 20px;
@@ -551,7 +542,9 @@ export default vueGis;
   background-color: rgb(233, 235, 235);
   border-radius: 5px;
 }
+</style>  
+<style>
 .ol-overlaycontainer-stopevent {
   display: none;
 }
-</style>    
+</style>   

src/views/modules/workSys/mapConfig.vue

@@ -735,7 +735,9 @@ export default vueGis;
 .div_map {
   width: 100%;
 }
+</style> 
+<style>
 .ol-overlaycontainer-stopevent {
   display: none;
 }
-</style>    
+</style>   

vue.config.js

@@ -3,7 +3,7 @@
  */
 const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV)
 module.exports = {
-  baseUrl: process.env.NODE_ENV === 'production' ? '' : '/dist',
+  baseUrl: process.env.NODE_ENV === 'production' ? '' : '/epmet-oper',
   css: {
     // 是否使用css分离插件 ExtractTextPlugin
     extract: IS_PROD,