多图层同时渲染功能优化

BJYSYBZ_C/public/config.js

@@ -162,6 +162,17 @@ window.ApplicationConfig = {
               serverType: "ArcGISTile",
               url: `https://kjzzyy.hzsgis.com:8082/Ip109-13-8083/512834d664a4d3407b4c18ba3e8b3b66373945ec/Tile/RemoteRest/YG_HZRASTER202307_BX.gis`
             },
+            {
+              id: "bj-kzxxxgh",
+              name: "控制性详细规划",
+              enabled: true,
+              visible: false,
+              serverType: "dynamic",
+              params: {
+                layers: "show:0,1"
+              },
+              url: "https://ditu.hangzhoumap.gov.cn:6443/arcgis/rest/services/KGDK_CESHI/MapServer",
+            },
             {
               id: "bj-lsyd",
               name: "滨江临时用地",

BJYSYBZ_C/src/views/YbzBjView/components/OneContent.vue

@@ -2,6 +2,15 @@
   <div class="FourContent">
     <cart-item title="要素保障">
       <div class="main-box">
+        <card-item2
+            :hover="true"
+            :is_selected="moreLayers.some(it => it === 'bj-stbhhx')"
+            unit=""
+            :icon="require('@/assets/images/YsybzView/gymj.png')"
+            title="控制性详细规划"
+            style="margin-bottom: 5px"
+            @click="showLayer('bj-kzxxxgh')"
+            color="#FFE383"/>
         <card-item2
             :value="7220"
             unit="公顷"
@@ -266,6 +275,14 @@ export default {
           }
           this.$vm.$emit("showMoreLayer", this.moreLayers);
           break;
+        case 'bj-kzxxxgh':
+          if (this.moreLayers.includes('bj-kzxxxgh')) {
+            this.moreLayers.splice(this.moreLayers.indexOf('bj-kzxxxgh'), 1)
+          } else {
+            this.moreLayers.unshift("bj-kzxxxgh")
+          }
+          this.$vm.$emit("showMoreLayer", this.moreLayers);
+          break;
       }
       setTimeout(()=>{
         this.$vm.$emit("switchLayerShow", true);

BJYSYBZ_C/src/views/YsbzDetail/components/common/CardItem2.vue

@@ -36,7 +36,6 @@ export default {
     },
     value: {
       type: [String, Number],
-      default: 22.2
     },
     title: {
       type: String,

BJYSYBZ_C/src/views/components/BigScreenMap/index.vue

@@ -729,6 +729,7 @@ export default {
         this.realLayers = [];
       }
     });
+    
     this.$vm.$on("GlobalStatisticsLayer", (payload) => {
       let { layerId, setting } = payload;
       this.statisticsLayer(layerId, setting);
@@ -1203,12 +1204,15 @@ export default {
         this.$vm.$emit("clear-layer");
         if (this.visibleLayerId === "xzqh-s-search") return;
         if (this.visibleLayerId === "xzqh-x-search") return;
+        console.log("visibleLayerId--------------------------")
+        console.log(this.visibleLayerId)
         const drawing = map.get("drawing");
         if (drawing || pickBlackList.includes(layerId)) {
           console.log("no pick event");
           return;
         }
         this.detailData = {}
+        console.log(this.visibleLayerId)
         this.pickServerFeature(e);
       });
       map.on("moveend", () => {

WEB-VIEW2/src/views/components/BigScreenMap/index.vue

@@ -79,6 +79,7 @@ import VlMapDevInfo from '@/components/ol/VlMapDevInfo';
 import VlChinaCities from '@/components/ol/VlChinaCities';
 import { MultiPolygon, Point } from 'ol/geom';
 import { getSrid, mapFit, toArcGIS } from '@/utils/arcgis-utils';
+import Map from 'ol';
 import { Stroke, Style } from 'ol/style';
 import { Vector as VectorSource } from 'ol/source';
 import { Vector as VectorLayer } from 'ol/layer';
@@ -553,21 +554,6 @@ export default {
             fill: new Fill({
               color: '#4AD808',
             }),
-            // text: new Text(({
-            //   // 位置
-            //   textAlign: 'center',
-            //   // 基准线
-            //   textBaseline: 'middle',
-            //   // 文字样式
-            //   font: 'bold 16px 微软雅黑',
-            //   // 文本内容
-            //   text: feature.get('name')+'\n'+feature.get('value')+' '+feature.get('unit'),
-            //   // 文字颜色
-            //   fill: new Fill({ color: '#FFF' }),
-            //   // fill: new Fill({ color: feature.get('color') }),
-            //   // 文字背景
-            //   // stroke: new Stroke({ color: '#ffcc33', width: 10 })
-            // }))
           });
         },
         zIndex: 99,
@@ -599,11 +585,8 @@ export default {
           if (layerById) {
             layerById.visible = v
           }
-          if (v) {
-            this.visibleLayerId = k;
-            this.$vm.$emit('switchLayerEvent', k)
-          }
         }, 500)
+          this.$vm.$emit('switchLayerEvent', idsState)
       })
     },
     showLandDetail(props) {
@@ -1464,33 +1447,39 @@ export default {
     configLayerLoaded(enabledLayersConfig) {
       this.enabledLayersConfig = enabledLayersConfig;
     },
-    async pickServerFeature (e) {
+    async pickServerFeature(e) {
+      console.log(
+        this.visibleLayerId,
+        typeof this.visibleLayerId,
+        "typeof this.visibleLayerId"
+      );
       let tempLayerIds = this.visibleLayerIds.filter(
         (it) =>
-          it !== 'xzqh-s' &&
-          it !== 'xzqh-s-search' &&
-          it !== 'xzqh-x-search' &&
-          it !== 'xzqh-x-search-dzl' &&
-          it !== 'xzqh-x' &&
-          it !== 'xzqh-z' &&
-          it !== 'hzyx-202311' &&
-          it !== 'hzyx-202310' &&
-          it !== 'hzyx-202308' &&
-          it !== 'hzyx-202309' &&
-          it !== 'bj-czkfbj' &&
-          it !== 'bj-stbhhx' &&
-          it !== 'bj-kfbjw',
+          it !== "xzqh-s" &&
+          it !== "xzqh-s-search" &&
+          it !== "xzqh-x-search" &&
+          it !== "xzqh-x-search-dzl" &&
+          it !== "xzqh-x" &&
+          it !== "xzqh-z" &&
+          it !== "bjq-xzq" &&
+          it !== "hzyx-202311" &&
+          it !== "hzyx-202310" &&
+          it !== "hzyx-202308" &&
+          it !== "hzyx-202309" &&
+          it !== "bj-czkfbj" &&
+          it !== "bj-stbhhx" &&
+          it !== "bj-kfbjw"
       );
-      if (tempLayerIds.length === this.visibleLayerIds.length) {
+      if (tempLayerIds.length === 1) {
         const layerConfig = this.$refs.configLayer.getLayerConfigById(
-          this.visibleLayerId,
+          this.visibleLayerId
         );
         // 带上图层显示参数，只拾取显示的图斑
-        let where = '1=1';
+        let where = "1=1";
         try {
           where = layerConfig.params.layerDefs[0];
           if (!where) {
-            where = '1=1';
+            where = "1=1";
           }
         } catch (e) {
           // 获取图层 参数
@@ -1498,64 +1487,68 @@ export default {
         const [x, y] = e.coordinate;
         const param = {
           where,
-          f: 'json',
+          f: "json",
           inSR: getSrid(this.map),
           outFields: TABLE_COMP_MAPPING[this.visibleLayerId]
-            ? TABLE_COMP_MAPPING[this.visibleLayerId]['outFields']
-            : '',
-          returnGeometry: 'true',
+            ? TABLE_COMP_MAPPING[this.visibleLayerId]["outFields"]
+            : "",
+          returnGeometry: "true",
           geometry: JSON.stringify({ x, y }),
-          geometryType: 'esriGeometryPoint',
+          geometryType: "esriGeometryPoint",
         };
+        const pointWkt = `POINT(${y} ${x})`
         if (layerConfig.serverType === 'wms') {
-          const pointWkt = `POINT(${y} ${x})`
-          await GeoServerQuery(`${layerConfig.queryUrl}`, {
+          return GeoServerQuery(`${layerConfig.queryUrl}`, {
             typeName: layerConfig.params.layers,
             cql_filter: `INTERSECTS(shape, ${pointWkt})`
           }, true).then(({ features: [feature] }) => {
-              if (feature) {
-                this.locationFeature(null, this.visibleLayerId, { feature });
-              } else {
-                this.feature = undefined;
-              }
-          })
-        } else { 
-          arcgisQuery(
-            `${layerConfig.url}/${this.layerIndex}/query`,
-            param,
-            true,
-          ).then(({ features: [feature] }) => {
             if (feature) {
               this.locationFeature(null, this.visibleLayerId, { feature });
             } else {
               this.feature = undefined;
             }
-          });
+          })
         }
+        arcgisQuery(
+          `${layerConfig.url}/${this.layerIndex}/query`,
+          param,
+          true
+        ).then(({ features: [feature] }) => {
+          if (feature) {
+            this.locationFeature(null, this.visibleLayerId, { feature });
+          } else {
+            this.feature = undefined;
+          }
+        });
       } else if (tempLayerIds.length > 1) {
         // 带上图层显示参数，只拾取显示的图斑
-        const where = '1=1';
+        const where = "1=1";
         const [x, y] = e.coordinate;
         const param = {
           where,
-          f: 'json',
+          f: "json",
           inSR: getSrid(this.map),
-          outFields: '',
-          returnGeometry: 'true',
+          outFields: "",
+          returnGeometry: "true",
           geometry: JSON.stringify({ x, y }),
-          geometryType: 'esriGeometryPoint',
+          geometryType: "esriGeometryPoint",
         };
+        const pointWkt = `POINT(${y} ${x})`
         const urls = tempLayerIds.map((i) => this.getLayerConfigById(i));
 
-        const promiseArr = urls.map((i) => {
-          param.outFields = TABLE_COMP_MAPPING[i.id]
-            ? TABLE_COMP_MAPPING[i.id]['outFields']
-            : '';
-          return arcgisQuery(`${i.url}/${this.layerIndex}/query`, param, true);
-        });
+        console.log("1109行----------------------------------")
+        const promiseArr = urls.map(i => {
+          if (i.serverType === 'wms') {
+            return GeoServerQuery(`${i.queryUrl}`, {
+              typeName: i.params.layers,
+              cql_filter: `INTERSECTS(shape, ${pointWkt})`
+            }, true)
+          }
+          return arcgisQuery(`${i}/0/query`, param, true)
+        })
 
         const feature = await Promise.all(promiseArr).then((resp) => {
-          if (this.visibleLayerIds.includes('bj-gyyd-new')) {
+          if (this.visibleLayerIds.includes("bj-gyyd-new")) {
             for (let i = 0; i < resp.length; i++) {
               if (resp[i].features.length != 0) {
                 this.isgyyd = resp[i].displayFieldName;

WEB-VIEW2/src/views/components/SwitchLayer/index.vue

@@ -11,14 +11,25 @@
       <img src="@/assets/images/map/layer.png" style="width: 18px;height: 18px;margin-top: 10px;">
     </span>
     <DropdownMenu slot="list">
-        <RadioGroup v-model="layers" @on-change="changeLayer">
+        <CheckboxGroup v-model="layers" @on-change="changeLayer">
+          <p class="groupTitle">临时用地</p>
           <DropdownItem>
-            <Radio label="bj-lsyd">临时用地</Radio>
+            <Checkbox label="bj-lsyd">临时用地</Checkbox>
           </DropdownItem>
+          <p class="groupTitle">供地</p>
           <DropdownItem>
-            <Radio label="bjq-gd">供地</Radio>
+            <Checkbox label="syyd">商业用地</Checkbox>
           </DropdownItem>
-        </RadioGroup>
+          <DropdownItem>
+            <Checkbox label="bj-gyyd-new">工业用地</Checkbox>
+          </DropdownItem>
+          <DropdownItem>
+            <Checkbox label="bj-zzyd-new">住宅用地</Checkbox>
+          </DropdownItem>
+          <DropdownItem>
+            <Checkbox label="bj-jyyd">教育用地</Checkbox>
+          </DropdownItem>
+        </CheckboxGroup>
     </DropdownMenu>
   </Dropdown>
 </template>
@@ -32,7 +43,10 @@ import { Vector as VectorSource } from 'ol/source'
 
 const _idsState = {
   'bj-lsyd': true,
-  'bjq-gd': false
+  'syyd': false,
+  'bj-gyyd-new': false,
+  'bj-zzyd-new': false,
+  'bj-jyyd': false
 }
 export default {
   name: 'SwitchLayer',
@@ -41,14 +55,10 @@ export default {
     return {
       drawInteraction: undefined,
       vectorSource: new VectorSource(),
-      /**
-       * Currently drawn feature.
-       * @type {import("../src/ol/Feature.js").default}
-       */
       sketch: undefined,
       helpTooltip: undefined,
       measureTooltip: undefined,
-      layers: 'bj-lsyd',
+      layers: ['bj-lsyd'],
       continuePolygonMsg: '单击以继续绘制多边形；双击结束绘制',
       continueLineMsg: '单击以继续绘制线条；双击结束绘制'
     }
@@ -62,12 +72,26 @@ export default {
     }
   },
   methods: {
-    changeLayer (id) {
-      _idsState['bj-lsyd'] = false;
-      _idsState['bjq-gd'] = false;
-      if (id in _idsState) {
-        _idsState[id]=true
+    changeLayer (ids) {
+      const keys = Object.keys(_idsState);
+      for (let i = 0; i < keys.length; i++) {
+        _idsState[keys[i]] = false;
       }
+      if (ids.length === 0) {
+        this.$emit("change", _idsState)
+        return;
+      }
+      const index = ids.indexOf('bj-lsyd')
+      if (index === ids.length - 1) {
+        this.layers = ['bj-lsyd']
+      } else {
+        if (index !== -1) {
+          this.layers.splice(index, 1);
+        }
+      }
+      this.layers.forEach((id) => {
+        _idsState[id] = true;
+      });
       this.$emit("change", _idsState)
     },
   }
@@ -91,7 +115,7 @@ export default {
   &::v-deep {
     .ivu-select-dropdown {
       left: 0;
-
+      width: auto !important;
       .ivu-dropdown-menu {
         .ivu-dropdown-item {
           display: flex;
@@ -105,6 +129,11 @@ export default {
           }
         }
       }
+      .groupTitle {
+        font-size: 15px;
+        color: #aaa;
+        padding-left: 16px;
+      }
     }
   }
 }
@@ -144,7 +173,6 @@ $bgc: rgba(15, 71, 144, 0.8);
     border-top-color: lighten($bgc, 0.2);
   }
 }
-
 .ol-tooltip-measure:before,
 .ol-tooltip-static:before {
   border-top: 6px solid $bgc;

WEB-VIEW2/src/webViewMap.vue

@@ -58,7 +58,7 @@ export default {
       areaType: 'city',
       oldGzData: [],
       mapTitle: '供地总面积',
-      visibleLayerIds: ['bj-lsyd', 'bjq-gd'],
+      visibleLayerIds: ['bj-lsyd', 'syyd', 'bj-gyyd-new', 'bj-zzyd-new', 'bj-jyyd'],
       mapImgLayers: [],
       xzqdmArr: [],
       year: 2021,
@@ -68,13 +68,13 @@ export default {
   },
   methods: {
     async mapClickHandle (payload1, key) {
-      this.$emit('mapClick', payload1);
+      this.$emit('mapClick', payload1, key);
       if (key == 'bj-dkgl') {
         this.$vm.$emit('setGdDetailType', 24);
       } else if (key == 'bj-kgdk') {
         this.$vm.$emit('setGdDetailType', 101);
       }
-      this.$vm.$emit('getGdDetailData', payload1);
+      this.$vm.$emit('getGdDetailData', payload1, key);
     },
     showLayer (layerId) {
       this.$vm.$emit('setVisibleLayerIdEvent', layerId);

WEB-VIEW2/src/webview.js

@@ -0,0 +1,29 @@
+const urlMaps = {
+  'bj-lsyd': {
+    key: 'xh',
+    query: '/api/ybz-bj/lsydList',
+    detail: '/api/ybz-bj/lsydOne'
+  },
+  'syyd': {
+    key: '新增调查地',
+    query: '/api/ybz-bj/syydList',
+    detail: '/api/ybz-bj/syydOne'
+  },
+  'bj-gyyd-new': {
+    key: 'dksyh',
+    query: '/api/ybz-bj/gyydList',
+    detail: '/api/ybz-bj/gyydOne'
+  },
+  'bj-zzyd-new': {
+    key: 'id',
+    query: '/api/ybz-bj/zzydList',
+    detail: '/api/ybz-bj/zzydOne'
+  },
+  'bj-jyyd': {
+    key: 'id',
+    query: '/api/ybz-bj/jyydList',
+    detail: '/api/ybz-bj/zzydOne'
+  }
+}
+
+export default urlMaps;

WEB-VIEW2/src/webview.vue

@@ -9,7 +9,7 @@
             placeholder-class="address"
             class="input"
             type="text"
-            :placeholder="`请输入${mapType === 'bj-lsyd'?'项目':'地块'}名称`"
+            :placeholder="`请输入${mapTypeObj['bj-lsyd']?'项目':'地块'}名称`"
           />
         </div>
         <div class="searchBtn" @click="queryClick()">
@@ -28,10 +28,10 @@
                 <div class="x1">{{ index + 1 }}</div>
               </div>
               <div class="citys">
-                <div class="x1">{{ mapType === 'bj-lsyd' ? item['xmmc'] : item['dkmc'] }}</div>
+                <div class="x1">{{ mapTypeObj['bj-lsyd'] ? item['xmmc'] : item['dkmc'] }}</div>
               </div>
             </div>
-            <div class="cardBoxContent" v-if="mapType === 'bj-lsyd'">
+            <div class="cardBoxContent" v-if="mapTypeObj['bj-lsyd']">
               <div class="x1">审批面积：{{ ((item.spmj || 0) * 0.0015).toFixed(2) }} 亩</div>
               <div class="x1">联系人：{{ item.lxr }}</div>
               <div class="x1">建设单位：{{ item.jsdw }}</div>
@@ -42,7 +42,7 @@
               <div class="x1">批准文号{{ item.pzwh }}</div>
             </div>
           </div>
-          <div class="mapPos" @click="cardBoxClick(item,index)">
+          <div class="mapPos" @click="locationHandler(item,index)">
             <div>
               <img src="./assets/images/location.png" alt="" />
             </div>
@@ -57,15 +57,16 @@
 import WebViewMap from './webViewMap';
 import wx from 'weixin-js-sdk';
 import SlideCard from './SlideCard';
+import urlMaps from './webview';
 
 let _that = null;
+let _resultMap = {}
 export default {
   name: 'Login',
   components: { WebViewMap, SlideCard },
   data() {
     return {
       citys: {},
-      userInfo: {},
       id: 0, // 使用 marker点击事件 需要填写id
       title: 'map',
       listData: [],
@@ -74,33 +75,59 @@ export default {
       isRequest: true, //是否请求 是 true，否 false
       detailData: {},
       mapObj: null,
-      mapType: 'bj-lsyd', //默认是临时用地
+      mapTypeObj: { //默认是临时用地
+        'bj-lsyd': true,
+        'syyd': false,
+        'bj-gyyd-new': false,
+        'bj-zzyd-new': false,
+        'bj-jyyd': false
+      },
       currentIndex: -1,
       xmmc: ''
     };
   },
   created() {
     _that = this;
-    setInterval(() => {
-      if (_that.$route.query.city) return;
-      _that.citys = JSON.parse(_that.$route.query.city);
-      _that.$vm.$emit('addPoint', _that.citys);
-    }, 3000);
-    // this.userInfo = JSON.parse(this.$route.query.objs);
     this.$vm.$on('switchLayerEvent', (payload) => {
       this.xmmc = ''
+      this.mapTypeObj = payload;
       this.$vm.$emit('initCenterAndZoom')
-      this.mapType = payload;
-      this.queryListByPage();
+      this.queryStateMachine()
     });
   },
 
   methods: {
-    mapClickHandle (payload) {
-      this.toDetailInfo(payload[_that.mapType === 'bj-lsyd' ? 'xh' : 'id'], 'map')
+    async queryStateMachine () {
+      this.listData = []
+      if (this.mapTypeObj['bj-lsyd']) {
+        _resultMap = {}
+      }
+      if (!this.mapTypeObj['bj-lsyd'] && _resultMap['bj-lsyd']) { 
+        delete _resultMap['bj-lsyd']
+      }
+      const keys = Object.keys(this.mapTypeObj);
+      for (let i = 0; i < keys.length; i++) { 
+        const key = keys[i];
+        const val = this.mapTypeObj[key];
+        if (!val && _resultMap[key]) {
+          delete _resultMap[key]
+        }
+        if (val && !_resultMap[key]) {
+          _resultMap[key] = await this.queryListByPage(urlMaps[key]['query'], key)
+          if (key === 'bj-lsyd') {
+            break;
+          }
+        }
+      }
+      const keys1 = Object.keys(_resultMap);
+      keys1.forEach(key => {
+        this.listData.push(..._resultMap[key]);
+      })
     },
-    toDetailInfo (idStr, source) {
-      const urlApi = _that.mapType === 'bj-lsyd' ? '/api/ybz-bj/lsydOne' : '/api/ybz-bj/zzydOne';
+    mapClickHandle (payload, key) {
+      this.toDetailInfo(urlMaps[key]['detail'], payload[urlMaps[key]['key']], 'map')
+    },
+    toDetailInfo(urlApi, idStr, source) {
       const params = {
         id: idStr
       };
@@ -110,38 +137,41 @@ export default {
         }
       });
     },
-    toDetailHandle (item, source='list') {
+    toDetailHandle (item, source = 'list') {
       wx.miniProgram.navigateTo({
-        url: `/pages/receivedDetail2/index?obj=${JSON.stringify(item)}&source=${source}&type=${_that.mapType}`,
+        url: `/pages/receivedDetail2/index?obj=${JSON.stringify(item)}&source=${source}&type=${_that.mapTypeObj['bj-lsyd'] ? 'bj-lsyd' : 'other'}`,
       });
     },
-    cardBoxClick(item, index) {
+    locationHandler (item, index) {
       this.currentIndex = index;
-      const where = `id = '${item['id']}'`
+      console.log(item)
+      const where = item['mapType'] === 'bj-gyyd-new' ? `dksyh = '${item['dksyh']}'` : `id = '${item['id']}'`
       this.$vm.$emit('location-feature-where', {
-        layerId: _that.mapType,
+        layerId: item['mapType'],
         where: where,
         setting: { outFields: 'dksyh,dkbh,dkwz,gddw,dkmj' },
         isFit: true,
       });
     },
-    queryClick() {
-      this.queryListByPage();
+    queryClick () {
+      _resultMap = {}
+      this.queryStateMachine()
     },
-    queryListByPage () {
-      const urlApi = this.mapType === 'bj-lsyd' ? `/api/ybz-bj/lsydList` : '/api/ybz-bj/zzydList';
+    async queryListByPage (urlApi, key) {
       let params = {
         pageIndex: 1,
         pageSize: -1,
         name: this.xmmc
       };
-      this.listData = []
-      this.$ajax.get(urlApi, params, this, false).then((result) => {
-        const resultData = result.data;
-        if (resultData) {
-          this.listData = resultData['list']
-        }
-      });
+      const result = await this.$ajax.get(urlApi, params, this, false);
+      const resultData = result.data;
+      if (resultData) {
+        return resultData['list'].map((item) => { 
+          item['mapType'] = key;
+          return item;
+        })
+      }
+      return []
     },
   },
 };