修改功能

src/components/GdMap/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div :id="mapid" class="map"></div>
   <div class="changeMap_box" v-if="props.isShow">
-    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
-      style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
+    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
     <!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3"  @change="onMapImageChange">
       <el-carousel-item>
         <div class="mapImageItem">
@@ -75,7 +74,7 @@ const props = defineProps({
 });
 try {
   const userInfo = getItem("deptId")[0].deptCode;
-} catch (error) { }
+} catch (error) {}
 let map;
 let mapLayer;
 let mapLayer1;
@@ -89,32 +88,27 @@ onMounted(() => {
 
   map = new EliMap({
     id: props.mapid,
-    crs: "EPSG:4490",
+    crs: "EPSG:3857",
     style: {
       glyphs: "./fonts/{fontstack}/{range}.pbf",
-      center: [94.36057012, 29.64276831],
-      zoom: 15
+      center: [94.36,29.65],
+      zoom: 10
     },
-    minZoom: 7,
-    maxZoom: 18,
+    transformRequest: (url) => {
+      if (url.indexOf("TileMatrix=") != -1) {
+        const arr = url.split("TileMatrix=");
+        const arr1 = arr[1].split("&");
+        const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
+
+      }
+    }
   });
+
   window.map = map;
   map.mapboxGLMap.on("load", () => {
-    map.addWMTSLayer(
-      "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap",
-      {
-        Service: "getImage",
-        Type: "RGB",
-        ZoomOffset: "0",
-        V: "0.3",
-        Zoom: "{z}",
-        Row: "{y}",
-        Col: "{x}"
-      },
-      {
-        tileSize: 300
-      }
-    );
+     map.addGaudLayer({
+      url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+    })
     zoomTarget.value = map.mapboxGLMap.getZoom();
   });
   mapUtil.value = new MapUtil(map);
@@ -172,7 +166,7 @@ onMounted(() => {
   });
   // 回显线
   emitter.on("echoLine", (res) => {
-    mapUtil.value.createLine(res, res.flag);
+    mapUtil.value.createLine(res);
   });
   //创建边界面（geojson）
   emitter.on("setBoundarys", (res) => {
@@ -203,6 +197,11 @@ onMounted(() => {
     mapUtil.value.diffusionCircle(res);
   });
 
+  // 清除全部覆盖物
+  emitter.on("removeElementAll", () => {
+    mapUtil.value.removeElementAll();
+  });
+
   // 展示盘曲
   emitter.on("showGapText", (obj) => {
     mapUtil.value.gapText(obj);
@@ -301,6 +300,7 @@ onUnmounted(() => {
   emitter.off("diffusionCircle");
   emitter.off("SsCircle");
   emitter.off("ClearssCircle");
+  emitter.off("removeElementAll");
 });
 </script>
 
@@ -323,35 +323,29 @@ onUnmounted(() => {
   right: 398px;
   bottom: 4px;
   z-index: 9;
-
   .mapImageItem {
     border: 1px solid #08aae8;
     background: rgb(9, 26, 70);
-
-    &>img {
+    & > img {
       width: 100%;
       height: 50px;
     }
-
-    &>div {
+    & > div {
       text-align: center;
       position: relative;
       top: -3px;
     }
   }
-
   .zoomTargetBox {
     margin-top: 10px;
     margin-left: 23px;
   }
-
   ::v-deep .el-input-number__decrease,
   ::v-deep .el-input-number__increase {
     background: #133362;
     color: #fff;
     border: none;
   }
-
   ::v-deep .el-input__inner {
     background: #0c1641;
   }

src/components/video/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="videoBoxcnt" v-show="isShowVideo">
+    <div class="videoMain">
+      <div class="close" @click="isShowVideo = false">
+        <el-icon :size="22"><CircleClose /></el-icon>
+      </div>
+      <div class="cnt-box">
+        <!-- <VideoPay :show="true" :src="url" /> -->
+           <VideoPay :sbbh="sbbh"  v-if="sbbh" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from "element-plus";
+// import VideoPay from "@/components/VideoPay/index.vue";
+import VideoPay from "@/components/wsIframe/index"; //iframe播放
+import { dateFormat } from "@/utils/auth";
+import { http } from "@/api/service";
+import emitter from "@/utils/eventBus.js";
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  reactive,
+  computed,
+  getCurrentInstance
+} from "vue";
+const isShowVideo = ref(false);
+const player = ref(null);
+const { proxy } = getCurrentInstance();
+const sbbh = ref(null);
+const url = ref();
+
+onMounted(() => {
+  emitter.on("openGzyVideo", (res) => {
+    console.log(res,'111111');
+    
+    sbbh.value = res.sbbh;
+    isShowVideo.value=true
+    // getUrl(sbbh.value);
+  });
+});
+onUnmounted(() => {
+  emitter.off("openGzyVideo");
+});
+
+function getUrl(val) {
+  http.previewURLs({ sbbh: val }).then((res) => {
+    let data = JSON.parse(res);
+    if(data.data){
+      isShowVideo.value = true;
+      url.value = data.data.url;
+    }else{
+      isShowVideo.value = false
+      ElMessage.info("暂无数据源");
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.videoBoxcnt {
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.close {
+  width: 100%;
+  text-align: right;
+  height: 24px;
+}
+.cnt-box {
+  width: 50vw;
+  height: 50vh;
+  background: #fff;
+  // padding: 5px;
+}
+
+.splitBtn {
+  display: inline-block;
+  padding: 4px 14px;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  margin-left: 4px;
+  margin-bottom: 6px;
+  color: #000;
+}
+.isBtnActive {
+  border: 1px solid #ffcc00;
+}
+</style>
+<style scoped>
+/* @import "~@/components/h5player/static/css/antd.min.css"; */
+.name {
+  width: 60px;
+  display: inline-block;
+  text-align-last: justify;
+  margin-right: 4px;
+}
+</style>