geoserver瓦片

src/store/modules/app.ts

@@ -6,6 +6,7 @@ const state = {
 		BaseMap1Api: 'BaseMap1-api',	// 地图底图代理1 http://59.255.48.160:81
 		BaseMap2Api: 'BaseMap2-api',	// 地图底图代理2 http://59.212.37.22
 		BaseMap3Api: 'BaseMap3-api',	// 地图底图代理3 http://59.212.146.170
+		geoserverApi: 'geoserver-api',	// 地图服务代理
 	},
 	userInfo: <any>{},
 }

src/store/modules/gis.ts

@@ -9,6 +9,8 @@ import JqStyle from "@/views/gis/map-info/style/jq";
 import LgStyle from "@/views/gis/map-info/style/lg";
 import CzwStyle from "@/views/gis/map-info/style/czw";
 import HczStyle from "@/views/gis/map-info/style/hcz";
+import store from "@/store";
+import axios from "axios";
 
 const state = {
   menuRootName: '9cd5fbf9-35fd-4fb2-8c24-1f871afd67be',
@@ -30,6 +32,53 @@ const state = {
       info: {}
     }
   },
+  element: {
+    list: <any>[
+      // {
+      //   label: '处置力量',
+      //   active: false,
+      //   children: [
+      //     {label: '海岸警察', value: 'hajc', active: false},
+      //     {label: '缉私警', value: 'jsj', active: false},
+      //     {label: '网格员', value: 'wgy', active: false},
+      //   ]
+      // },
+      // {
+      //   label: '危险车辆', value: 'wxcl', active: true
+      // },
+      {
+        label: '设备资源',
+        active: true,
+        children: [
+          {label: '公安类设备', value: 'galsb', geoValue: 'gal', active: true},
+          {label: '社会类设备', value: 'shlsb', geoValue: 'shl', active: true},
+          {label: '民用类设备', value: 'mylsb', geoValue: 'myl', active: true},
+        ]
+      },
+      {
+        label: '企业',
+        active: true,
+        children: [
+          {label: '零关税自用进口生产设备', value: 'lgszyjkscsb', geoValue: 'lgszyjkscsb', active: true},
+          {label: '加工增值免关税', value: 'jgzzmgs', geoValue: 'jgzzmgs', active: true},
+          {label: '零关税进口原辅料', value: 'lgsjkyfl', geoValue: 'lgsjkfzl', active: true},
+        ]
+      },
+      // {
+      //   label: '景区', value: 'jq', active: false
+      // },
+      // {
+      //   label: '旅馆', value: 'lg', active: false
+      // },
+      // {
+      //   label: '出租屋', value: 'czw', active: false
+      // },
+      // {
+      //   label: '火车站', value: 'hcz', active: false
+      // },
+    ],
+    layer: null,
+  }
 }
 
 const getters = {
@@ -249,6 +298,73 @@ const mutations = {
       state.gisParams.default.overlay.setPosition(undefined)
     }
   },
+  SET_GIS_ELEMENT(state) {
+    const arr = []
+    state.element.list.forEach(p => {
+      if (p.children?.length > 0) {
+        p.children.forEach(s => {
+          if (s.active) {
+            arr.push(`'${s.geoValue}'`)
+          }
+        })
+      } else {
+        if (p.active) {
+          arr.push(`'${p.geoValue}'`)
+        }
+      }
+    })
+    const cql = `typeValue in (${arr.length > 0 ? arr.join(',') : -1})`
+    const tileWMS = new source.TileWMS({
+      url: `/${store.state.app.apiProxy.geoserverApi}/geoserver/mysqlGeo/wms`,
+      params: {
+        'FORMAT': 'image/png8',
+        'VERSION': '1.1.1',
+        "exceptions": 'application/vnd.ogc.se_inimage',
+        refresh: new Date().getTime(),
+        LAYERS: 'mysqlGeo:socialManagementEement',
+        CQL_FILTER: cql
+      }
+    })
+    if (!state.element.layer) {
+      state.element.layer = new layer.Tile({
+        source: tileWMS,
+        zIndex: 2,
+      })
+      state.map.addLayer(state.element.layer)
+      state.map.on('singleclick', e => {
+        if (state.element.list.some(v => v.active)) {
+          let isFeature = false
+          e.map.forEachFeatureAtPixel(e.pixel, (feature) => {
+            console.log(feature)
+            isFeature = true
+          }, {
+            hitTolerance: 0,
+          });
+          axios.get(`/${store.state.app.apiProxy.geoserverApi}/geoserver/rest/layers`)
+          if (!isFeature) {
+            const viewResolution = e.map.getView().getResolution()
+            const url = state.element.layer.getSource().getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:4326', {
+              'INFO_FORMAT': 'application/json',
+              'FEATURE_COUNT': 10000
+            })
+            if (url) {
+              axios.get(url).then(res => {
+                if (res.status === 200) {
+                  console.log(res.data.features.length)
+                  const item = res.data?.features?.[res.data?.features?.length - 1]
+                  console.log(item)
+                  if (item) {
+                  }
+                }
+              })
+            }
+          }
+        }
+      })
+    } else {
+      state.element.layer.setSource(tileWMS)
+    }
+  }
 }
 
 const actions = {

src/views/gis/layout/index.vue

@@ -12,7 +12,7 @@
         </div>
       </template>
     </div>
-    <div class="gis-tools">
+    <div class="gis-tools" v-if="map">
       <div class="gt-search __box-shadow">
         <el-autocomplete
             ref="ref_search"
@@ -253,9 +253,9 @@ export default defineComponent({
       showVideo: false
     })
     const ToolsMapper = [
-      {label: '图层', value: 'element', com: ElementCom, disabled: true},
-      {label: '框选', value: 'select', com: SelectCom, disabled: true},
-      {label: '周边分析', value: 'analysis', com: AnalysisCom, disabled: true},
+      {label: '图层', value: 'element', com: ElementCom, disabled: false},
+      {label: '框选', value: 'select', com: SelectCom, disabled: false},
+      {label: '周边分析', value: 'analysis', com: AnalysisCom, disabled: false},
       {label: '工具', value: 'tool', com: ToolCom},
       {label: '定位', value: 'position', com: PositionCom},
       {label: '清空标绘', value: 'clear', com: undefined},
@@ -271,55 +271,56 @@ export default defineComponent({
         defaultDom: ref_gisDefault.value
       })
       state.mapFunc = func
-      state.map.on('singleclick', e => {
-        let flag = false
-        map.forEachFeatureAtPixel(e.pixel, (f) => {
-          if (!flag && f.get('featureType')) {
-            flag = true
-            if (f.get('featureType') === 'qy') {  //  企业
-              //  恢复上一个要素的样式
-              if (f.getId() !== state.qyParams.tempFeature?.getId()) {
-                onCloseQy()
-                if (f.get('isAnalysis')) {
-                  f.setStyle(f.get('analysisActiveStyle'))
-                } else {
-                  f.setStyle(f.get('activeStyle'))
-                }
-                state.qyParams.qyInfo = JSON.parse(JSON.stringify(f.get('info')))
-                store.dispatch('gis/LOAD_ACTIVE_QY_ID', f.getId())
-                //  备份新的要素
-                state.qyParams.tempFeature = f
-                state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
-              } else {
-                if (state.qyParams.overlay.getPosition() === undefined) {
-                  state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
-                } else {
-                  state.qyParams.overlay.setPosition(undefined)
-                }
-              }
-            } else if (f.get('featureType') === 'sb') { //  设备
-              //  恢复上一个要素的样式
-              if (f.getId() !== state.qyParams.tempSbFeature?.getId()) {
-                state.qyParams.tempSbFeature?.get('resetStyle')?.()
-                //  新的要素
-                if (f.get('isAnalysis')) {
-                  f.setStyle(f.get('analysisActiveStyle'))
-                } else {
-                  f.setStyle(f.get('activeStyle'))
-                }
-                state.qyParams.sbInfo = JSON.parse(JSON.stringify(f.get('info')))
-                state.qyParams.sbOverlay.setPosition(f.getGeometry().getCoordinates())
-                //  备份新的要素
-                state.qyParams.tempSbFeature = f
-              }
-              state.qyParams.overlay.setPosition(undefined)
-            }
-          }
-        }, {
-          hitTolerance: 0,
-        });
-      })
-      initQYLayer()
+      store.commit('gis/SET_GIS_ELEMENT')
+      // state.map.on('singleclick', e => {
+      //   let flag = false
+      //   map.forEachFeatureAtPixel(e.pixel, (f) => {
+      //     if (!flag && f.get('featureType')) {
+      //       flag = true
+      //       if (f.get('featureType') === 'qy') {  //  企业
+      //         //  恢复上一个要素的样式
+      //         if (f.getId() !== state.qyParams.tempFeature?.getId()) {
+      //           onCloseQy()
+      //           if (f.get('isAnalysis')) {
+      //             f.setStyle(f.get('analysisActiveStyle'))
+      //           } else {
+      //             f.setStyle(f.get('activeStyle'))
+      //           }
+      //           state.qyParams.qyInfo = JSON.parse(JSON.stringify(f.get('info')))
+      //           store.dispatch('gis/LOAD_ACTIVE_QY_ID', f.getId())
+      //           //  备份新的要素
+      //           state.qyParams.tempFeature = f
+      //           state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
+      //         } else {
+      //           if (state.qyParams.overlay.getPosition() === undefined) {
+      //             state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
+      //           } else {
+      //             state.qyParams.overlay.setPosition(undefined)
+      //           }
+      //         }
+      //       } else if (f.get('featureType') === 'sb') { //  设备
+      //         //  恢复上一个要素的样式
+      //         if (f.getId() !== state.qyParams.tempSbFeature?.getId()) {
+      //           state.qyParams.tempSbFeature?.get('resetStyle')?.()
+      //           //  新的要素
+      //           if (f.get('isAnalysis')) {
+      //             f.setStyle(f.get('analysisActiveStyle'))
+      //           } else {
+      //             f.setStyle(f.get('activeStyle'))
+      //           }
+      //           state.qyParams.sbInfo = JSON.parse(JSON.stringify(f.get('info')))
+      //           state.qyParams.sbOverlay.setPosition(f.getGeometry().getCoordinates())
+      //           //  备份新的要素
+      //           state.qyParams.tempSbFeature = f
+      //         }
+      //         state.qyParams.overlay.setPosition(undefined)
+      //       }
+      //     }
+      //   }, {
+      //     hitTolerance: 0,
+      //   });
+      // })
+      // initQYLayer()
     }
     const menuCpt = computed(() => {
       return router.options.routes.filter(v => v.name === store.state.gis.menuRootName)[0].children?.filter(v => !v.meta.noMenu)

src/views/gis/layout/tools/element.vue

@@ -38,6 +38,8 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
+import * as layer from "ol/layer";
+import * as source from "ol/source";
 
 export default defineComponent({
   name: '',
@@ -59,50 +61,7 @@ export default defineComponent({
     const state = reactive({
       transfer: <any>props.transfer,
       cusTransfer: <any>{
-        list: <any>[
-          {
-            label: '处置力量',
-            active: false,
-            children: [
-              {label: '海岸警察', value: 'hajc', active: false},
-              {label: '缉私警', value: 'jsj', active: false},
-              {label: '网格员', value: 'wgy', active: false},
-            ]
-          },
-          {
-            label: '危险车辆', value: 'wxcl', active: true
-          },
-          {
-            label: '设备资源',
-            active: true,
-            children: [
-              {label: '公安类设备', value: 'galsb', active: true},
-              {label: '社会类设备', value: 'shlsb', active: true},
-              {label: '民用类设备', value: 'mylsb', active: true},
-            ]
-          },
-          {
-            label: '企业',
-            active: false,
-            children: [
-              {label: '零关税自用进口生产设备', value: 'lgszyjkscsb', active: false},
-              {label: '加工增值免关税', value: 'jgzzmgs', active: false},
-              {label: '零关税进口原辅料', value: 'lgsjkyfl', active: false},
-            ]
-          },
-          {
-            label: '景区', value: 'jq', active: false
-          },
-          {
-            label: '旅馆', value: 'lg', active: false
-          },
-          {
-            label: '出租屋', value: 'czw', active: false
-          },
-          {
-            label: '火车站', value: 'hcz', active: false
-          },
-        ]
+        list: store.state.gis.element.list
       }
     })
     const isSelectAllCpt = computed(() => {
@@ -126,6 +85,7 @@ export default defineComponent({
           s.active = flag
         })
       })
+      store.commit('gis/SET_GIS_ELEMENT')
       emit('update:transfer', state.cusTransfer)
     }
     const switchItemActive = (item) => {
@@ -143,6 +103,7 @@ export default defineComponent({
           }
         })
       })
+      store.commit('gis/SET_GIS_ELEMENT')
       emit('update:transfer', state.cusTransfer)
     }
     onMounted(() => {

vite.config.ts

@@ -76,6 +76,13 @@ export default defineConfig({
           return path.replace(/^\/business-api/, '')
         }
       },
+      '/geoserver-api/': {
+        target: 'http://8.141.90.117:18092/',
+        changeOrigin: true,
+        rewrite: path => {
+          return path.replace(/^\/geoserver-api/, '')
+        }
+      },
     }
   },
   build: {