修改两个区划不能同时显示问题

src/components/OneMap/BasicMap.vue

@@ -16,7 +16,7 @@
       </div>
     </div>
     <div v-if="analysisResult" id="right-sild" @click="handleDrawer" :style="drawerStyle">
-      <p class="ttitle"><br />分<br />析<br />结<br />果</p>
+      <p class="ttitle"><br/>分<br/>析<br/>结<br/>果</p>
     </div>
     <div>
       <query-info ref="detail" v-model="infoShow"></query-info>
@@ -28,1112 +28,1119 @@
 </template>
 
 <script>
-  import Map from '@arcgis/core/Map'
-  import MapView from '@arcgis/core/views/MapView'
-  import Viewpoint from '@arcgis/core/Viewpoint'
-  import Basemap from '@arcgis/core/Basemap'
-  import SpatialReference from '@arcgis/core/geometry/SpatialReference'
-  import Extent from '@arcgis/core/geometry/Extent'
-  import Home from '@arcgis/core/widgets/Home'
-  import Compass from '@arcgis/core/widgets/Compass'
-  import Fullscreen from '@arcgis/core/widgets/Fullscreen'
-  import Legend from '@arcgis/core/widgets/Legend'
-  import ScaleBar from '@arcgis/core/widgets/ScaleBar'
-  import Zoom from '@arcgis/core/widgets/Zoom'
-  import TileLayer from '@arcgis/core/layers/TileLayer'
-  import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
-  import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
-  import MapImageLayer from '@arcgis/core/layers/MapImageLayer'
-  import WMTSLayer from '@arcgis/core/layers/WMTSLayer'
-  import WMSLayer from '@arcgis/core/layers/WMSLayer'
-  import WFSLayer from '@arcgis/core/layers/WFSLayer'
-  import * as identify from '@arcgis/core/rest/identify'
-  import store from '@/store'
-  import IdentifyParameters from '@arcgis/core/rest/support/IdentifyParameters'
-  import BaseMap from './widgets/BaseMap'
-  import LocateByGeoinfo from './widgets/LocateByGeoinfo'
-  import ToolBar from './widgets/ToolBar'
-  import {
-    getAction
-  } from '../../api/manage'
-  import TileInfo from '@arcgis/core/layers/support/TileInfo'
-  import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
-  import QueryInfo from '@comp/OneMap/widgets/QueryInfo'
+import Map from '@arcgis/core/Map'
+import MapView from '@arcgis/core/views/MapView'
+import Viewpoint from '@arcgis/core/Viewpoint'
+import Basemap from '@arcgis/core/Basemap'
+import SpatialReference from '@arcgis/core/geometry/SpatialReference'
+import Extent from '@arcgis/core/geometry/Extent'
+import Home from '@arcgis/core/widgets/Home'
+import Compass from '@arcgis/core/widgets/Compass'
+import Fullscreen from '@arcgis/core/widgets/Fullscreen'
+import Legend from '@arcgis/core/widgets/Legend'
+import ScaleBar from '@arcgis/core/widgets/ScaleBar'
+import Zoom from '@arcgis/core/widgets/Zoom'
+import TileLayer from '@arcgis/core/layers/TileLayer'
+import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
+import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
+import MapImageLayer from '@arcgis/core/layers/MapImageLayer'
+import WMTSLayer from '@arcgis/core/layers/WMTSLayer'
+import WMSLayer from '@arcgis/core/layers/WMSLayer'
+import WFSLayer from '@arcgis/core/layers/WFSLayer'
+import * as identify from '@arcgis/core/rest/identify'
+import store from '@/store'
+import IdentifyParameters from '@arcgis/core/rest/support/IdentifyParameters'
+import BaseMap from './widgets/BaseMap'
+import LocateByGeoinfo from './widgets/LocateByGeoinfo'
+import ToolBar from './widgets/ToolBar'
+import {
+  getAction
+} from '../../api/manage'
+import TileInfo from '@arcgis/core/layers/support/TileInfo'
+import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
+import QueryInfo from '@comp/OneMap/widgets/QueryInfo'
 
-  export default {
-    name: 'BasicMap',
-    components: {
-      ToolBar,
-      BaseMap,
-      LocateByGeoinfo,
-      QueryInfo,
+export default {
+  name: 'BasicMap',
+  components: {
+    ToolBar,
+    BaseMap,
+    LocateByGeoinfo,
+    QueryInfo,
+  },
+  data() {
+    return {
+      show: false,
+      esriMap: {},
+      mapView: {},
+      infoShow: false,
+      baseRasterLayerUrl: '',
+      res: {},
+      locate_GraphicsLayer: {},
+      draw_GraphicsLayer: {},
+      layerSketch: {},
+      analysis_GraphicsLayer: {},
+      analysis_Drew_GraphicsLayer: {},
+      path_GraphicsLayer: {},
+      spatialReference: {},
+      initExtent: {},
+      layerConfigs: [],
+      layerList: [],
+      layerList2: [],
+      webTiledLayerId: [],
+      list: [],
+      layerNum: 0,
+      layerCount: 0,
+      v_layerIds: [],
+      mapTools: [],
+      toolsLoaded: false,
+      currentCoords: '',
+      popupTemplate: {},
+      resData: {},
+      splitScreen: false,
+      enableTianditu: true,
+      routeList: ['mainMap'],
+      layerInfos: [], //存储需要展示图例的layer,
+      drawerVisible: false,
+      drawerStyle: '',
+      analysisResult: false,
+      result: {
+        单位名称: '',
+        /* BZ:'',*/
+        文件编号: '',
+        //一级单位: '',
+        地块名称: '',
+        文件类型: '',
+        /* 文件_1:'',*/
+        土地使用权人: '',
+        实际占用土地面积: '',
+        /* 实际_1:'',*/
+        其中证载使用土地面积: '',
+        其中证载使用建筑面积: '',
+        /*  其中_1:'',*/
+        实际使用建筑面积: '',
+        // 总建筑面积: "",
+        //容积率: '',
+        使用权使用方式: '',
+        // 城市: '',
+        // 县区: '',
+        坐落位置: '',
+        实际用途: '',
+        权属起始时间: '',
+        权属结束时间: '',
+        担保: '',
+        土地使用现状: '',
+        // 审核是否通过: '',
+        // 目前情况: '',
+        /* 规划地类:'',*/
+      },
+    }
+  },
+  props: {
+    resConfigUrl: {
+      type: String,
     },
-    data() {
-      return {
-        show: false,
-        esriMap: {},
-        mapView: {},
-        infoShow: false,
-        baseRasterLayerUrl: '',
-        res: {},
-        locate_GraphicsLayer: {},
-        draw_GraphicsLayer: {},
-        layerSketch: {},
-        analysis_GraphicsLayer: {},
-        analysis_Drew_GraphicsLayer: {},
-        path_GraphicsLayer: {},
-        spatialReference: {},
-        initExtent: {},
-        layerConfigs: [],
-        layerList: [],
-        layerList2: [],
-        list: [],
-        layerNum: 0,
-        layerCount: 0,
-        v_layerIds: [],
-        mapTools: [],
-        toolsLoaded: false,
-        currentCoords: '',
-        popupTemplate: {},
-        resData: {},
-        splitScreen: false,
-        enableTianditu: true,
-        routeList: ['mainMap'],
-        layerInfos: [], //存储需要展示图例的layer,
-        drawerVisible: false,
-        drawerStyle: '',
-        analysisResult: false,
-        result: {
-          单位名称: '',
-          /* BZ:'',*/
-          文件编号: '',
-          //一级单位: '',
-          地块名称: '',
-          文件类型: '',
-          /* 文件_1:'',*/
-          土地使用权人: '',
-          实际占用土地面积: '',
-          /* 实际_1:'',*/
-          其中证载使用土地面积: '',
-          其中证载使用建筑面积: '',
-          /*  其中_1:'',*/
-          实际使用建筑面积: '',
-          // 总建筑面积: "",
-          //容积率: '',
-          使用权使用方式: '',
-          // 城市: '',
-          // 县区: '',
-          坐落位置: '',
-          实际用途: '',
-          权属起始时间: '',
-          权属结束时间: '',
-          担保: '',
-          土地使用现状: '',
-          // 审核是否通过: '',
-          // 目前情况: '',
-          /* 规划地类:'',*/
-        },
-      }
+    toolsConfigUrl: {
+      type: String,
     },
-    props: {
-      resConfigUrl: {
-        type: String,
+    topicId: {
+      type: String,
+      default: 'null',
+    },
+    height: {
+      type: String,
+      default() {
+        let calcHeight = window.document.documentElement.clientHeight - 130
+        let m_height = calcHeight.toString() + 'px'
+        return m_height
       },
-      toolsConfigUrl: {
-        type: String,
+    },
+    center: {
+      type: Array,
+      default: function () {
+        return [118.9943, 36.4939]
       },
-      topicId: {
-        type: String,
-        default: 'null',
+    },
+    extent: {
+      type: Array,
+      default: function () {
+        /* return [118.109760, 35.019916, 118.475084, 35.388584];*/
+        /*  return [118.109760, 35.019916, 118.475084, 35.388584];*/
+        return [114.5997, 34.5248, 123.2469, 38.5253]
       },
-      height: {
-        type: String,
-        default () {
-          let calcHeight = window.document.documentElement.clientHeight - 130
-          let m_height = calcHeight.toString() + 'px'
-          return m_height
-        },
+    },
+    wkid: {
+      type: Number,
+      default: 102100,
+    },
+    zoom: {
+      type: Number,
+      default: 8,
+    },
+    isToolBar: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  provide() {
+    return {
+      basicMap: this,
+    }
+  },
+  created() {
+    this.spatialReference = new SpatialReference({
+      wkid: this.wkid,
+    })
+    this.initExtent = new Extent(this.extent[0], this.extent[1], this.extent[2], this.extent[3])
+    this.popupTemplate = {
+      overwriteActions: true,
+      outFields: ['*'],
+      title: ({
+                graphic: {
+                  attributes,
+                  layer
+                }
+              }) => {
+        const dkmc = layer.title
+        return `<div>${dkmc || ''}</div>`
       },
-      center: {
-        type: Array,
-        default: function() {
-          return [118.9943, 36.4939]
-        },
+      content: this.selectChange,
+      actions: [{
+        title: '详情',
+        id: 'showDKDetail',
+        className: 'esri-icon-zoom-in-magnifying-glass',
       },
-      extent: {
-        type: Array,
-        default: function() {
-          /* return [118.109760, 35.019916, 118.475084, 35.388584];*/
-          /*  return [118.109760, 35.019916, 118.475084, 35.388584];*/
-          return [114.5997, 34.5248, 123.2469, 38.5253]
+        {
+          title: '全景',
+          id: 'showAll',
+          className: 'esri-icon-globe',
         },
-      },
-      wkid: {
-        type: Number,
-        default: 102100,
-      },
-      zoom: {
-        type: Number,
-        default: 8,
-      },
-      isToolBar: {
-        type: Boolean,
-        default: true,
-      },
-    },
-    provide() {
-      return {
-        basicMap: this,
+      ],
+    }
+    this.baseRasterLayerUrl = window._CONFIG['mapBaseLayerURL']
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.topicId != 'null') {
+        this.getTopicConfig()
+      } else {
+        this.loadMapConfig()
       }
-    },
-    created() {
-      this.spatialReference = new SpatialReference({
-        wkid: this.wkid,
+      this.loadMapTools()
+    })
+  },
+  watch: {},
+  methods: {
+    //获取专题配置
+    async getTopicConfig() {
+      let {
+        result,
+        success,
+        message
+      } = await getAction('topicManage/topicsConfig/list', {
+        topicid: this.topicId,
       })
-      this.initExtent = new Extent(this.extent[0], this.extent[1], this.extent[2], this.extent[3])
-      this.popupTemplate = {
-        overwriteActions: true,
-        outFields: ['*'],
-        title: ({
-          graphic: {
-            attributes,
-            layer
-          }
-        }) => {
-          const dkmc = layer.title
-          return `<div>${dkmc || ''}</div>`
-        },
-        content: this.selectChange,
-        actions: [{
-            title: '详情',
-            id: 'showDKDetail',
-            className: 'esri-icon-zoom-in-magnifying-glass',
-          },
-          {
-            title: '全景',
-            id: 'showAll',
-            className: 'esri-icon-globe',
-          },
-        ],
+      if (success) {
+        this.loadMapConfig(result.records[0].analysistypes)
+      } else {
+        this.$message.error(message)
       }
-      this.baseRasterLayerUrl = window._CONFIG['mapBaseLayerURL']
     },
-    mounted() {
-      this.$nextTick(() => {
-        if (this.topicId != 'null') {
-          this.getTopicConfig()
-        } else {
-          this.loadMapConfig()
-        }
-        this.loadMapTools()
+    async loadMapConfig(analysistypes) {
+      let {
+        result,
+        success,
+        message
+      } = await getAction(this.resConfigUrl, {
+        username: store.getters.userInfo.username,
+        topicId: this.topicId,
       })
-    },
-    watch: {},
-    methods: {
-      //获取专题配置
-      async getTopicConfig() {
-        let {
-          result,
-          success,
-          message
-        } = await getAction('topicManage/topicsConfig/list', {
-          topicid: this.topicId,
-        })
-        if (success) {
-          this.loadMapConfig(result.records[0].analysistypes)
-        } else {
-          this.$message.error(message)
-        }
-      },
-      async loadMapConfig(analysistypes) {
-        let {
-          result,
-          success,
-          message
-        } = await getAction(this.resConfigUrl, {
-          username: store.getters.userInfo.username,
-          topicId: this.topicId,
-        })
-        if (success) {
-          this.layerList = JSON.parse(JSON.stringify(result))
-          this.layerList2 = JSON.parse(JSON.stringify(result))
-          let self = this
-          this.list.push(this.layerList, this.layerList2)
-          if (this.layerList && this.layerList.length !== 0) {
-            this.layerList.forEach((layerItem) => {
-              if (layerItem.layers) {
-                //累计记录需要加载的图层数量，用以之后判断图层是否全部加载完毕
-                self.layerNum += layerItem.layers.length
-                //记录所有的 图层配置，
-                layerItem.layers.forEach((layerConfig) => {
-                  if (layerConfig) {
-                    if (analysistypes) {
-                      if (analysistypes.includes(layerConfig.name)) {
-                        layerConfig.analyzable = true
-                      } else {
-                        layerConfig.analyzable = false
-                      }
+      if (success) {
+        this.layerList = JSON.parse(JSON.stringify(result))
+        this.layerList2 = JSON.parse(JSON.stringify(result))
+        let self = this
+        this.list.push(this.layerList, this.layerList2)
+        if (this.layerList && this.layerList.length !== 0) {
+          this.layerList.forEach((layerItem) => {
+            if (layerItem.layers) {
+              //累计记录需要加载的图层数量，用以之后判断图层是否全部加载完毕
+              self.layerNum += layerItem.layers.length
+              //记录所有的 图层配置，
+              layerItem.layers.forEach((layerConfig) => {
+                if (layerConfig) {
+                  if (analysistypes) {
+                    if (analysistypes.includes(layerConfig.name)) {
+                      layerConfig.analyzable = true
+                    } else {
+                      layerConfig.analyzable = false
                     }
-                    self.layerConfigs.push(layerConfig)
                   }
-                })
-              }
-            })
-          }
-          this.initMap()
-          if (this.enableTianditu) {
-            this.$refs.baseMap.imgMapClick()
-          }
-        } else {
-          this.$message.error(message)
+                  self.layerConfigs.push(layerConfig)
+                }
+              })
+            }
+          })
         }
-      },
-      async loadMapTools() {
-        let {
-          result,
-          success,
-          message
-        } = await getAction(this.toolsConfigUrl, {
-          username: store.getters.userInfo.username,
-          topicId: this.topicId,
-        })
-        if (success) {
-          this.mapTools.push(...result)
-          // if (this.toolsCustom) {
-          //   for (let i = this.mapTools.sort().length - 1; 0 < i; i -= 1) {
-          //     i -= this.mapTools.splice(i, 1)[0] === this.mapTools[i - 1];
-          //   }
-          // }
-          this.toolsLoaded = true
-        } else {
-          this.$message.error(message)
+        this.initMap()
+        if (this.enableTianditu) {
+          this.$refs.baseMap.imgMapClick()
         }
-      },
-      initMap() {
-        // let baseRasterLayer = new WMTSLayer({
-        //   url: this.baseRasterLayerUrl
-        //   // serviceMode: 'KVP'
-        // });
-        // let basemap = new Basemap({
-        //   baseLayers: [baseRasterLayer],
-        //   spatialReference:new SpatialReference({
-        //     wkid: 102100
-        //   })
-        // });
-        this.esriMap = new Map({
-          slider: true, //开启放大缩小
+      } else {
+        this.$message.error(message)
+      }
+    },
+    async loadMapTools() {
+      let {
+        result,
+        success,
+        message
+      } = await getAction(this.toolsConfigUrl, {
+        username: store.getters.userInfo.username,
+        topicId: this.topicId,
+      })
+      if (success) {
+        this.mapTools.push(...result)
+        // if (this.toolsCustom) {
+        //   for (let i = this.mapTools.sort().length - 1; 0 < i; i -= 1) {
+        //     i -= this.mapTools.splice(i, 1)[0] === this.mapTools[i - 1];
+        //   }
+        // }
+        this.toolsLoaded = true
+      } else {
+        this.$message.error(message)
+      }
+    },
+    initMap() {
+      // let baseRasterLayer = new WMTSLayer({
+      //   url: this.baseRasterLayerUrl
+      //   // serviceMode: 'KVP'
+      // });
+      // let basemap = new Basemap({
+      //   baseLayers: [baseRasterLayer],
+      //   spatialReference:new SpatialReference({
+      //     wkid: 102100
+      // });
+      //   })
+      this.esriMap = new Map({
+        slider: true, //开启放大缩小
 
-          // basemap: basemap
-        })
-        this.mapView = new MapView({
-          container: this.$refs.basicMap,
-          map: this.esriMap,
-          ui: {
-            components: [],
-          },
-          extent: this.initExtent,
-          popup: {
-            defaultPopupTemplateEnabled: true, // popup will be enabled on the wfslayer
-          },
-        })
-        this.mapView.constraints = {
-          minZoom: 7,
-          maxZoom: 18,
-        }
+        // basemap: basemap
+      })
+      this.mapView = new MapView({
+        container: this.$refs.basicMap,
+        map: this.esriMap,
+        ui: {
+          components: [],
+        },
+        extent: this.initExtent,
+        popup: {
+          defaultPopupTemplateEnabled: true, // popup will be enabled on the wfslayer
+        },
+      })
+      this.mapView.constraints = {
+        minZoom: 7,
+        maxZoom: 18,
+      }
 
-        // this.mapView.ui.remove('attribution');        //移除底部版权信息状态栏
-        // this.mapView.ui.components = [];
-        this.mapView.when(
-          () => {
-            console.log('当前视图zoom：' + this.mapView.zoom)
-            this.initWeights()
-          },
-          (error) => {
-            this.$message.error(error.message)
-          }
-        )
+      // this.mapView.ui.remove('attribution');        //移除底部版权信息状态栏
+      // this.mapView.ui.components = [];
+      this.mapView.when(
+        () => {
 
-        this.initLayers()
+          this.initWeights()
+        },
+        (error) => {
+          this.$message.error(error.message)
+        }
+      )
 
-        this.initSplitMaps()
-        this.initActiveViewEvents()
-        this.initMapEvents()
-        this.initGraphicsLayers()
-        /*this.esriMap.basemap = basemap;*/
-      },
-      initSplitMaps() {
-        // this.splitScreen=!this.splitScreen;
-        // this.splitScreen===false;return
-        this.esriMap2 = new Map({})
-        this.mapView2 = new MapView({
-          container: this.$refs.basicMap2,
-          map: this.esriMap2,
-          ui: {
-            components: [],
-          },
-          extent: this.mapView.extent,
-        })
-        this.mapView.when(
-          () => {
-            this.loadLayers(this.layerList2, this.esriMap2)
-          },
-          function(error) {
-            this.$message.error(error.message)
-          }
-        )
-        let views = [this.mapView, this.mapView2]
-        views.forEach((view) => {
-          // 定义一个范围变量
-          let fullextent = null
-          // 设置鼠标滚轮事件
-          view.on('mouse-wheel', (e) => {
-            // 延迟获取范围的函数
-            window.setTimeout(() => {
-              // 获取操作图层的范围
-              fullextent = view.extent
-              // 遍历所有视图来设置这个范围
-              views.forEach((nview) => {
-                nview.extent = fullextent
-              })
-            }, 1)
-          })
-          // 设置鼠标拖拽事件
-          view.on('drag', (e) => {
+      this.initLayers()
+
+      this.initSplitMaps()
+      this.initActiveViewEvents()
+      this.initMapEvents()
+      this.initGraphicsLayers()
+      /*this.esriMap.basemap = basemap;*/
+    },
+    initSplitMaps() {
+      // this.splitScreen=!this.splitScreen;
+      // this.splitScreen===false;return
+      this.esriMap2 = new Map({})
+      this.mapView2 = new MapView({
+        container: this.$refs.basicMap2,
+        map: this.esriMap2,
+        ui: {
+          components: [],
+        },
+        extent: this.mapView.extent,
+      })
+      this.mapView.when(
+        () => {
+          this.loadLayers(this.layerList2, this.esriMap2)
+        },
+        function (error) {
+          this.$message.error(error.message)
+        }
+      )
+      let views = [this.mapView, this.mapView2]
+      views.forEach((view) => {
+        // 定义一个范围变量
+        let fullextent = null
+        // 设置鼠标滚轮事件
+        view.on('mouse-wheel', (e) => {
+          // 延迟获取范围的函数
+          window.setTimeout(() => {
             // 获取操作图层的范围
             fullextent = view.extent
             // 遍历所有视图来设置这个范围
             views.forEach((nview) => {
               nview.extent = fullextent
             })
+          }, 1)
+        })
+        // 设置鼠标拖拽事件
+        view.on('drag', (e) => {
+          // 获取操作图层的范围
+          fullextent = view.extent
+          // 遍历所有视图来设置这个范围
+          views.forEach((nview) => {
+            nview.extent = fullextent
           })
         })
-      },
+      })
+    },
 
-      initLayers() {
-        if (this.layerList.length == 0) {
-          this.$message.warn('未查询到图层相关配置')
-        } else {
-          this.loadLayers(this.layerList, this.esriMap)
-        }
-      },
-      loadLayers(list, map) {
-        if (list && list.length !== 0) {
-          list.forEach((layerItem) => {
-            if (layerItem.layers) {
-              this.loadLayers(layerItem.layers, map)
-            } else {
-              this._loadLayer(layerItem, map)
-            }
-          })
-        }
-      },
-      _loadLayer: function(layerItem, esriMap) {
-        let layer = null
-        switch (layerItem.servicetype) {
-          case 'DynamicLayer': {
-            layer = new MapImageLayer({
-              id: layerItem.id,
-              title: layerItem.alias,
-              url: layerItem.url,
-            })
-            let layerInfo = {
-              title: layerItem.alias,
-              layer: layer,
-            }
-            if (layerItem.sublayerid != undefined && layerItem.sublayerid != null) {
-              layer.sublayers = [{
-                id: layerItem.sublayerid,
-                visible: layerItem.visible,
-                labelsVisible: layerItem.labelsvisible,
-              }, ]
-              if (layerItem.visible && layerItem.queryable) {
-                this.v_layerIds.push(layerItem.sublayerid)
-              }
-              layerInfo.sublayerIds = [layerItem.sublayerid]
-            } else {
-              layer.visible = layerItem.visible
-            }
-            this.layerInfos.push(layerInfo)
-            break
-          }
-          case 'TileLayer': {
-            layer = new TileLayer({
-              id: layerItem.id,
-              title: layerItem.alias,
-              url: layerItem.url,
-              visible: layerItem.visible,
-            })
-            break
+    initLayers() {
+      if (this.layerList.length == 0) {
+        this.$message.warn('未查询到图层相关配置')
+      } else {
+        this.loadLayers(this.layerList, this.esriMap)
+      }
+    },
+    loadLayers(list, map) {
+      if (list && list.length !== 0) {
+        list.forEach((layerItem) => {
+          if (layerItem.layers) {
+            this.loadLayers(layerItem.layers, map)
+          } else {
+            this._loadLayer(layerItem, map)
           }
-          case 'FeatureLayer': {
-            layer = new FeatureLayer({
-              id: layerItem.id,
-              title: layerItem.alias,
-              url: layerItem.url,
-              popupTemplate: this.popupTemplate,
-              visible: layerItem.visible,
-            })
-            break
+        })
+      }
+    },
+    // 载入图层到layers
+    _loadLayer: function (layerItem, esriMap) {
+      let layer = null
+      switch (layerItem.servicetype) {
+        case 'DynamicLayer': {
+          layer = new MapImageLayer({
+            id: layerItem.id,
+            title: layerItem.alias,
+            url: layerItem.url,
+          })
+          let layerInfo = {
+            title: layerItem.alias,
+            layer: layer,
           }
-          /*sugb 20240530 瓦片服务*/
-          case 'WMTSLayer': {
-            console.log('####瓦片服务####')
-            layer = new WMTSLayer({
-              id: layerItem.id,
-              url: layerItem.url, //WMTS服务的URL地址
-              layerIdentifier: layerItem.name, //属性用于指定你要加载的WMTS图层的标识符（即图层名称）
-              title: layerItem.id, //描述
-              style: layerItem.style, //图层的样式。通常为default
-              tileMatrixSet: 'EPSG:4326', //瓦片矩阵集的标识符（通常为坐标参考系统的EPSG代码）
-              format: 'image/png', //瓦片图像的格式,可默认
+          if (layerItem.sublayerid != undefined && layerItem.sublayerid != null) {
+            layer.sublayers = [{
+              id: layerItem.sublayerid,
               visible: layerItem.visible,
-            })
-            break
+              labelsVisible: layerItem.labelsvisible,
+            },]
+            if (layerItem.visible && layerItem.queryable) {
+              this.v_layerIds.push(layerItem.sublayerid)
+            }
+            layerInfo.sublayerIds = [layerItem.sublayerid]
+          } else {
+            layer.visible = layerItem.visible
           }
-          /*sugb 20240530 wms服务*/
-          case 'WFSLayer': {
-            console.log("######wms服务#####")
-            layer = new WFSLayer({
-              id: layerItem.id,
-              url: layerItem.url,
-              title: layerItem.alias,
-              name: layerItem.name,
-              style: layerItem.style,
-              popupTemplate: {
-                overwriteActions: true,
-                outFields: ['*'],
-                title: ({
-                  graphic: {
-                    attributes,
-                    layer
-                  }
-                }) => {
-                  const dkmc = layer.title
-                  return `<div>${dkmc || ''}</div>`
-                },
-                content: this.selectChange,
-                actions: [{
-                    title: '详情',
-                    id: 'showDKDetail',
-                    className: 'esri-icon-zoom-in-magnifying-glass',
-                  },
-                  {
-                    title: '全景',
-                    id: 'showAll',
-                    className: 'esri-icon-globe',
-                  },
-                ],
+          this.layerInfos.push(layerInfo)
+          break
+        }
+        case 'TileLayer': {
+          layer = new TileLayer({
+            id: layerItem.id,
+            title: layerItem.alias,
+            url: layerItem.url,
+            visible: layerItem.visible,
+          })
+          break
+        }
+        case 'FeatureLayer': {
+          layer = new FeatureLayer({
+            id: layerItem.id,
+            title: layerItem.alias,
+            url: layerItem.url,
+            popupTemplate: this.popupTemplate,
+            visible: layerItem.visible,
+          })
+          break
+        }
+        /*sugb 20240530 瓦片服务*/
+        case 'WMTSLayer': {
+          console.log("#########瓦片服务-start#######")
+          console.log(JSON.stringify(layerItem))
+          this.webTiledLayerId.push(layerItem.id)
+          layer = new WMTSLayer({
+            id: layerItem.id,
+            url: layerItem.url,               //WMTS服务的URL地址
+            layerIdentifier: layerItem.name,  //属性用于指定你要加载的WMTS图层的标识符（即图层名称）
+            title: layerItem.alias,           //描述
+            style: layerItem.style,           //图层的样式。通常为default
+            format: 'image/png',              //瓦片图像的格式,可默认
+            activeLayer: {
+              id: layerItem.name, //图层名称
+              tileMatrixSetId: 'EPSG:4326', //瓦片矩阵集的标识符（通常为坐标参考系统的EPSG代码）
+            },
+            visible: layerItem.visible, //是否显示
+          })
+          break
+        }
+        /*sugb 20240530 wms服务*/
+        case 'WFSLayer': {
+          layer = new WFSLayer({
+            id: layerItem.id,
+            url: layerItem.url,
+            title: layerItem.alias,
+            name: layerItem.name,
+            style: layerItem.style,
+            popupTemplate: {
+              overwriteActions: true,
+              outFields: ['*'],
+              title: ({
+                        graphic: {
+                          attributes,
+                          layer
+                        }
+                      }) => {
+                const dkmc = layer.title
+                return `<div>${dkmc || ''}</div>`
               },
-              visible: layerItem.visible,
-            })
-            break
-          }
-          default:
-            break
+              content: this.selectChange,
+              actions: [{
+                title: '详情',
+                id: 'showDKDetail',
+                className: 'esri-icon-zoom-in-magnifying-glass',
+              },
+                {
+                  title: '全景',
+                  id: 'showAll',
+                  className: 'esri-icon-globe',
+                },
+              ],
+            },
+            visible: layerItem.visible,
+          })
+          break
         }
-        //所有的图层都加载完成事件
-        layer.on('layerview-create', (evt) => {
-          this.layerCount++
-          if (this.layerNum == this.layerCount) {
-            this.$emit('layer-loadAll', true)
-            this.mapView.extent = this.initExtent
-            this.initBaseLayer()
-          }
-        })
-        if (parseInt(layerItem.zIndex)) {
-          esriMap.add(layer, parseInt(layerItem.zIndex))
-        } else {
-          esriMap.add(layer)
+        default:
+          break
+      }
+      //所有的图层都加载完成事件
+      layer.on('layerview-create', (evt) => {
+        this.layerCount++
+        if (this.layerNum == this.layerCount) {
+          this.$emit('layer-loadAll', true)
+          this.mapView.extent = this.initExtent
+          this.initBaseLayer()
         }
-      },
-      initBaseLayer() {
-        let baseRasterLayer = new WMTSLayer({
-          url: this.baseRasterLayerUrl,
-          // serviceMode: 'KVP'
-        })
-        let basemap = new Basemap({
-          baseLayers: [baseRasterLayer],
-          spatialReference: new SpatialReference({
-            wkid: 102100,
-          }),
-        })
-        this.esriMap.basemap = basemap
-        this.esriMap2.basemap = basemap
-      },
-      initGraphicsLayers() {
-        this.draw_GraphicsLayer = new GraphicsLayer({
-          title: '绘图专用图层',
-        })
-        this.esriMap.add(this.draw_GraphicsLayer, 100)
-        this.layerSketch = new GraphicsLayer({
-          title: '编辑图斑专用图层',
-        })
-        this.esriMap.add(this.layerSketch, 100)
-        this.analysis_GraphicsLayer = new GraphicsLayer({
-          title: '分析专用图层',
-          id: 'analysis',
-        })
-        this.esriMap.add(this.analysis_GraphicsLayer, 100)
-        this.analysis_Drew_GraphicsLayer = new GraphicsLayer({
-          title: '分析绘制专用图层',
-          id: 'analysisDraw',
-        })
-        this.esriMap.add(this.analysis_Drew_GraphicsLayer, 101)
-        this.path_GraphicsLayer = new GraphicsLayer({
-          title: '巡回轨迹专用图层',
-          id: 'path',
-        })
-        this.esriMap.add(this.path_GraphicsLayer, 100)
-        this.locate_GraphicsLayer = new GraphicsLayer({
-          title: '定位专用图层',
-        })
-        this.esriMap.add(this.locate_GraphicsLayer, 101)
-      },
-      initWeights() {
-        // this.mapView.ui.remove('attribution');        //移除底部版权信息状态栏
-        this.mapView.ui.components = []
-        let zoom = new Zoom({
-          view: this.mapView,
-        })
-        this.mapView.ui.add(zoom, 'top-left')
-        zoom.when(
-          (evt) => {
-          },
-          (err) => {
-            if (this.routeList.indexOf(this.$route.name) != -1) {
-              location.reload(true)
-            }
+      })
+      if (parseInt(layerItem.zIndex)) {
+        esriMap.add(layer, parseInt(layerItem.zIndex))
+      } else {
+        esriMap.add(layer)
+      }
+    },
+
+    initBaseLayer() {
+      let baseRasterLayer = new WMTSLayer({
+        url: this.baseRasterLayerUrl,
+      })
+      let basemap = new Basemap({
+        baseLayers: [baseRasterLayer],
+        spatialReference: new SpatialReference({
+          wkid: 102100,
+        }),
+      })
+      this.esriMap.basemap = basemap
+      this.esriMap2.basemap = basemap
+    },
+    initGraphicsLayers() {
+      this.draw_GraphicsLayer = new GraphicsLayer({
+        title: '绘图专用图层',
+      })
+      this.esriMap.add(this.draw_GraphicsLayer, 100)
+      this.layerSketch = new GraphicsLayer({
+        title: '编辑图斑专用图层',
+      })
+      this.esriMap.add(this.layerSketch, 100)
+      this.analysis_GraphicsLayer = new GraphicsLayer({
+        title: '分析专用图层',
+        id: 'analysis',
+      })
+      this.esriMap.add(this.analysis_GraphicsLayer, 100)
+      this.analysis_Drew_GraphicsLayer = new GraphicsLayer({
+        title: '分析绘制专用图层',
+        id: 'analysisDraw',
+      })
+      this.esriMap.add(this.analysis_Drew_GraphicsLayer, 101)
+      this.path_GraphicsLayer = new GraphicsLayer({
+        title: '巡回轨迹专用图层',
+        id: 'path',
+      })
+      this.esriMap.add(this.path_GraphicsLayer, 100)
+      this.locate_GraphicsLayer = new GraphicsLayer({
+        title: '定位专用图层',
+      })
+      this.esriMap.add(this.locate_GraphicsLayer, 101)
+    },
+    initWeights() {
+      // this.mapView.ui.remove('attribution');        //移除底部版权信息状态栏
+      this.mapView.ui.components = []
+      let zoom = new Zoom({
+        view: this.mapView,
+      })
+      this.mapView.ui.add(zoom, 'top-left')
+      zoom.when(
+        (evt) => {
+        },
+        (err) => {
+          if (this.routeList.indexOf(this.$route.name) != -1) {
+            location.reload(true)
           }
-        )
+        }
+      )
 
-        let homeBtn = new Home({
-          view: this.mapView,
-          viewpoint: new Viewpoint({
-            targetGeometry: this.initExtent,
-          }),
-        })
-        this.mapView.ui.add(homeBtn, 'top-left')
+      let homeBtn = new Home({
+        view: this.mapView,
+        viewpoint: new Viewpoint({
+          targetGeometry: this.initExtent,
+        }),
+      })
+      this.mapView.ui.add(homeBtn, 'top-left')
 
-        let compass = new Compass({
-          view: this.mapView,
-        })
-        this.mapView.ui.add(compass, 'top-left')
+      let compass = new Compass({
+        view: this.mapView,
+      })
+      this.mapView.ui.add(compass, 'top-left')
 
-        //组件有问题，全屏模式开启后，再切换回正常模式，地图不显示了（地图高度变成0了）
-        // let fullScreen = new Fullscreen({
-        //   view:this.mapView
-        // })
-        // this.mapView.ui.add(fullScreen,"top-right");
+      //组件有问题，全屏模式开启后，再切换回正常模式，地图不显示了（地图高度变成0了）
+      // let fullScreen = new Fullscreen({
+      //   view:this.mapView
+      // })
+      // this.mapView.ui.add(fullScreen,"top-right");
 
-        // let legend = new Legend({
-        //   view:this.mapView,
-        //   layerInfos:this.layerInfos,
-        //   style:"max-height:10em;max-width:200px;overflow-y:auto"
-        // });
-        // this.mapView.ui.add(legend, 'bottom-left');
+      // let legend = new Legend({
+      //   view:this.mapView,
+      //   layerInfos:this.layerInfos,
+      //   style:"max-height:10em;max-width:200px;overflow-y:auto"
+      // });
+      // this.mapView.ui.add(legend, 'bottom-left');
 
-        let scaleBar = new ScaleBar({
-          view: this.mapView,
-          unit: 'metric', //Possible Values:"non-metric"|"metric"|"dual"
-          style: 'line', //Possible Values:"ruler"|"line"
-        })
-        this.mapView.ui.add(scaleBar, 'bottom-left')
-      },
-      initMapEvents() {
-        this.mapView.on('pointer-move', (evt) => {
-          let point = this.mapView.toMap(evt)
-          this.currentCoords = point.longitude.toFixed(4) + ',' + point.latitude.toFixed(4)
-        })
+      let scaleBar = new ScaleBar({
+        view: this.mapView,
+        unit: 'metric', //Possible Values:"non-metric"|"metric"|"dual"
+        style: 'line', //Possible Values:"ruler"|"line"
+      })
+      this.mapView.ui.add(scaleBar, 'bottom-left')
+    },
+    initMapEvents() {
+      this.mapView.on('pointer-move', (evt) => {
+        let point = this.mapView.toMap(evt)
+        this.currentCoords = point.longitude.toFixed(4) + ',' + point.latitude.toFixed(4)
+      })
 
-        this.mapView.on('click', (evt) => {
-          if (this.$refs.toolBar.enableIdentify) {
-            this.$refs.toolBar.doIdentify(evt)
-          }
-        })
-        this.$emit('mapViewLoaded', true)
-      },
-      // 初始化activeView的监听事件
-      initActiveViewEvents() {
-        if (this.mapView) {
-          // PopupViewModel的触发动作被触发，然后检查动作id
-          this.mapView.popup.on('trigger-action', ({
-            action
-          }) => {
-            const actionId = action.id
-            let {
-              attributes
-            } = this.mapView.popup.viewModel.selectedFeature
-            // 点击"地块详情"
-            if (actionId === 'showDKDetail' && this.resData.sysOrgCode != null) {
-              //获取弹出的popup所归属的graphic的attributes
-              // getAction("")
-              if (this.resData.sysOrgCode.slice(0, 3) == 'A04') {
-                this.result.单位名称 = this.resData.createBy
-                /*this.result.BZ=attributes.BZ;*/
-                this.result.地块名称 = this.resData.dk
-                this.result.文件类型 = this.resData.wjlx
-                this.result.文件编号 = this.resData.wjbh
-                // this.result.一级单位 = attributes.YJDW;
-                /* this.result.文件_1=attributes.WJ_1;*/
-                this.result.土地使用权人 = this.resData.tdsyqr
-                this.result.实际占用土地面积 = parseFloat(this.resData.sjzytdmjPf).toFixed(2)
-                /* this.result.实际_1=attributes.SJ_1.toFixed(2);*/
-                this.result.其中证载使用土地面积 = parseFloat(this.resData.qzpztdmjPf).toFixed(2)
+      this.mapView.on('click', (evt) => {
+        if (this.$refs.toolBar.enableIdentify) {
+          this.$refs.toolBar.doIdentify(evt)
+        }
+      })
+      this.$emit('mapViewLoaded', true)
+    },
+    // 初始化activeView的监听事件
+    initActiveViewEvents() {
+      if (this.mapView) {
+        // PopupViewModel的触发动作被触发，然后检查动作id
+        this.mapView.popup.on('trigger-action', ({
+                                                   action
+                                                 }) => {
+          const actionId = action.id
+          let {
+            attributes
+          } = this.mapView.popup.viewModel.selectedFeature
+          // 点击"地块详情"
+          if (actionId === 'showDKDetail' && this.resData.sysOrgCode != null) {
+            //获取弹出的popup所归属的graphic的attributes
+            // getAction("")
+            if (this.resData.sysOrgCode.slice(0, 3) == 'A04') {
+              this.result.单位名称 = this.resData.createBy
+              /*this.result.BZ=attributes.BZ;*/
+              this.result.地块名称 = this.resData.dk
+              this.result.文件类型 = this.resData.wjlx
+              this.result.文件编号 = this.resData.wjbh
+              // this.result.一级单位 = attributes.YJDW;
+              /* this.result.文件_1=attributes.WJ_1;*/
+              this.result.土地使用权人 = this.resData.tdsyqr
+              this.result.实际占用土地面积 = parseFloat(this.resData.sjzytdmjPf).toFixed(2)
+              /* this.result.实际_1=attributes.SJ_1.toFixed(2);*/
+              this.result.其中证载使用土地面积 = parseFloat(this.resData.qzpztdmjPf).toFixed(2)
 
-                this.result.实际使用建筑面积 = parseFloat(this.resData.sjsyjzmj).toFixed(2)
-                this.result.其中证载使用建筑面积 = parseFloat(this.resData.qzpzsymj2).toFixed(2)
-                this.result.是否共用宗 = this.resData.sfgyz
-                this.result.容积率 = parseFloat(this.resData.sjrjl).toFixed(2)
-                this.result.使用权使用方式 = this.resData.syqsyfs
-                // this.result.城市 = this.resData.CS;
-                // this.result.县区 = this.resData.XQ;
-                this.result.坐落位置 = this.resData.zlwz
-                this.result.实际用途 = this.resData.sjytText
-                this.result.权属起始时间 = this.resData.qsqssj
-                this.result.权属结束时间 = this.resData.qsdqsj
-                this.result.担保 = this.resData.dbdycfqk
-                this.result.备注 = this.resData.BZ
-                this.result.土地使用现状 = this.resData.tdsyxz
-                this.result.地块编号 = this.resData.dkbh
-                //this.result.审核是否通过 = this.resData.shzt;
-                //this.result.目前情况 = this.resData.MQQ;
-                /*  this.result.规划地类=attributes.GHD;*/
-                this.result.IMAGE = this.resData.images
+              this.result.实际使用建筑面积 = parseFloat(this.resData.sjsyjzmj).toFixed(2)
+              this.result.其中证载使用建筑面积 = parseFloat(this.resData.qzpzsymj2).toFixed(2)
+              this.result.是否共用宗 = this.resData.sfgyz
+              this.result.容积率 = parseFloat(this.resData.sjrjl).toFixed(2)
+              this.result.使用权使用方式 = this.resData.syqsyfs
+              // this.result.城市 = this.resData.CS;
+              // this.result.县区 = this.resData.XQ;
+              this.result.坐落位置 = this.resData.zlwz
+              this.result.实际用途 = this.resData.sjytText
+              this.result.权属起始时间 = this.resData.qsqssj
+              this.result.权属结束时间 = this.resData.qsdqsj
+              this.result.担保 = this.resData.dbdycfqk
+              this.result.备注 = this.resData.BZ
+              this.result.土地使用现状 = this.resData.tdsyxz
+              this.result.地块编号 = this.resData.dkbh
+              //this.result.审核是否通过 = this.resData.shzt;
+              //this.result.目前情况 = this.resData.MQQ;
+              /*  this.result.规划地类=attributes.GHD;*/
+              this.result.IMAGE = this.resData.images
 
-                this.infoShow = true
-                this.$refs.detail.loadDetail(this.result)
-              }
-              if (this.resData.sysOrgCode.slice(0, 3) == 'A03') {
-                this.result.单位名称 = this.resData.createBy
-                /*this.result.BZ=attributes.BZ;*/
-                this.result.地块名称 = this.resData.dk
-                this.result.文件类型 = this.resData.zslx
-                this.result.文件编号 = this.resData.wjbh
-                // this.result.一级单位 = attributes.YJDW;
-                /* this.result.文件_1=attributes.WJ_1;*/
-                this.result.土地使用权人 = this.resData.tdsyqr
-                this.result.实际占用土地面积 = parseFloat(this.resData.sjzytdmj).toFixed(2)
-                /* this.result.实际_1=attributes.SJ_1.toFixed(2);*/
-                this.result.其中证载使用土地面积 = parseFloat(this.resData.qzpzsymj).toFixed(2)
-                this.result.实际使用建筑面积 = parseFloat(this.resData.sjsyjzmj).toFixed(2)
-                this.result.其中证载使用建筑面积 = parseFloat(this.resData.qzpzsymj2).toFixed(2)
-                //  this.result.总建筑面积 = parseFloat(this.resData.ZJZ).toFixed(2);
-                // this.result.是否共用宗 = this.resData.sfgyz;
-                //this.result.容积率 = parseFloat(this.resData.sjrjl).toFixed(2);
-                this.result.使用权使用方式 = this.resData.syqsyfs
-                /* this.result.城市 = this.resData.CS;
-                 this.result.县区 = this.resData.XQ;*/
-                this.result.坐落位置 = this.resData.zlwz
-                this.result.实际用途 = this.resData.sjyt
-                this.result.权属起始时间 = this.resData.qsqssj
-                this.result.权属结束时间 = this.resData.qsdqsj
-                this.result.担保 = this.resData.dbdycfqk
-                this.result.土地使用现状 = this.resData.tdsyxz
-                this.result.备注 = this.resData.BZ
-                //  this.result.审核是否通过 = this.resData.shzt;
-                this.result.地块编号 = this.resData.dkbh
-                this.result.IMAGE = this.resData.images
-                this.infoShow = true
-                this.$refs.detail.loadDetail(this.result)
-              }
-              console.log(this.result)
-            } else if (actionId == 'showAll') {
-              if (this.resData.vr == null) {
-                this.$message.warn('全景图片不存在！')
-              } else {
-                window.open('/tdzcxx/vtour/tour.html?startscene=scene_' + this.resData.vr, '_blank')
-                //window.open('http://localhost:56122/?startscene=scene_'+this.resData.vr, '_blank')
-              }
+              this.infoShow = true
+              this.$refs.detail.loadDetail(this.result)
+            }
+            if (this.resData.sysOrgCode.slice(0, 3) == 'A03') {
+              this.result.单位名称 = this.resData.createBy
+              /*this.result.BZ=attributes.BZ;*/
+              this.result.地块名称 = this.resData.dk
+              this.result.文件类型 = this.resData.zslx
+              this.result.文件编号 = this.resData.wjbh
+              // this.result.一级单位 = attributes.YJDW;
+              /* this.result.文件_1=attributes.WJ_1;*/
+              this.result.土地使用权人 = this.resData.tdsyqr
+              this.result.实际占用土地面积 = parseFloat(this.resData.sjzytdmj).toFixed(2)
+              /* this.result.实际_1=attributes.SJ_1.toFixed(2);*/
+              this.result.其中证载使用土地面积 = parseFloat(this.resData.qzpzsymj).toFixed(2)
+              this.result.实际使用建筑面积 = parseFloat(this.resData.sjsyjzmj).toFixed(2)
+              this.result.其中证载使用建筑面积 = parseFloat(this.resData.qzpzsymj2).toFixed(2)
+              //  this.result.总建筑面积 = parseFloat(this.resData.ZJZ).toFixed(2);
+              // this.result.是否共用宗 = this.resData.sfgyz;
+              //this.result.容积率 = parseFloat(this.resData.sjrjl).toFixed(2);
+              this.result.使用权使用方式 = this.resData.syqsyfs
+              /* this.result.城市 = this.resData.CS;
+               this.result.县区 = this.resData.XQ;*/
+              this.result.坐落位置 = this.resData.zlwz
+              this.result.实际用途 = this.resData.sjyt
+              this.result.权属起始时间 = this.resData.qsqssj
+              this.result.权属结束时间 = this.resData.qsdqsj
+              this.result.担保 = this.resData.dbdycfqk
+              this.result.土地使用现状 = this.resData.tdsyxz
+              this.result.备注 = this.resData.BZ
+              //  this.result.审核是否通过 = this.resData.shzt;
+              this.result.地块编号 = this.resData.dkbh
+              this.result.IMAGE = this.resData.images
+              this.infoShow = true
+              this.$refs.detail.loadDetail(this.result)
+            }
+
+          } else if (actionId == 'showAll') {
+            if (this.resData.vr == null) {
+              this.$message.warn('全景图片不存在！')
             } else {
-              this.$message.warn('该地块未上报信息！')
+              window.open('/tdzcxx/vtour/tour.html?startscene=scene_' + this.resData.vr, '_blank')
+              //window.open('http://localhost:56122/?startscene=scene_'+this.resData.vr, '_blank')
             }
-          })
-        }
-      },
+          } else {
+            this.$message.warn('该地块未上报信息！')
+          }
+        })
+      }
+    },
 
-      selectChange(feature) {
-        let content = document.createElement('div')
-        this.resData = []
-        if (feature.graphic.attributes.dkbh != ' ') {
-          return new Promise((resolve, reject) => {
-            getAction('/qcsb/qcSsgqzysytdqk/queryBydkbh', {
-              DKBH: feature.graphic.attributes.dkbh
-            }).then((res) => {
-              if (res.code == 200) {
-                this.resData = res.result
-                resolve(this.resData)
-              } else {
-                resolve(this.resData)
-              }
-            })
+    selectChange(feature) {
+      let content = document.createElement('div')
+      this.resData = []
+      if (feature.graphic.attributes.dkbh != ' ') {
+        return new Promise((resolve, reject) => {
+          getAction('/qcsb/qcSsgqzysytdqk/queryBydkbh', {
+            DKBH: feature.graphic.attributes.dkbh
           }).then((res) => {
-            if (res.sysOrgCode.slice(0, 3) == 'A04') {
-              var dwmc = res.createBy
-              var dkmc = res.dk
-              var sjyd = res.sjytText
-              var sjzytdmj = res.sjzytdmjPf
-              var sjsyjzmj = res.sjsyjzmj
-              // <!--<div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用土地面积：</div><div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用建筑面积：</div>-->
-              content.innerHTML =
-                `<div><span style="font-weight: bold;">企业名称：</span> <span>${dwmc}<span/></div>
+            if (res.code == 200) {
+              this.resData = res.result
+              resolve(this.resData)
+            } else {
+              resolve(this.resData)
+            }
+          })
+        }).then((res) => {
+          if (res.sysOrgCode.slice(0, 3) == 'A04') {
+            var dwmc = res.createBy
+            var dkmc = res.dk
+            var sjyd = res.sjytText
+            var sjzytdmj = res.sjzytdmjPf
+            var sjsyjzmj = res.sjsyjzmj
+            // <!--<div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用土地面积：</div><div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用建筑面积：</div>-->
+            content.innerHTML =
+              `<div><span style="font-weight: bold;">企业名称：</span> <span>${dwmc}<span/></div>
                              <div><span style="font-weight: bold;">地块名称：</span> <span>${dkmc}</span></div>
                              <div><span style="font-weight: bold;">实际用地：</span> <span>${sjyd}</span></div>
                              <div class="ant-tag" style="background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 " >实际占用土地面积：${
-                               sjzytdmj || 0
-                             }²</div>
+                sjzytdmj || 0
+              }²</div>
                               <div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >实际使用建筑面积：${
-                                sjsyjzmj || 0
-                              }²</div>`
-              return content
-            } else {
-              var dwmc = res.createBy
-              var dkmc = res.dk
-              var sjyd = res.sjytText
-              var sjzytdmj = res.sjzytdmj
-              var sjsyjzmj = res.sjsyjzmj
-              let content = document.createElement('div')
-              // <!--<div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用土地面积：</div><div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用建筑面积：</div>-->
-              content.innerHTML =
-                `<div><span style="font-weight: bold;">企业名称：</span> <span>${dwmc}<span/></div>
+                sjsyjzmj || 0
+              }²</div>`
+            return content
+          } else {
+            var dwmc = res.createBy
+            var dkmc = res.dk
+            var sjyd = res.sjytText
+            var sjzytdmj = res.sjzytdmj
+            var sjsyjzmj = res.sjsyjzmj
+            let content = document.createElement('div')
+            // <!--<div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用土地面积：</div><div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >其中批准使用建筑面积：</div>-->
+            content.innerHTML =
+              `<div><span style="font-weight: bold;">企业名称：</span> <span>${dwmc}<span/></div>
                              <div><span style="font-weight: bold;">地块名称：</span> <span>${dkmc}</span></div>
                              <div><span style="font-weight: bold;">实际用地：</span> <span>${sjyd}</span></div>
                              <div class="ant-tag" style="background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 " >实际占用土地面积：${
-                               sjzytdmj || 0
-                             }²</div>
+                sjzytdmj || 0
+              }²</div>
                               <div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >实际使用建筑面积：${
-                                sjsyjzmj || 0
-                              }²</div>
+                sjsyjzmj || 0
+              }²</div>
                                `
-              return content
-            }
-          })
-        } else {
-          return (content.innerHTML =
+            return content
+          }
+        })
+      } else {
+        return (content.innerHTML =
             `  <div><span style="font-weight: bold;">企业名称：</span> <span>${feature.graphic.attributes.DWMC}<span/></div>
                              <div><span style="font-weight: bold;">证书编号：</span> <span>${feature.graphic.attributes.ZSBH}</span></div>
     <div class="ant-tag" style="background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 " >地块信息未上报</div>`
-          )
-          // this.$info({
-          //   title: '说明',
-          //   content: (<div><p>{地块信息不存在}</p></div>),
-          //   onOk() {
-          //   }
-          // })
+        )
+        // this.$info({
+        //   title: '说明',
+        //   content: (<div><p>{地块信息不存在}</p></div>),
+        //   onOk() {
+        //   }
+        // })
+      }
+    },
+    locate(options) {
+      this.$refs.locateByGeoinfo.locate(options)
+    },
+    locateByGeometry(geom) {
+      this.$refs.locateByGeoinfo.locateByGeometryWithClean(geom, null)
+    },
+    locateToExtent(extent, geoConfigs) {
+      this.$refs.locateByGeoinfo.locateToExtent(extent, geoConfigs)
+    },
+    //复选框处理方法
+    changeLayerVisible(layerConfig, visible, esriMap) {
+      //TODO:
+      console.log("复选框处理事件")
+      console.log(JSON.stringify(layerConfig))
+      console.log(JSON.stringify(visible))
+      if (layerConfig != null && layerConfig != '' && JSON.stringify(layerConfig) !== '{}') {
+        //处理行政区划显示单选问题
+        if (visible === undefined || visible === null) {
+          visible = true
         }
-      },
-      locate(options) {
-        this.$refs.locateByGeoinfo.locate(options)
-      },
-      locateByGeometry(geom) {
-        this.$refs.locateByGeoinfo.locateByGeometryWithClean(geom, null)
-      },
-      locateToExtent(extent, geoConfigs) {
-        this.$refs.locateByGeoinfo.locateToExtent(extent, geoConfigs)
-      },
-      //复选框处理方法
-      changeLayerVisible(layerConfig, visible, esriMap) {
-        if (layerConfig != null && layerConfig != '' && JSON.stringify(layerConfig) !== '{}') {
-          if (visible === undefined || visible === null) {
-            visible = true
-          }
-          if (esriMap === undefined || esriMap === null) {
-            esriMap = this.esriMap
-          }
-
-          //根据图层id获取图层，并改变图层在地图中的显示状态
-          let m_layer = esriMap.findLayerById(layerConfig.id)
-          if (!m_layer) {
-            debugger
-            m_layer = this._loadLayer(layerConfig)
-            m_layer.visible = visible
-          } else {
-            if (
-              layerConfig.sublayerid != null &&
-              layerConfig.sublayerid != -1 &&
-              layerConfig.servicetype != 'TileLayer'
-            ) {
-              let sublayer = m_layer.findSublayerById(parseInt(layerConfig.sublayerid))
-              sublayer.visible = visible
-              if (layerConfig.queryable) {
-                if (visible) {
-                  this.v_layerIds.push(layerConfig.sublayerid)
-                } else {
-                  let index = this.v_layerIds.indexOf(layerConfig.sublayerid)
-                  if (index > -1) {
-                    this.v_layerIds.splice(index, 1)
-                  }
+        if (esriMap === undefined || esriMap === null) {
+          esriMap = this.esriMap
+        }
+        //根据图层id获取图层，并改变图层在地图中的显示状态
+        let m_layer = esriMap.findLayerById(layerConfig.id)
+        if (!m_layer) {
+          m_layer = this._loadLayer(layerConfig)
+          m_layer.visible = visible
+        } else {
+          if (
+            layerConfig.sublayerid != null &&
+            layerConfig.sublayerid != -1 &&
+            layerConfig.servicetype != 'TileLayer'
+          ) {
+            let sublayer = m_layer.findSublayerById(parseInt(layerConfig.sublayerid))
+            sublayer.visible = visible
+            if (layerConfig.queryable) {
+              if (visible) {
+                this.v_layerIds.push(layerConfig.sublayerid)
+              } else {
+                let index = this.v_layerIds.indexOf(layerConfig.sublayerid)
+                if (index > -1) {
+                  this.v_layerIds.splice(index, 1)
                 }
-
-
               }
-            } else {
-              m_layer.visible = visible
             }
-          }
-          //根据图层id，更改资源目录列表中图层的表示状态
-          let layerList = this.list[0]
-          if (layerList && layerList.length !== 0) {
-            layerList.forEach((layerItem) => {
-              if (layerItem.layers) {
-                layerItem.layers.forEach((layerSubItem) => {
-                  if (layerSubItem.id === layerConfig.id) {
-                    layerSubItem.visible = visible
-                  }
-                })
-              }
-            })
+          } else {
+            m_layer.visible = visible
           }
         }
-      },
-      changeLayerVisibleByLayerName(layerName, visible) {
-        let layerConfig = {}
-        this.layerConfigs.map((item) => {
-          if (item.name == layerName) {
-            layerConfig = item
-          }
-        })
-        this.changeLayerVisible(layerConfig, visible, this.esriMap)
-      },
-      changeLayerVisibleByTableName(tableName, visible) {
-        let layerConfig = {}
-        this.layerConfigs.map((item) => {
-          if (item.tablename == tableName) {
-            layerConfig = item
-          }
-        })
-        this.changeLayerVisible(layerConfig, visible, this.esriMap)
-      },
-      changeLayerOpacity(layerConfig, opacity) {
-        if (layerConfig != null && layerConfig != '' && JSON.stringify(layerConfig) !== '{}') {
-          let m_layer = this.esriMap.findLayerById(layerConfig.id)
-          if (!m_layer) {
-            return
-          }
-          m_layer.opacity = opacity
+        //根据图层id，更改资源目录列表中图层的表示状态
+        let layerList = this.list[0]
+        if (layerList && layerList.length !== 0) {
+          layerList.forEach((layerItem) => {
+            if (layerItem.layers) {
+              layerItem.layers.forEach((layerSubItem) => {
+                if (layerSubItem.id === layerConfig.id) {
+                  layerSubItem.visible = visible
+                }
+              })
+            }
+          })
         }
-      },
-      handleCursorStyle(style) {
-        if (style) {
-          this.$refs.basicMap.style.cursor = style
-        } else {
-          this.$refs.basicMap.style.cursor = 'auto'
+      }
+    },
+    changeLayerVisibleByLayerName(layerName, visible) {
+      let layerConfig = {}
+      this.layerConfigs.map((item) => {
+        if (item.name == layerName) {
+          layerConfig = item
         }
-      },
-      handleDrawer() {
-        this.drawerVisible = !this.drawerVisible
-        /*if(this.drawerVisible){
-          this.drawerStyle="right:438px"
-        }else {
-          this.drawerStyle="right:0"
-        }*/
-      },
+      })
+      this.changeLayerVisible(layerConfig, visible, this.esriMap)
+    },
+    changeLayerVisibleByTableName(tableName, visible) {
+      let layerConfig = {}
+      this.layerConfigs.map((item) => {
+        if (item.tablename == tableName) {
+          layerConfig = item
+        }
+      })
+      this.changeLayerVisible(layerConfig, visible, this.esriMap)
+    },
+    changeLayerOpacity(layerConfig, opacity) {
+      if (layerConfig != null && layerConfig != '' && JSON.stringify(layerConfig) !== '{}') {
+        let m_layer = this.esriMap.findLayerById(layerConfig.id)
+        if (!m_layer) {
+          return
+        }
+        m_layer.opacity = opacity
+      }
+    },
+    handleCursorStyle(style) {
+      if (style) {
+        this.$refs.basicMap.style.cursor = style
+      } else {
+        this.$refs.basicMap.style.cursor = 'auto'
+      }
+    },
+    handleDrawer() {
+      this.drawerVisible = !this.drawerVisible
+      /*if(this.drawerVisible){
+        this.drawerStyle="right:438px"
+      }else {
+        this.drawerStyle="right:0"
+      }*/
     },
-  }
+  },
+}
 </script>
 
 <style>
-  html,
-  body,
-  .basicMap {
-    margin: 0;
-    padding: 0;
-    position: relative;
-  }
+html,
+body,
+.basicMap {
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
 
-  .unselectable {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-  }
+.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
 
-  .coordinate {
-    position: absolute;
-    bottom: 1em;
-    left: calc(50% - 60px);
-    width: auto;
-    height: 2em;
-    line-height: 2em;
-    background-color: white;
-    box-shadow: 0 0 5px #1890ff;
-    color: #1890ff;
-    font-size: 1em;
-    font-weight: bold;
-    opacity: 0.9;
-    padding: 0 0.5em;
-  }
+.coordinate {
+  position: absolute;
+  bottom: 1em;
+  left: calc(50% - 60px);
+  width: auto;
+  height: 2em;
+  line-height: 2em;
+  background-color: white;
+  box-shadow: 0 0 5px #1890ff;
+  color: #1890ff;
+  font-size: 1em;
+  font-weight: bold;
+  opacity: 0.9;
+  padding: 0 0.5em;
+}
 
-  .toolBar .ant-card {
-    cursor: auto;
-  }
+.toolBar .ant-card {
+  cursor: auto;
+}
 
-  .toolBar .ant-card .ant-card-bordered {
-    border: 0.1px solid #e8e8e8;
-  }
+.toolBar .ant-card .ant-card-bordered {
+  border: 0.1px solid #e8e8e8;
+}
 
-  .toolBar .ant-card .ant-card-head {
-    background-color: rgba(24, 129, 253, 0.8);
-    color: #ffffff;
-    cursor: move;
-  }
+.toolBar .ant-card .ant-card-head {
+  background-color: rgba(24, 129, 253, 0.8);
+  color: #ffffff;
+  cursor: move;
+}
 
-  .toolBar .ant-card .ant-card-head-title,
-  .ant-card .ant-card-extra {
-    padding: 12px 0;
-  }
+.toolBar .ant-card .ant-card-head-title,
+.ant-card .ant-card-extra {
+  padding: 12px 0;
+}
 
-  .toolBar .ant-card-head .ant-card-head-wrapper {
-    align-items: unset;
-  }
+.toolBar .ant-card-head .ant-card-head-wrapper {
+  align-items: unset;
+}
 
-  .legendPanel {
-    position: absolute;
-    left: 1em;
-    bottom: 3em;
-  }
+.legendPanel {
+  position: absolute;
+  left: 1em;
+  bottom: 3em;
+}
 
-  .drawQuery .ant-list-item-action {
-    margin-left: 25px;
-  }
+.drawQuery .ant-list-item-action {
+  margin-left: 25px;
+}
 
-  .toolBar .ant-list-item-action {
-    margin-left: 10px;
-    position: absolute;
-    bottom: 3px;
-    right: 0;
-  }
+.toolBar .ant-list-item-action {
+  margin-left: 10px;
+  position: absolute;
+  bottom: 3px;
+  right: 0;
+}
 
-  .ant-list-split .ant-list-item {
-    border-bottom: 1px solid #e8e8e8;
-    position: relative;
-  }
+.ant-list-split .ant-list-item {
+  border-bottom: 1px solid #e8e8e8;
+  position: relative;
+}
 
-  .ant-form-item .ant-form-item-label label {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    display: block;
-  }
+.ant-form-item .ant-form-item-label label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+}
 
-  .sider ul.ant-menu[data-v-090c6f46] {
-    height: calc(100vh - 59px);
-    overflow: auto;
-  }
+.sider ul.ant-menu[data-v-090c6f46] {
+  height: calc(100vh - 59px);
+  overflow: auto;
+}
 
-  ul {
-    padding: 0;
-  }
+ul {
+  padding: 0;
+}
 
-  ul>li {
-    list-style: none;
-  }
+ul > li {
+  list-style: none;
+}
 
-  #app {
-    height: 100%;
-  }
+#app {
+  height: 100%;
+}
 
-  .sidemenu {
-    display: flex;
-    flex-direction: column;
-  }
+.sidemenu {
+  display: flex;
+  flex-direction: column;
+}
 
-  #toolBar ::-webkit-scrollbar {
-    width: 3px !important;
-  }
+#toolBar ::-webkit-scrollbar {
+  width: 3px !important;
+}
 
-  #toolBar ::-webkit-scrollbar {
-    width: 3px !important;
-    height: 0;
-  }
+#toolBar ::-webkit-scrollbar {
+  width: 3px !important;
+  height: 0;
+}
 
-  #toolBar ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    background: #428fff;
-  }
+#toolBar ::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background: #428fff;
+}
 
-  .icon-close {
-    cursor: pointer;
-    position: absolute;
-    right: 5px;
-    top: 5px;
-  }
+.icon-close {
+  cursor: pointer;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
 
-  .ant-avatar.result>img {
-    display: inline-block;
-    height: auto;
-    width: auto;
-  }
+.ant-avatar.result > img {
+  display: inline-block;
+  height: auto;
+  width: auto;
+}
 
-  .ant-card-body>.ant-btn {
-    display: inline-block;
-    margin-top: 10px;
-    margin-right: 5px;
-  }
+.ant-card-body > .ant-btn {
+  display: inline-block;
+  margin-top: 10px;
+  margin-right: 5px;
+}
 
-  .ant-list-item:hover {
-    background: #e6f7ff;
-    cursor: pointer;
-  }
+.ant-list-item:hover {
+  background: #e6f7ff;
+  cursor: pointer;
+}
 
-  .toolBar .ant-list-item {
-    align-items: flex-start;
-  }
+.toolBar .ant-list-item {
+  align-items: flex-start;
+}
 
-  .toolBar .ant-btn-background-ghost.ant-btn-primary:hover,
-  .ant-btn-background-ghost.ant-btn-primary:focus {
-    color: #faad14;
-    border-color: #faad14;
-  }
+.toolBar .ant-btn-background-ghost.ant-btn-primary:hover,
+.ant-btn-background-ghost.ant-btn-primary:focus {
+  color: #faad14;
+  border-color: #faad14;
+}
 </style>
 <style scoped>
-  h2 {
-    position: absolute;
-    right: 0.25em;
-    top: 0.25em;
-    background-color: aliceblue;
-    box-shadow: 0 0 5px #1890ff;
-    padding: 1px 2px;
-  }
+h2 {
+  position: absolute;
+  right: 0.25em;
+  top: 0.25em;
+  background-color: aliceblue;
+  box-shadow: 0 0 5px #1890ff;
+  padding: 1px 2px;
+}
 
-  #right-sild {
-    top: 50%;
-    transform: translateY(-50%);
-    right: 0;
-    width: 30px;
-    height: 120px;
-    background: #1890ff;
-    text-align: center;
-    color: #fff;
-    cursor: pointer;
-    position: absolute;
-    font-size: 12px;
-    border-top-left-radius: 40px;
-    border-bottom-left-radius: 40px;
-    /*z-index: 10000;*/
-  }
+#right-sild {
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
+  width: 30px;
+  height: 120px;
+  background: #1890ff;
+  text-align: center;
+  color: #fff;
+  cursor: pointer;
+  position: absolute;
+  font-size: 12px;
+  border-top-left-radius: 40px;
+  border-bottom-left-radius: 40px;
+  /*z-index: 10000;*/
+}
 
-  .ttitle {
-    margin-top: 6px;
-    margin-left: 2px;
-  }
+.ttitle {
+  margin-top: 6px;
+  margin-left: 2px;
+}
 
-  .basicMap2,
-  .basicMap3 {
-    position: relative;
-  }
+.basicMap2,
+.basicMap3 {
+  position: relative;
+}
 
-  #div1 {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    z-index: 888;
-    color: #fff;
-    margin: 0px 0px 0px 0px;
-    background-image: url('../../assets/ico_mouse.png');
-    width: 42px;
-    height: 42px;
-    border: 1px solid #ff0000;
-  }
+#div1 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 888;
+  color: #fff;
+  margin: 0px 0px 0px 0px;
+  background-image: url('../../assets/ico_mouse.png');
+  width: 42px;
+  height: 42px;
+  border: 1px solid #ff0000;
+}
 </style>

src/components/OneMap/widgets/ResCatalog.vue

@@ -1,8 +1,8 @@
 <template>
   <div ref='ResCatalog' v-drag='`.resCatalog${splitScreen} .ant-card-head`'
-       :class='`resCatalog resCatalog${splitScreen} ol-unselectable`'>
+    :class='`resCatalog resCatalog${splitScreen} ol-unselectable`'>
     <a-card v-show='value' title='专题图层' style='box-shadow: 0 0 5px #357ee5;'>
-      <a-icon slot='extra' type='close' class='panelClose' @click="$emit('input',false)"/>
+      <a-icon slot='extra' type='close' class='panelClose' @click="$emit('input',false)" />
       <a-collapse style='overflow-y: auto; max-height: 50vh;' v-model="activeKey">
         <a-collapse-panel v-for='(item,index) in this.basicMap.list[ind]' :key='item.id' :header='item.name'>
           <template v-for='(itemA,index) in item.layers'>
@@ -10,20 +10,20 @@
               <div>
                 <!--专题选择-->
                 <a-checkbox v-model='itemA.visible' ref='checkbox' @change='layerSwitch(itemA)'>
-                  <img v-if="itemA.visible&&itemA.legend&&[itemA.children]==''" :src='`${baseUrl}/${itemA.legend}`'/>
+                  <img v-if="itemA.visible&&itemA.legend&&[itemA.children]==''" :src='`${baseUrl}/${itemA.legend}`' />
                   <span>{{ itemA.alias }}</span>
                 </a-checkbox>
-                <a-slider style='display: inline-block;' ref='slider' class='slider' :min='0' :max='1'
-                          :step='0.01' :default-value='1' :tooltip-visible='false' :disabled='!itemA.visible'
-                          @change='changeOpacity($event,itemA)'></a-slider>
-                                <!-- <template v-if='itemA.servicetype === "DynamicLayer"'>
+                <a-slider style='display: inline-block;' ref='slider' class='slider' :min='0' :max='1' :step='0.01'
+                  :default-value='1' :tooltip-visible='false' :disabled='!itemA.visible'
+                  @change='changeOpacity($event,itemA)'></a-slider>
+                <!-- <template v-if='itemA.servicetype === "DynamicLayer"'>
                                  <a-switch size='small' :defaultChecked='itemA.labelsvisible' :disabled='!itemA.visible'
                                            @change='changeLabelsVisible($event,itemA)' class='labelSwitch'></a-switch>
                                 </template> -->
               </div>
               <template v-if="[itemA.categories]!=''&&itemA.visible">
                 <p v-for='item in itemA.categories'>
-                  <img :src='`${baseUrl}/${item.img}`'/>
+                  <img :src='`${baseUrl}/${item.img}`' />
                   {{ item.name }}
                 </p>
               </template>
@@ -35,16 +35,16 @@
                     <div>
                       <a-checkbox v-model='layer.visible' ref='checkbox' @change='layerSwitch(layer)'>
                         <img v-if="layer.visible&&layer.legend&&[layer.children]==''"
-                             :src='`${baseUrl}/${layer.legend}`'/>
+                          :src='`${baseUrl}/${layer.legend}`' />
                         <span>{{ layer.alias }}</span>
                       </a-checkbox>
                       <a-slider style='display: inline-block;' ref='slider' class='slider' :min='0' :max='1'
-                                :step='0.01' :default-value='1' :tooltip-visible='false' :disabled='!layer.visible'
-                                @change='changeOpacity($event,layer)'></a-slider>
+                        :step='0.01' :default-value='1' :tooltip-visible='false' :disabled='!layer.visible'
+                        @change='changeOpacity($event,layer)'></a-slider>
                     </div>
                     <template v-if="[layer.categories]!=''&&layer.visible">
                       <p v-for='item in layer.categories'>
-                        <img :src='`${baseUrl}/${item.img}`'/>
+                        <img :src='`${baseUrl}/${item.img}`' />
                         {{ item.name }}
                       </p>
                     </template>
@@ -60,129 +60,128 @@
 </template>
 
 <script>
-
-export default {
-  name: 'ResCatalog',
-  props: {
-    value: {
-      type: Boolean,
-      default: false,
-      required: true
-    }
-  },
-  components: {},
-  data: function () {
-    return {
-      baseUrl: '',
-      layerList: [],
-      map: {},
-      ind: 0,
-      list: [],
-      activeKey: []
-    };
-  },
-  inject: ['basicMap', 'splitScreen'],
-  created() {
-    this.baseUrl = window._CONFIG['domianURL'];
-  },
-  mounted() {
-    /*if(this.splitScreen){
-      this.layerList=this.basicMap.layerList;
-    }else {
-      this.layerList=this.basicMap.layerList;
-    }*/
-    if (this.splitScreen) {
-      this.ind = 1;
-    } else {
-      this.ind = 0;
-    }
-  },
-  watch: {
-    value: function (newValue) {
-      if (newValue === false) {
-
-      } else {
-        if (this.basicMap.list[0]) {
-          this.basicMap.list[0].forEach((item) => {
-            this.activeKey.push(item.id);
-          })
-        }
-      }
-    }
-  },
-  methods: {
-    layerSwitch(layer) {
-      let map;
-      if (this.splitScreen) {
-        map = this.basicMap.esriMap2;
-      } else {
-        map = this.basicMap.esriMap;
+  export default {
+    name: 'ResCatalog',
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+        required: true
       }
-      let checked = layer.visible;
-      this.basicMap.changeLayerVisible(layer, checked, map);
     },
-    changeOpacity(value, layer) {
-      this.basicMap.changeLayerOpacity(layer, value);
+    components: {},
+    data: function() {
+      return {
+        baseUrl: '',
+        layerList: [],
+        map: {},
+        ind: 0,
+        list: [],
+        activeKey: []
+      };
+    },
+    inject: ['basicMap', 'splitScreen'],
+    created() {
+      this.baseUrl = window._CONFIG['domianURL'];
+    },
+    mounted() {
+      /*if(this.splitScreen){
+        this.layerList=this.basicMap.layerList;
+      }else {
+        this.layerList=this.basicMap.layerList;
+      }*/
       if (this.splitScreen) {
-        this.map = this.basicMap.esriMap2;
+        this.ind = 1;
       } else {
-        this.map = this.basicMap.esriMap;
+        this.ind = 0;
       }
-      let m_layer = this.map.findLayerById(layer.id);
-      if (!m_layer) {
-        return;
+    },
+    watch: {
+      value: function(newValue) {
+        if (newValue === false) {
+
+        } else {
+          if (this.basicMap.list[0]) {
+            this.basicMap.list[0].forEach((item) => {
+              this.activeKey.push(item.id);
+            })
+          }
+        }
       }
-      m_layer.opacity = value;
     },
-    changeLabelsVisible(checked, layer) {
-      let m_layer = this.basicMap.esriMap.findLayerById(layer.id);
-      m_layer.findSublayerById(layer.sublayerid).labelsVisible = checked;
+    methods: {
+      layerSwitch(layer) {
+        let map;
+        if (this.splitScreen) {
+          map = this.basicMap.esriMap2;
+        } else {
+          map = this.basicMap.esriMap;
+        }
+        let checked = layer.visible;
+        this.basicMap.changeLayerVisible(layer, checked, map);
+      },
+      changeOpacity(value, layer) {
+        this.basicMap.changeLayerOpacity(layer, value);
+        if (this.splitScreen) {
+          this.map = this.basicMap.esriMap2;
+        } else {
+          this.map = this.basicMap.esriMap;
+        }
+        let m_layer = this.map.findLayerById(layer.id);
+        if (!m_layer) {
+          return;
+        }
+        m_layer.opacity = value;
+      },
+      changeLabelsVisible(checked, layer) {
+        let m_layer = this.basicMap.esriMap.findLayerById(layer.id);
+        m_layer.findSublayerById(layer.sublayerid).labelsVisible = checked;
+      }
     }
-  }
-};
+  };
 </script>
 
 <style scoped>
-.ant-checkbox-wrapper {
-  display: flex;
-  align-items: center;
-  max-width: 140px;
-}
+  .ant-checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    max-width: 140px;
+  }
 
-.resCatalog {
-  border-radius: 4px;
-  box-shadow: 0 0 5px #357ee5;
-  min-width: 300px;
-  height: auto;
-}
+  .resCatalog {
+    border-radius: 4px;
+    box-shadow: 0 0 5px #357ee5;
+    min-width: 300px;
+    height: auto;
+  }
 
-#resourceCatalog.resCatalogtrue {
-  z-index: 100;
-  transform: translateX(-100%);
-  top: 210px;
-  right: 29%;
-  position: fixed;
-}
+  #resourceCatalog.resCatalogtrue {
+    z-index: 100;
+    transform: translateX(-100%);
+    top: 210px;
+    right: 29%;
+    position: fixed;
+  }
 
-.ant-slider {
-  margin: 2px 1px 1px;
-  width: 40%;
-}
+  .ant-slider {
+    margin: 2px 1px 1px;
+    width: 40%;
+  }
 
-li > div {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
+  li>div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
 
-p {
-  padding-left: 40px;
-}
+  p {
+    padding-left: 40px;
+  }
 
-img {
-  width: 20px;
-  /*height: 20px;*/
-  display: inline-block;
-}
-</style>
+  img {
+    width: 20px;
+    /*height: 20px;*/
+    display: inline-block;
+  }
+</style>