标绘统一

src/components/vue-drag-resize/vue-drag-resize.js

@@ -329,7 +329,7 @@ export default {
         },
 
         bodyDown(ev) {
-            if (['INPUT', 'TEXTAREA', 'CANVAS'].includes(ev.target.nodeName) || ev.target.className?.includes('el-slider')) {
+            if (['INPUT', 'TEXTAREA', 'CANVAS'].includes(ev.target.nodeName) || ev.target.className?.includes?.('el-slider')) {
                 return;
             }
             this.initResize()

src/store/modules/gis.ts

@@ -3,12 +3,21 @@ import * as layer from "ol/layer";
 import * as style from "ol/style";
 import * as ol from "ol";
 import * as format from "ol/format";
-import SbStyle from "@/views/gis/map-info/style/sb";
 import CommonStyle from "@/views/gis/map-info/style/common";
+import SbStyle from "@/views/gis/map-info/style/sb";
+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";
 
 const state = {
   menuRootName: '9cd5fbf9-35fd-4fb2-8c24-1f871afd67be',
   isTooling: false,
+  videoParams: {
+    show: false,
+    name: null,
+    code: null
+  },
   map: null,
   activeQyId: null,
   gisParams: {
@@ -33,6 +42,10 @@ const mutations = {
   SET_IS_TOOLING(state, flag) {
     state.isTooling = flag
   },
+  SET_VIDEO_PARAMS(state, data) {
+    const { show, name = null, code = null } = data
+    state.videoParams = { show, name, code }
+  },
   SET_GIS_MAP(state, {map, defaultDom}) {
     state.map = map
     state.gisParams.default.source = new source.Vector()
@@ -55,7 +68,7 @@ const mutations = {
     })
     state.map.addOverlay(state.gisParams.default.overlay)
   },
-  SET_GIS_PARAMS_DEFAULT_SB(state, {wkt, info, config}) {
+  SET_GIS_PARAMS_DEFAULT_SB(state, {wkt, id, info, config}) {
     const {
       isAnalysis = false
     } = config
@@ -65,12 +78,12 @@ const mutations = {
         state.gisParams.default.type = 'sb'
         state.gisParams.default.info = JSON.parse(JSON.stringify(info))
         const newFeat: any = new format.WKT().readFeature(wkt)
-        let type = ''
-        if (info.type = '公安类') {
+        let type
+        if (info.type === '公安类') {
           type = 'galsb'
-        } else if (info.type = '社会类') {
+        } else if (info.type === '社会类') {
           type = 'shlsb'
-        } else if (info.type = '民用类') {
+        } else if (info.type === '民用类') {
           type = 'mylsb'
         }
         newFeat.set('defaultStyle', SbStyle.sbStyle(type))
@@ -85,10 +98,143 @@ const mutations = {
             newFeat.setStyle(newFeat.get('defaultStyle'))
           }
         })
-        newFeat.setStyle(newFeat.get('analysisStyle'))
-        newFeat.set('featureType', 'sb')
-        newFeat.set('info', state.gisParams.default.info)
-        newFeat.setId(info.deviceid)
+        newFeat.get('resetStyle')()
+        newFeat.set('featureType', JSON.parse(JSON.stringify(state.gisParams.default.type)))
+        newFeat.set('info', JSON.parse(JSON.stringify(state.gisParams.default.info)))
+        newFeat.setId(id)
+        state.gisParams.default.source.addFeature(newFeat)
+        state.gisParams.default.overlay.setPosition(newFeat.getGeometry().getCoordinates())
+      } catch (e) {
+        console.log('异常数据：', wkt, info, e)
+      }
+    }
+  },
+  SET_GIS_PARAMS_DEFAULT_JQ(state, {wkt, id, info, config}) {
+    const {
+      isAnalysis = false
+    } = config
+    if (state.gisParams.default.layer) {
+      state.gisParams.default.source?.clear()
+      try {
+        state.gisParams.default.type = 'jq'
+        state.gisParams.default.info = JSON.parse(JSON.stringify(info))
+        const newFeat: any = new format.WKT().readFeature(wkt)
+        newFeat.set('defaultStyle', JqStyle.jqStyle())
+        newFeat.set('activeStyle', [...CommonStyle.activeStyle(), ...JqStyle.jqStyle()])
+        newFeat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...JqStyle.jqStyle()])
+        newFeat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...JqStyle.jqStyle()])
+        newFeat.set('isAnalysis', isAnalysis)
+        newFeat.set('resetStyle', () => {
+          if (newFeat.get('isAnalysis')) {
+            newFeat.setStyle(newFeat.get('analysisStyle'))
+          } else {
+            newFeat.setStyle(newFeat.get('defaultStyle'))
+          }
+        })
+        newFeat.get('resetStyle')()
+        newFeat.set('featureType', JSON.parse(JSON.stringify(state.gisParams.default.type)))
+        newFeat.set('info', JSON.parse(JSON.stringify(state.gisParams.default.info)))
+        newFeat.setId(id)
+        state.gisParams.default.source.addFeature(newFeat)
+        state.gisParams.default.overlay.setPosition(newFeat.getGeometry().getCoordinates())
+      } catch (e) {
+        console.log('异常数据：', wkt, info, e)
+      }
+    }
+  },
+  SET_GIS_PARAMS_DEFAULT_LG(state, {wkt, id, info, config}) {
+    const {
+      isAnalysis = false
+    } = config
+    if (state.gisParams.default.layer) {
+      state.gisParams.default.source?.clear()
+      try {
+        state.gisParams.default.type = 'lg'
+        state.gisParams.default.info = JSON.parse(JSON.stringify(info))
+        const newFeat: any = new format.WKT().readFeature(wkt)
+        newFeat.set('defaultStyle', LgStyle.lgStyle())
+        newFeat.set('activeStyle', [...CommonStyle.activeStyle(), ...LgStyle.lgStyle()])
+        newFeat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...LgStyle.lgStyle()])
+        newFeat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...LgStyle.lgStyle()])
+        newFeat.set('isAnalysis', isAnalysis)
+        newFeat.set('resetStyle', () => {
+          if (newFeat.get('isAnalysis')) {
+            newFeat.setStyle(newFeat.get('analysisStyle'))
+          } else {
+            newFeat.setStyle(newFeat.get('defaultStyle'))
+          }
+        })
+        newFeat.get('resetStyle')()
+        newFeat.set('featureType', JSON.parse(JSON.stringify(state.gisParams.default.type)))
+        newFeat.set('info', JSON.parse(JSON.stringify(state.gisParams.default.info)))
+        newFeat.setId(id)
+        state.gisParams.default.source.addFeature(newFeat)
+        state.gisParams.default.overlay.setPosition(newFeat.getGeometry().getCoordinates())
+      } catch (e) {
+        console.log('异常数据：', wkt, info, e)
+      }
+    }
+  },
+  SET_GIS_PARAMS_DEFAULT_CZW(state, {wkt, id, info, config}) {
+    const {
+      isAnalysis = false
+    } = config
+    if (state.gisParams.default.layer) {
+      state.gisParams.default.source?.clear()
+      try {
+        state.gisParams.default.type = 'czw'
+        state.gisParams.default.info = JSON.parse(JSON.stringify(info))
+        const newFeat: any = new format.WKT().readFeature(wkt)
+        newFeat.set('defaultStyle', LgStyle.lgStyle())
+        newFeat.set('activeStyle', [...CommonStyle.activeStyle(), ...CzwStyle.czwStyle()])
+        newFeat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...CzwStyle.czwStyle()])
+        newFeat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...CzwStyle.czwStyle()])
+        newFeat.set('isAnalysis', isAnalysis)
+        newFeat.set('resetStyle', () => {
+          if (newFeat.get('isAnalysis')) {
+            newFeat.setStyle(newFeat.get('analysisStyle'))
+          } else {
+            newFeat.setStyle(newFeat.get('defaultStyle'))
+          }
+        })
+        newFeat.get('resetStyle')()
+        newFeat.set('featureType', JSON.parse(JSON.stringify(state.gisParams.default.type)))
+        newFeat.set('info', JSON.parse(JSON.stringify(state.gisParams.default.info)))
+        newFeat.setId(id)
+        state.gisParams.default.source.addFeature(newFeat)
+        state.gisParams.default.overlay.setPosition(newFeat.getGeometry().getCoordinates())
+      } catch (e) {
+        console.log('异常数据：', wkt, info, e)
+      }
+    }
+  },
+  SET_GIS_PARAMS_DEFAULT_HCZ(state, {wkt, id, info, config}) {
+    const {
+      isAnalysis = false
+    } = config
+    if (state.gisParams.default.layer) {
+      state.gisParams.default.source?.clear()
+      try {
+        state.gisParams.default.type = 'hcz'
+        state.gisParams.default.info = JSON.parse(JSON.stringify(info))
+        const newFeat: any = new format.WKT().readFeature(wkt)
+        newFeat.set('defaultStyle', HczStyle.hczStyle())
+        newFeat.set('activeStyle', [...CommonStyle.activeStyle(), ...HczStyle.hczStyle()])
+        newFeat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...HczStyle.hczStyle()])
+        newFeat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...HczStyle.hczStyle()])
+        newFeat.set('isAnalysis', isAnalysis)
+        newFeat.set('resetStyle', () => {
+          if (newFeat.get('isAnalysis')) {
+            newFeat.setStyle(newFeat.get('analysisStyle'))
+          } else {
+            newFeat.setStyle(newFeat.get('defaultStyle'))
+          }
+        })
+        newFeat.get('resetStyle')()
+        newFeat.set('featureType', JSON.parse(JSON.stringify(state.gisParams.default.type)))
+        newFeat.set('info', JSON.parse(JSON.stringify(state.gisParams.default.info)))
+        newFeat.setId(id)
+        state.gisParams.default.source.addFeature(newFeat)
         state.gisParams.default.overlay.setPosition(newFeat.getGeometry().getCoordinates())
       } catch (e) {
         console.log('异常数据：', wkt, info, e)
@@ -114,9 +260,17 @@ const actions = {
       commit('SET_GIS_MAP', {map, defaultDom})
     }
   },
-  LOAD_GIS_PARAMS_DEFAULT({ commit }: any, {type, wkt, info, config = {}}: any) {
+  LOAD_GIS_PARAMS_DEFAULT({ commit }: any, {type, wkt, id, info, config = {}}: any) {
     if (type === 'sb') {
-      commit('SET_GIS_PARAMS_DEFAULT_SB', {wkt, info, config})
+      commit('SET_GIS_PARAMS_DEFAULT_SB', {wkt, id, info, config})
+    } else if (type === 'jq') {
+      commit('SET_GIS_PARAMS_DEFAULT_JQ', {wkt, id, info, config})
+    } else if (type === 'lg') {
+      commit('SET_GIS_PARAMS_DEFAULT_LG', {wkt, id, info, config})
+    } else if (type === 'czw') {
+      commit('SET_GIS_PARAMS_DEFAULT_CZW', {wkt, id, info, config})
+    } else if (type === 'hcz') {
+      commit('SET_GIS_PARAMS_DEFAULT_HCZ', {wkt, id, info, config})
     }
   },
   LOAD_GIS_PARAMS_DEFAULT_RESET({ commit }: any) {

src/views/gis/business/common/VideoPlayKeda.vue

@@ -14,7 +14,7 @@
         <div class="video-play-keda-head-name">{{form.name}}</div>
         <SvgIcon class="__hover" name="close_4" size="20" color="#8FFFFF" @click="$emit('close')"/>
       </div>
-      <KedaCom class="keda" :videoCode="form.deviceid"/>
+      <KedaCom v-if="refreshCode" class="keda" :videoCode="form.code"/>
     </div>
   </VueDragResize>
 </template>
@@ -50,13 +50,20 @@ export default defineComponent({
     const store = useStore();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
     const state = reactive({
-      showHead: false
+      showHead: false,
+      refreshCode: false
     });
     const resize = (layout) => {
       emit('update:layout', Object.assign(layout, {
         height: 'auto'
       }))
     }
+    watch(() => props.form?.code, () => {
+      state.refreshCode = false
+      setTimeout(() => {
+        state.refreshCode = true
+      }, 100)
+    }, {immediate: true})
 
     onMounted(() => {
       nextTick(() => {

src/views/gis/layout/index.vue

@@ -51,9 +51,14 @@
     <div class="gis-content">
       <RouterViewCom/>
     </div>
-    <VideoPlayKedaCom v-if="showVideo" v-model:layout="videoLayout" :form="qyParams.sbInfo" @close="showVideo = false"/>
+    <VideoPlayKedaCom v-if="$store.state.gis.videoParams.show" v-model:layout="videoLayout" :form="$store.state.gis.videoParams" @close="$store.commit('gis/SET_VIDEO_PARAMS', {show: false})"/>
     <div class="mockButtons">
       <el-button @click="mockSB1">模拟设备1</el-button>
+      <el-button @click="mockSB2">模拟设备2</el-button><br/>
+      <el-button @click="mockJQ1">模拟景区1</el-button><br/>
+      <el-button @click="mockLG1">模拟旅馆1</el-button><br/>
+      <el-button @click="mockCZW1">模拟出租屋1</el-button><br/>
+      <el-button @click="mockHCZ1">模拟火车站1</el-button>
     </div>
   </div>
 
@@ -617,7 +622,9 @@ export default defineComponent({
     }
     const mockSB1 = () => {
       store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT', {
+        type: 'sb',
         wkt: 'POINT(110.73667031084902 19.011386491828695)',
+        id: 1,
         info: {
           "pn": "2526",
           "groupid": "89800003866",
@@ -638,6 +645,76 @@ export default defineComponent({
         }
       })
     }
+    const mockSB2 = () => {
+      store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT', {
+        type: 'sb',
+        wkt: 'POINT(110.95227700030215 19.027865984016195)',
+        id: 1,
+        info: {
+          "pn": "2526",
+          "groupid": "89800003866",
+          "monitorid": "18678",
+          "name": "2526测试通道2526测试通道2526测试通道2526测试通道2526测试通道",
+          "online": "0",
+          "savestatus": "1",
+          "ptztype": "3",
+          "deviceid": "46012003001310000011",
+          "areacode": "4.60E+19",
+          "longitude": "110.455893",
+          "latitude": "19.89477",
+          "faultedflag": "0",
+          "status": "OFF",
+          "isfront": "363658824",
+          "type": "公安类",
+          "civilcode": "46012003"
+        }
+      })
+    }
+    const mockJQ1 = () => {
+      store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT', {
+        type: 'jq',
+        wkt: 'POINT(110.74277601017481 18.85289817214939)',
+        id: 1,
+        info: {
+          "name": "海南省博物馆",
+          "address": "在海南省海口市琼山区国兴大道68号线",
+          "level": "4A",
+        }
+      })
+    }
+    const mockLG1 = () => {
+      store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT', {
+        type: 'lg',
+        wkt: 'POINT(110.74277601017481 18.85289817214939)',
+        id: 1,
+        info: {
+          "name": "佳捷连锁酒店(解放西路)",
+          "address": "海口市龙华区解放西路9号金棕榈商业广场F3",
+        }
+      })
+    }
+    const mockCZW1 = () => {
+      store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT', {
+        type: 'czw',
+        wkt: 'POINT(110.74277601017481 18.85289817214939)',
+        id: 1,
+        info: {
+          "name": "大英出租屋",
+          "address": "海口市龙华区解放西路9号金棕榈商业广场F3",
+        }
+      })
+    }
+    const mockHCZ1 = () => {
+      store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT', {
+        type: 'hcz',
+        wkt: 'POINT(110.74277601017481 18.85289817214939)',
+        id: 1,
+        info: {
+          "name": "海口东站",
+          "address": "海口市龙华区解放西路9号金棕榈商业广场F3",
+        }
+      })
+    }
     onMounted(() => {
       if (window.cusConfig?.internetAuth) {
         if (!sessionStorage.getItem('auth')) {
@@ -670,7 +747,12 @@ export default defineComponent({
       onRadiusReset,
       ref_sbDom,
       ref_gisDefault,
-      mockSB1
+      mockSB1,
+      mockSB2,
+      mockJQ1,
+      mockLG1,
+      mockCZW1,
+      mockHCZ1,
     }
   },
 })

src/views/gis/map-info/overlay/default/czw.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="czw-info">
+    <div class="czw-info-head">
+      <img src="./dom-icon-czw.png" alt=""/>出租屋
+    </div>
+    <div class="czw-info-close __hover">
+      <img src="@/components/easyMap/images/close.png" alt=""/>
+    </div>
+    <div class="czw-main">
+      <div class="czw-item">
+        <div class="czw-item-label">名称：</div>
+        <div class="czw-item-value">{{$store.state.gis.gisParams.default.info?.name}}</div>
+      </div>
+      <div class="czw-item">
+        <div class="czw-item-label">地址：</div>
+        <div class="czw-item-value">{{$store.state.gis.gisParams.default.info?.address}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+import VideoPlayKedaCom from "@/views/gis/business/common/VideoPlayKeda.vue";
+
+export default defineComponent({
+  name: '',
+  components: {VideoPlayKedaCom},
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+    })
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.czw-info {
+  $footH: 10px;
+  width: 220px;
+  background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
+  border-radius: 0px 4px 4px 4px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -$footH;
+    border-top: $footH solid #0043C4;
+    border-left: $footH solid transparent;
+    border-right: $footH solid transparent;
+  }
+  .czw-info-head {
+    min-width: 68px;
+    height: 18px;
+    position: absolute;
+    top: -18px;
+    left: 0;
+    font-size: 12px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    line-height: 8px;
+    &:before {
+      z-index: -1;
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
+      border-radius: 2px 2px 0 0;/* 设置圆角 */
+      transform: perspective(20px)rotateX(4deg);
+      /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
+      transform-origin: bottom left;
+      /* bottom left = left bottom = 0 100% 中心点偏移量*/
+    }
+    >img {
+      margin: 0 4px 0 6px;
+    }
+  }
+  .czw-info-close {
+    position: absolute;
+    right: 0;
+    top: -16px;
+  }
+  .czw-main {
+    width: 100%;
+    height: auto;
+    padding: 10px;
+    .czw-item {
+      display: flex;
+      .czw-item-label {
+        width: 42px;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 600;
+        color: #08FFFF;
+        line-height: 20px;
+      }
+      .czw-item-value {
+        flex: 1;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>

src/views/gis/map-info/overlay/default/hcz.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="hcz-info">
+    <div class="hcz-info-head">
+      <img src="./dom-icon-hcz.png" alt=""/>火车站
+    </div>
+    <div class="hcz-info-close __hover">
+      <img src="@/components/easyMap/images/close.png" alt=""/>
+    </div>
+    <div class="hcz-main">
+      <div class="hcz-item">
+        <div class="hcz-item-label">名称：</div>
+        <div class="hcz-item-value">{{$store.state.gis.gisParams.default.info?.name}}</div>
+      </div>
+      <div class="hcz-item">
+        <div class="hcz-item-label">地址：</div>
+        <div class="hcz-item-value">{{$store.state.gis.gisParams.default.info?.address}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+import VideoPlayKedaCom from "@/views/gis/business/common/VideoPlayKeda.vue";
+
+export default defineComponent({
+  name: '',
+  components: {VideoPlayKedaCom},
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+    })
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.hcz-info {
+  $footH: 10px;
+  width: 220px;
+  background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
+  border-radius: 0px 4px 4px 4px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -$footH;
+    border-top: $footH solid #0043C4;
+    border-left: $footH solid transparent;
+    border-right: $footH solid transparent;
+  }
+  .hcz-info-head {
+    min-width: 68px;
+    height: 18px;
+    position: absolute;
+    top: -18px;
+    left: 0;
+    font-size: 12px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    line-height: 8px;
+    &:before {
+      z-index: -1;
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
+      border-radius: 2px 2px 0 0;/* 设置圆角 */
+      transform: perspective(20px)rotateX(4deg);
+      /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
+      transform-origin: bottom left;
+      /* bottom left = left bottom = 0 100% 中心点偏移量*/
+    }
+    >img {
+      margin: 0 4px 0 6px;
+    }
+  }
+  .hcz-info-close {
+    position: absolute;
+    right: 0;
+    top: -16px;
+  }
+  .hcz-main {
+    width: 100%;
+    height: auto;
+    padding: 10px;
+    .hcz-item {
+      display: flex;
+      .hcz-item-label {
+        width: 42px;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 600;
+        color: #08FFFF;
+        line-height: 20px;
+      }
+      .hcz-item-value {
+        flex: 1;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>

src/views/gis/map-info/overlay/default/index.vue

@@ -17,17 +17,25 @@ import {
   getCurrentInstance,
   ComponentInternalInstance,
   toRefs,
-  nextTick
+  nextTick, markRaw
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
 import SbCom from './sb.vue'
+import JqCom from './jq.vue'
+import LgCom from './lg.vue'
+import CzwCom from './czw.vue'
+import HczCom from './hcz.vue'
 
 export default defineComponent({
   name: '',
   components: {
-    SbCom
+    SbCom,
+    JqCom,
+    LgCom,
+    CzwCom,
+    HczCom,
   },
   props: {},
   setup(props, {emit}) {
@@ -37,7 +45,11 @@ export default defineComponent({
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
       comps: [
-        {label: '设备', value: 'sb', com: SbCom}
+        {label: '设备', value: 'sb', com: markRaw(SbCom)},
+        {label: '景区', value: 'jq', com: markRaw(JqCom)},
+        {label: '旅馆', value: 'lg', com: markRaw(LgCom)},
+        {label: '出租屋', value: 'czw', com: markRaw(CzwCom)},
+        {label: '火车站', value: 'hcz', com: markRaw(HczCom)},
       ]
     })
     const comCpt = computed(() => {

src/views/gis/map-info/overlay/default/jq.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="jq-info">
+    <div class="jq-info-head">
+      <img src="./dom-icon-jq.png" alt=""/>景区
+    </div>
+    <div class="jq-info-close __hover">
+      <img src="@/components/easyMap/images/close.png" alt=""/>
+    </div>
+    <div class="jq-main">
+      <div class="jq-item">
+        <div class="jq-item-label">名称：</div>
+        <div class="jq-item-value">{{$store.state.gis.gisParams.default.info?.name}}</div>
+      </div>
+      <div class="jq-item">
+        <div class="jq-item-label">地址：</div>
+        <div class="jq-item-value">{{$store.state.gis.gisParams.default.info?.address}}</div>
+      </div>
+      <div class="jq-item">
+        <div class="jq-item-label">等级：</div>
+        <div class="jq-item-value">{{$store.state.gis.gisParams.default.info?.level}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+import VideoPlayKedaCom from "@/views/gis/business/common/VideoPlayKeda.vue";
+
+export default defineComponent({
+  name: '',
+  components: {VideoPlayKedaCom},
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+    })
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.jq-info {
+  $footH: 10px;
+  width: 220px;
+  background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
+  border-radius: 0px 4px 4px 4px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -$footH;
+    border-top: $footH solid #0043C4;
+    border-left: $footH solid transparent;
+    border-right: $footH solid transparent;
+  }
+  .jq-info-head {
+    min-width: 68px;
+    height: 18px;
+    position: absolute;
+    top: -18px;
+    left: 0;
+    font-size: 12px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    line-height: 8px;
+    &:before {
+      z-index: -1;
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
+      border-radius: 2px 2px 0 0;/* 设置圆角 */
+      transform: perspective(20px)rotateX(4deg);
+      /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
+      transform-origin: bottom left;
+      /* bottom left = left bottom = 0 100% 中心点偏移量*/
+    }
+    >img {
+      margin: 0 4px 0 6px;
+    }
+  }
+  .jq-info-close {
+    position: absolute;
+    right: 0;
+    top: -16px;
+  }
+  .jq-main {
+    width: 100%;
+    height: auto;
+    padding: 10px;
+    .jq-item {
+      display: flex;
+      .jq-item-label {
+        width: 42px;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 600;
+        color: #08FFFF;
+        line-height: 20px;
+      }
+      .jq-item-value {
+        flex: 1;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>

src/views/gis/map-info/overlay/default/lg.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="lg-info">
+    <div class="lg-info-head">
+      <img src="./dom-icon-lg.png" alt=""/>旅馆
+    </div>
+    <div class="lg-info-close __hover">
+      <img src="@/components/easyMap/images/close.png" alt=""/>
+    </div>
+    <div class="lg-main">
+      <div class="lg-item">
+        <div class="lg-item-label">名称：</div>
+        <div class="lg-item-value">{{$store.state.gis.gisParams.default.info?.name}}</div>
+      </div>
+      <div class="lg-item">
+        <div class="lg-item-label">地址：</div>
+        <div class="lg-item-value">{{$store.state.gis.gisParams.default.info?.address}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+import VideoPlayKedaCom from "@/views/gis/business/common/VideoPlayKeda.vue";
+
+export default defineComponent({
+  name: '',
+  components: {VideoPlayKedaCom},
+  props: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+    })
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.lg-info {
+  $footH: 10px;
+  width: 220px;
+  background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
+  border-radius: 0px 4px 4px 4px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -$footH;
+    border-top: $footH solid #0043C4;
+    border-left: $footH solid transparent;
+    border-right: $footH solid transparent;
+  }
+  .lg-info-head {
+    min-width: 68px;
+    height: 18px;
+    position: absolute;
+    top: -18px;
+    left: 0;
+    font-size: 12px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    line-height: 8px;
+    &:before {
+      z-index: -1;
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(180deg, #3874C9 0%, #0043C4 100%);
+      border-radius: 2px 2px 0 0;/* 设置圆角 */
+      transform: perspective(20px)rotateX(4deg);
+      /* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转5度 */
+      transform-origin: bottom left;
+      /* bottom left = left bottom = 0 100% 中心点偏移量*/
+    }
+    >img {
+      margin: 0 4px 0 6px;
+    }
+  }
+  .lg-info-close {
+    position: absolute;
+    right: 0;
+    top: -16px;
+  }
+  .lg-main {
+    width: 100%;
+    height: auto;
+    padding: 10px;
+    .lg-item {
+      display: flex;
+      .lg-item-label {
+        width: 42px;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 600;
+        color: #08FFFF;
+        line-height: 20px;
+      }
+      .lg-item-value {
+        flex: 1;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>

src/views/gis/map-info/overlay/default/sb.vue

@@ -1,21 +1,25 @@
 <template>
-  <div ref="ref_sbDom" class="sb-info">
+  <div class="sb-info">
     <div class="sb-info-head">
-      <SvgIcon class="__hover" name="tips" size="14" color="#8FFFFF"/>设备
+      <img src="./dom-icon-sb.png" alt=""/>设备
     </div>
-    <div class="sb-info-close __hover" @click="onCloseSb">
+    <div class="sb-info-close __hover" @click="$store.dispatch('gis/LOAD_GIS_PARAMS_DEFAULT_RESET')">
       <img src="@/components/easyMap/images/close.png" alt=""/>
     </div>
     <div class="sb-main">
       <div class="sb-item">
         <div class="sb-item-label">名称：</div>
-        <div class="sb-item-value">{{qyParams.sbInfo?.name}}</div>
+        <div class="sb-item-value">{{$store.state.gis.gisParams.default.info?.name}}</div>
       </div>
       <div class="sb-item">
         <div class="sb-item-label">状态：</div>
-        <div class="sb-item-value">{{qyParams.sbInfo?.online === '0' ? '在线' : '离线'}}</div>
+        <div class="sb-item-value">{{$store.state.gis.gisParams.default.info?.online === '0' ? '在线' : '离线'}}</div>
       </div>
-      <div class="play-button __hover" @click="showVideo = true">视频调阅</div>
+      <div class="play-button __hover" @click="$store.commit('gis/SET_VIDEO_PARAMS', {
+        show: true,
+        name: $store.state.gis.gisParams.default.info?.name,
+        code: $store.state.gis.gisParams.default.info?.deviceid
+      })">视频调阅</div>
     </div>
   </div>
 </template>
@@ -36,17 +40,19 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
+import VideoPlayKedaCom from "@/views/gis/business/common/VideoPlayKeda.vue";
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {VideoPlayKedaCom},
   props: {},
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+    })
     onMounted(() => {
     })
     return {
@@ -99,7 +105,7 @@ export default defineComponent({
       transform-origin: bottom left;
       /* bottom left = left bottom = 0 100% 中心点偏移量*/
     }
-    .svg-icon {
+    >img {
       margin: 0 4px 0 6px;
     }
   }

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

@@ -0,0 +1,27 @@
+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'
+//  @ts-ignore
+import czwImg from '@/assets/images/gis-layout/gis-layout-tools_example-czw.png'
+const czwStyle = () => {
+    const _style: any = []
+    _style.push(new style.Style({
+        image: new style.Icon({
+            src: czwImg,
+            scale: 26 / 40,
+            displacement: [0, 30]
+        }),
+    }))
+    return _style
+}
+export default {
+    czwStyle,
+}

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

@@ -0,0 +1,27 @@
+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'
+//  @ts-ignore
+import hczImg from '@/assets/images/gis-layout/gis-layout-tools_example-hcz.png'
+const hczStyle = () => {
+    const _style: any = []
+    _style.push(new style.Style({
+        image: new style.Icon({
+            src: hczImg,
+            scale: 26 / 40,
+            displacement: [0, 30]
+        }),
+    }))
+    return _style
+}
+export default {
+    hczStyle,
+}

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

@@ -0,0 +1,27 @@
+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'
+//  @ts-ignore
+import jqImg from '@/assets/images/gis-layout/gis-layout-tools_example-jq.png'
+const jqStyle = () => {
+    const _style: any = []
+    _style.push(new style.Style({
+        image: new style.Icon({
+            src: jqImg,
+            scale: 26 / 40,
+            displacement: [0, 30]
+        }),
+    }))
+    return _style
+}
+export default {
+    jqStyle,
+}

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

@@ -0,0 +1,27 @@
+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'
+//  @ts-ignore
+import lgImg from '@/assets/images/gis-layout/gis-layout-tools_example-lg.png'
+const lgStyle = () => {
+    const _style: any = []
+    _style.push(new style.Style({
+        image: new style.Icon({
+            src: lgImg,
+            scale: 26 / 40,
+            displacement: [0, 30]
+        }),
+    }))
+    return _style
+}
+export default {
+    lgStyle,
+}