task 49539 产业大屏增加3个图层

src/utils/gis.js

@@ -431,6 +431,21 @@ class GisUtils {
     return layer
   }
 
+  addImageLayer2 (mapGeoServerUrl, layerName) {
+    let layer = new Image({
+      source: new ImageWMS({
+        url: mapGeoServerUrl + '/wms',
+        params: {
+          LAYERS: layerName,
+          SRID: 3857,
+        }
+      }),
+      name: 'countyBorderLayer'
+    });
+    this.map.addLayer(layer)
+    return layer
+  }
+
   /**
    * 获取wfs服务请求参数
    * @param {string} typename 请求的图层名

src/views/industry/main-gis/index.html

@@ -1,12 +1,12 @@
 <div class="map border" id="map2">
-<!--  <Legend class="legend_pos">-->
-<!--    <div class="legend_full">-->
-<!--      <div v-for="item in LegendData" class="legend_item">-->
-<!--        <div class="icon" :style="[item.iconStyle]"></div>-->
-<!--        <p>{{item.name}}</p>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--  </Legend>-->
+  <Legend class="legend_pos">
+    <div class="legend_full">
+      <div v-for="(item, index) in LegendDataRT" class="legend_item" @click="legendClick(index,item)">
+        <div class="icon" :style="[item.iconStyle,{borderColor: item.clickNow?item.iconStyle.borderColor:'#ffffff',background: item.clickNow?item.iconStyle.background:'rgba(255,255,255,0.45)'}]"></div>
+        <p :style="{color: item.clickNow?item.iconStyle.borderColor:'#ffffff'}">{{item.name}}</p>
+      </div>
+    </div>
+  </Legend>
   <div v-if="false" class="gl_pop_cash pop_statistical_desc">
     <div class="head_main">
       <div class="title">{{resourceDetail.name}}详情</div>

src/views/industry/main-gis/index.js

@@ -111,6 +111,35 @@ export default {
           name: '其他类'
         }
       ],
+      LegendDataRT: [
+        {
+          iconStyle: {
+            background: 'rgba(64,255,0,0.45)',
+            borderColor: '#40ff00',
+            border: '2px solid #40ff00'
+          },
+          name: '天麻',
+          clickNow: true
+        },
+        {
+          iconStyle: {
+            background: 'rgba(255,255,0,0.45)',
+            borderColor: '#fcff00',
+            border: '2px solid #fcff00'
+          },
+          name: '刺梨',
+          clickNow: true
+        },
+        {
+          iconStyle: {
+            background: 'rgba(255,138,0,0.45)',
+            borderColor: '#ff8a00',
+            border: '2px solid #ff8a00'
+          },
+          name: '高粱',
+          clickNow: true
+        }
+      ],
       threeAssetTypeOptions: [],
       threeJtzyzcTypeOptions: [],
       threeNysssbTypeOptions: [],
@@ -199,6 +228,32 @@ export default {
 
   },
   methods: {
+    legendClick(index,item){
+      item.clickNow = !item.clickNow;
+      switch (index) {
+        case 0:
+          if (item.clickNow){
+            this.tianmachaye = gis.addImageLayer2(this.mapGeoServerUrl, 'gz_qixing:tianmachaye');
+          }else{
+            gis.getMapContainer().removeLayer(this.tianmachaye);
+          }
+          break;
+        case 1:
+          if (item.clickNow){
+            this.cilichanye = gis.addImageLayer2(this.mapGeoServerUrl, 'gz_qixing:cilichanye');
+          }else{
+            gis.getMapContainer().removeLayer(this.cilichanye);
+          }
+          break;
+        case 2:
+          if (item.clickNow){
+            this.gaoliang = gis.addImageLayer2(this.mapGeoServerUrl, 'gz_qixing:gaoliang');
+          }else{
+            gis.getMapContainer().removeLayer(this.gaoliang);
+          }
+          break;
+      }
+    },
     commitDept (deptId) {
       this.$store.commit('SET_DEPTID', deptId);
     },
@@ -303,13 +358,17 @@ export default {
     // 加载地图
     initMap (deptId) {
       gis = new GisUtils('map2')
+      console.log(deptId);
       // // 获取资源列表
       this.getResourceList(deptId);
       gis.addTianDiTuLayer()
       gis.addAnnotationLayer()
+      this.tianmachaye = gis.addImageLayer2(this.mapGeoServerUrl, 'gz_qixing:tianmachaye');
+      this.cilichanye = gis.addImageLayer2(this.mapGeoServerUrl, 'gz_qixing:cilichanye');
+      this.gaoliang = gis.addImageLayer2(this.mapGeoServerUrl, 'gz_qixing:gaoliang');
       let dept2 = this.addrOptions[0];
       //console.log(this.addrOptions, 'this.addrOptions');
-      console.log(dept2.deptLevel)
+      // console.log(dept2.deptLevel)
       if (dept2.deptLevel === '5') {
         // 登录身份为市级领导
         this.userRole = 'cityLeader';
@@ -428,7 +487,7 @@ export default {
     },
     openResourceDialog (data) {
       data.fileList = [];
-      console.log(data)
+      // console.log(data)
       let parmasData = {
         tableId: data.id,
         tableName: 't_asset_industry',
@@ -495,12 +554,16 @@ export default {
       // });
     },
     // 添加资源图层
+    // addResourceLayerNew(resourceList) {
+    //
+    // },
+    // 添加资源图层
     addResourceLayer (resourceList) {
       let features = [];
       resourceList.forEach(item => {
         if (item.theGeom != null && item.theGeom !== '') {
           const { industryType } = item
-          console.log(222, industryType);
+          // console.log(222, industryType);
           // console.log(222, item);
           let color = {};
           if (industryType > 5){

src/views/industry/main-gis/index.scss

@@ -23,6 +23,7 @@
         justify-content: center;
         // border: 1px solid red;
         align-items: center;
+        cursor: pointer;
 
         .icon {
           width: 16px;