123

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="关闭路况"
+    <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
-      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">
@@ -31,7 +30,8 @@
     </el-carousel> -->
     <!-- 地图缩放 -->
     <div class="zoomTargetBox">
-      <el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
+      <el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
+      </el-input-number>
     </div>
   </div>
 </template>
@@ -88,33 +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],
+      center: [94.36,29.65],
-      zoom: 15
+      zoom: 10
     },
-    minZoom: 7,
+    transformRequest: (url) => {
-    maxZoom: 18,
+      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(
+     map.addGaudLayer({
-      "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
+      url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
-      ,
+    })
-      {
-        Service: "getImage",
-        Type: "RGB",
-        ZoomOffset: "0",
-        V: "0.3",
-        Zoom: "{z}",
-        Row: "{y}",
-        Col: "{x}"
-      },
-      {
-        tileSize: 300
-      }
-    );
     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 {
       width: 100%;
       height: 50px;
     }
-
     & > 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;
   }