企业

src/components/easyMap/initMapInfo.ts

@@ -1,7 +1,13 @@
 import * as layer from 'ol/layer'
 import * as source from 'ol/source'
 // @ts-ignore
-import HaituImg from './images/bg-ocean.png'
+import LTImg from './images/bg-lt.png'
+// @ts-ignore
+import HTImg from './images/bg-ht.png'
+// @ts-ignore
+import WXTImg from './images/bg-wxt.png'
+// @ts-ignore
+import HYSImg from './images/bg-hys.png'
 import store from '@/store/index'
 
 const isInternet = true
@@ -67,7 +73,7 @@ const baseMapLayers = [
     maxZoom: 18,
     minZoom: 1,
     visible: true,
-    img: HaituImg,
+    img: LTImg,
     layersUrl: [
       {
         url: `/${store.state.app.apiProxy.BaseMap1Api}/vec_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=vec&style=default&opacity=1&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}`,
@@ -88,7 +94,7 @@ const baseMapLayers = [
     maxZoom: 18,
     minZoom: 1,
     visible: false,
-    img: HaituImg,
+    img: HTImg,
     layersUrl: [
       {
         url: `/${store.state.app.apiProxy.BaseMap1Api}/ter_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=ter&style=default&tilematrix={z}&tilerow={y}&tilecol={x}`,
@@ -111,7 +117,7 @@ const baseMapLayers = [
     maxZoom: 18,
     minZoom: 1,
     visible: false,
-    img: HaituImg,
+    img: WXTImg,
     layersUrl: [
       {
         url: `/${store.state.app.apiProxy.BaseMap1Api}/img_c/wmts?tk=%E6%82%A8%E7%9A%84%E5%AF%86%E9%92%A5&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=img&style=default&opacity=0.6&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}`,
@@ -132,7 +138,7 @@ const baseMapLayers = [
     maxZoom: 18,
     minZoom: 1,
     visible: false,
-    img: HaituImg,
+    img: HYSImg,
     layersUrl: [
       {
         url: `/${store.state.app.apiProxy.BaseMap2Api}/mapserver/vmap/hn_bigdata_2018dt/getMAP?x={x}&y={y}&l={z}&styleId=hn_bigdata_2018dtys2&ratio=1&tilesize=256&clientVersion=jssdk_bate@%20leaflet%202.1.5`,

src/store/modules/gis.ts

@@ -1,5 +1,7 @@
 const state = {
-  menuRootName: '9cd5fbf9-35fd-4fb2-8c24-1f871afd67be'
+  menuRootName: '9cd5fbf9-35fd-4fb2-8c24-1f871afd67be',
+  gisLayer: null,
+  gisSource: null
 }
 
 const getters = {
@@ -9,6 +11,9 @@ const mutations = {
 }
 
 const actions = {
+  LOAD_GIS_QY({ commit }: any, type: any) {
+
+  },
 }
 
 export default {

src/views/gis/layout/index.vue

@@ -50,6 +50,9 @@
     <div class="gis-content">
       <RouterViewCom/>
     </div>
+    <div ref="ref_qyDom" class="qy-info">
+      {{qyParams.qyInfo.name}}
+    </div>
   </div>
 </template>
 
@@ -80,6 +83,12 @@ import BaseCom from './tools/base.vue'
 import ExampleCom from './tools/example.vue'
 import * as source from "ol/source";
 import * as layer from "ol/layer";
+import * as style from "ol/style";
+import * as format from "ol/format";
+import QyStyle from '../map-info/style/qy'
+import CommonStyle from '../map-info/style/common'
+import * as ol from "ol";
+import { v4 } from "uuid";
 
 
 export default defineComponent({
@@ -109,6 +118,13 @@ export default defineComponent({
       toolsParams: {
         element: null,
         position: null
+      },
+      qyParams: {
+        layer: <any>null,
+        source: <any>null,
+        tempFeature: <any>null,
+        overlay: <any>null,
+        qyInfo: {}
       }
     })
     const ToolsMapper = [
@@ -125,7 +141,35 @@ export default defineComponent({
     const mapLoad = (map, func) => {
       state.map = map
       state.mapFunc = func
-      // initWMSElement()
+      state.map.on('singleclick', e => {
+        let flag = false
+        map.forEachFeatureAtPixel(e.pixel, (f) => {
+          if (!flag) {
+            flag = true
+            //  恢复上一个要素的样式
+            if (state.qyParams.tempFeature) {
+              if (state.qyParams.tempFeature.get('isAnalysis')) {
+                state.qyParams.tempFeature.setStyle(state.qyParams.tempFeature.get('analysisStyle'))
+              } else {
+                state.qyParams.tempFeature.setStyle(state.qyParams.tempFeature.get('defaultStyle'))
+              }
+            }
+            //  新的要素
+            if (f.get('isAnalysis')) {
+              f.setStyle(f.get('analysisActiveStyle'))
+            } else {
+              f.setStyle(f.get('activeStyle'))
+            }
+            state.qyParams.qyInfo = f.get('info')
+            state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
+            //  备份新的要素
+            state.qyParams.tempFeature = f
+          }
+        }, {
+          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)
@@ -140,27 +184,6 @@ export default defineComponent({
           {name: 123},
           {name: 123},
         ]
-        // if (state.showBayonet) {
-        //   state.searchAllList.bayonet.forEach(v => {
-        //     if (v.name?.includes(queryString)) {
-        //       arr.push(v)
-        //     }
-        //   })
-        // }
-        // if (state.showVideo) {
-        //   state.searchAllList.video.forEach(v => {
-        //     if (v.name?.includes(queryString)) {
-        //       arr.push(v)
-        //     }
-        //   })
-        // }
-        // if (state.showElement) {
-        //   state.searchAllList.element.forEach(v => {
-        //     if (v.name?.includes(queryString)) {
-        //       arr.push(v)
-        //     }
-        //   })
-        // }
         cb(arr)
       } else {
         cb([])
@@ -187,34 +210,56 @@ export default defineComponent({
         state.toolsType = (state.toolsType === item.value ? '' : item.value)
       }
     }
-
-    const initWMSElement = () => {
-      const _tileWMS = new source.TileWMS({
-        url: `http://192.168.31.19:7074/queryTile`,
-        params: {
-          'FORMAT': 'image/png8',
-          'VERSION': '1.1.1',
-          "exceptions": 'application/vnd.ogc.se_inimage',
-          'CQL_FILTER': "(mergeTarget in ('110'))",
-          layers: 'geo_fk_ship',
-          refresh: new Date().getTime()
+    const ref_qyDom = ref()
+    const initQYLayer = () => {
+      const arr: any = []
+      for (let i = 0; i < 105; i++) {
+        const obj = {
+          name: '企业企业企业企业企业_' + i,
+          wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`,
+        }
+        if (i % 2 === 0) {
+          obj.type = 'lgszyjkscsb'
+        } else if (i % 2 === 1) {
+          obj.type = 'jgzzmgs'
+        } else if (i % 2 === 2) {
+          obj.type = 'lgsjkyfl'
         }
+        arr.push(obj)
+      }
+      const features = arr.map(v => {
+        const feat: any = new format.WKT().readFeature(v.wkt)
+        feat.set('defaultStyle', QyStyle.qyStyle(v.type))
+        feat.set('activeStyle', [...CommonStyle.activeStyle(), ...QyStyle.qyStyle(v.type)])
+        feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(v.type)])
+        feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(v.type)])
+        feat.set('isAnalysis', false)
+        feat.set('info', v)
+        feat.setStyle(feat.get('defaultStyle'))
+        return feat
       })
-      const elementLayer = new layer.Tile({
-        source: _tileWMS,
-        zIndex: 2,
-        homeLayer: 'WMSElement'
+      state.qyParams.source = new source.Vector({
+        features: features,
+        wrapX: false
       })
-      state.map.addLayer(elementLayer)
-      state.map.on('singleclick', e => {
-        console.log(e)
-        const viewResolution = e.map.getView().getResolution()
-        const url = e.map.getLayers().getArray().filter(v => v.get('homeLayer') === 'WMSElement')[0]?.getSource().getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:4326', {
-          INFO_FORMAT: 'application/json'
-        })
-        console.log(url)
+      state.qyParams.layer = new layer.VectorImage({
+        source: state.qyParams.source,
+        zIndex: 10
       })
-
+      state.map.addLayer(state.qyParams.layer)
+      //  详情
+      state.qyParams.overlay = new ol.Overlay({
+        id: v4(),
+        element: ref_qyDom.value,
+        autoPan: false,
+        offset: [0, -60],
+        positioning: 'bottom-center',
+        stopEvent: true,
+        autoPanAnimation: {
+          duration: 250
+        }
+      })
+      state.map.addOverlay(state.qyParams.overlay)
     }
     onMounted(() => {
       // state.toolsCom = AnalysisCom
@@ -229,6 +274,7 @@ export default defineComponent({
       searchHandleMapSearch,
       searchToMapLocation,
       toolsHandleClick,
+      ref_qyDom,
     }
   },
 })
@@ -410,5 +456,23 @@ export default defineComponent({
   .gis-content {
     z-index: 4;
   }
+  .qy-info {
+    $bgColor: #2860CE;
+    width: 315px;
+    height: 158px;
+    background-color: $bgColor;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      border-top: 10px solid $bgColor;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+    }
+  }
 }
 </style>

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

@@ -37,7 +37,7 @@ import iconWXCL from '@/assets/images/gis-layout/gis-layout-tools_example-wxcl.p
 import iconGALSB from '@/assets/images/gis-layout/gis-layout-tools_example-galsb.png'
 import iconSHLSB from '@/assets/images/gis-layout/gis-layout-tools_example-shlsb.png'
 import iconMYLSB from '@/assets/images/gis-layout/gis-layout-tools_example-mylsb.png'
-import iconLGSZYJKSCSB from '@/assets/images/gis-layout/gis-layout-tools_example-lgszyjcscsb.png'
+import iconLGSZYJKSCSB from '@/assets/images/gis-layout/gis-layout-tools_example-lgszyjkscsb.png'
 import iconJGZZMGS from '@/assets/images/gis-layout/gis-layout-tools_example-jgzzmgs.png'
 import iconLGSJKYFL from '@/assets/images/gis-layout/gis-layout-tools_example-lgsjkyfl.png'
 import iconJQ from '@/assets/images/gis-layout/gis-layout-tools_example-jq.png'

src/views/gis/map-info/style/common.ts

@@ -0,0 +1,39 @@
+import * as ol from 'ol'
+import * as style from 'ol/style'
+import * as layer from 'ol/layer'
+import * as source from 'ol/source'
+import * as geom from 'ol/geom'
+import * as proj from 'ol/proj'
+import * as interaction from 'ol/interaction'
+import * as extent from "ol/extent";
+import * as format from "ol/format";
+import { Coordinate } from 'ol/coordinate'
+import * as turf from '@turf/turf'
+import GisActiveIcon from './gis-active-icon.png'
+import GisAnalysisIcon from './gis-analysis-icon.png'
+const activeStyle = () => {
+    const _style: any = []
+    _style.push(new style.Style({
+        image: new style.Icon({
+            src: GisActiveIcon,
+            scale: 1,
+            displacement: [0, 20]
+        }),
+    }))
+    return _style
+}
+const analysisStyle = () => {
+    const _style: any = []
+    _style.push(new style.Style({
+        image: new style.Icon({
+            src: GisAnalysisIcon,
+            scale: 1,
+            displacement: [0, 0]
+        }),
+    }))
+    return _style
+}
+export default {
+    activeStyle,
+    analysisStyle,
+}

src/views/gis/map-info/style/qy.ts

@@ -0,0 +1,44 @@
+import * as ol from 'ol'
+import * as style from 'ol/style'
+import * as layer from 'ol/layer'
+import * as source from 'ol/source'
+import * as geom from 'ol/geom'
+import * as proj from 'ol/proj'
+import * as interaction from 'ol/interaction'
+import * as extent from "ol/extent";
+import * as format from "ol/format";
+import { Coordinate } from 'ol/coordinate'
+import * as turf from '@turf/turf'
+import lgszyjkscsbImg from '@/assets/images/gis-layout/gis-layout-tools_example-lgszyjkscsb.png'
+import jgzzmgsImg from '@/assets/images/gis-layout/gis-layout-tools_example-jgzzmgs.png'
+import lgsjkyflImg from '@/assets/images/gis-layout/gis-layout-tools_example-lgsjkyfl.png'
+const qyStyle = (type) => {
+    const _style: any = []
+    let img
+    if (type === 'lgszyjkscsb') {
+        img = lgszyjkscsbImg
+    } else if (type === 'jgzzmgs') {
+        img = jgzzmgsImg
+    } else if (type === 'lgsjkyfl') {
+        img = lgsjkyflImg
+    }
+    _style.push(new style.Style({
+        image: new style.Icon({
+            src: img,
+            scale: 26 / 40,
+            displacement: [0, 30]
+        }),
+    }))
+    // _style.push(new style.Style({
+    //     image: new style.Circle({
+    //         radius: 5,
+    //         fill: new style.Fill({
+    //             color: '#e810dd',
+    //         }),
+    //     }),
+    // }))
+    return _style
+}
+export default {
+    qyStyle,
+}