feat: 添加地图网络异常设计

src/example/dialog/basemap/leaflet/index.vue

@@ -54,17 +54,25 @@
       </div>
     </div>
 
-    <div class="map" ref="mapEle"></div>
-    <div class="tiles-select" v-if="tileGroups.length > 1">
-      <el-select v-model="groupIndex" style="width: 140px">
-        <el-option :label="group.name" :value="ndx" v-for="(group, ndx) in tileGroups" />
-      </el-select>
-    </div>
+    <template v-if="!offline">
+      <div class="map" ref="mapEle"></div>
+      <div class="tiles-select" v-if="tileGroups.length > 1">
+        <el-select v-model="groupIndex" style="width: 140px">
+          <el-option
+            :label="group.name"
+            :value="ndx"
+            v-for="(group, ndx) in tileGroups"
+          />
+        </el-select>
+      </div>
+    </template>
+
+    <el-empty description="网络连接异常，请检查网络后重试" class="map" v-else />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, shallowRef, watch, watchEffect } from "vue";
+import { computed, onUnmounted, ref, shallowRef, watch, watchEffect } from "vue";
 import {
   getCurrentLatlng,
   LatLng,
@@ -75,12 +83,15 @@ import {
 } from "./useLeaflet";
 import { BasemapInfo, SearchResultItem, SelectMapImageProps } from "../index";
 import html2canvas from "html2canvas";
-import { ElInput, ElSelect, ElOption } from "element-plus";
+import { ElInput, ElSelect, ElOption, ElEmpty, ElMessageBox } from "element-plus";
 import { asyncTimeout } from "@/utils/shared";
 import { ui18n } from "@/lang";
 import coordtransform from "coordtransform";
+import { onNetworkchanges } from "@/utils/dom";
 
 const props = defineProps<SelectMapImageProps>();
+const offline = ref(false);
+onUnmounted(onNetworkchanges((v) => (offline.value = v)));
 
 const mapEle = shallowRef<HTMLDivElement>();
 const lMap = useLMap(mapEle);
@@ -164,6 +175,10 @@ initLatlng();
 
 const submit = async (): Promise<BasemapInfo> => {
   if (!lMap.value) {
+    ElMessageBox.alert(
+      offline.value ? "网络连接异常，请检查网络后重试" : "地图未初始化",
+      { confirmButtonText: "确定" }
+    );
     throw "地图未初始化";
   }
 

src/utils/dom.ts

@@ -1,4 +1,5 @@
 import { listener } from "./event";
+import { mergeFuns } from "./shared";
 
 function getCaretPosition(
   element: HTMLInputElement | HTMLTextAreaElement,
@@ -174,3 +175,19 @@ export const getKeywordInput = (
     }),
   };
 };
+
+export const onNetworkchanges = (callback: (offline: boolean) => void) => {
+  // 1. 立即执行一次回调，告知初始状态
+  // 提示：navigator.onLine 为 true 表示在线
+  callback(!navigator.onLine);
+
+  // 2. 定义处理函数
+  const handleOnline = () => callback(false);
+  const handleOffline = () => callback(true);
+
+  // 3. 绑定事件
+  return mergeFuns(
+    listener(window, 'online' as any, handleOnline),
+    listener(window, 'offline' as any, handleOffline),
+  )
+}