1

src/view/case/draw/selectMapImage.vue

@@ -329,6 +329,46 @@ var dataURLtoBlob = function (dataurl) {
 const search = debounce((keyword: string) => {
   searchAMap.value.search(keyword);
 }, 1000);
+const getblc = function() {
+  const size = map.getSize();
+  // 获取地图容器相对于视口的位置
+const container = map.getContainer();
+const position = container.getBoundingClientRect();
+
+const box = {
+  width: size.x,
+  height: size.y,
+  left: position.left,
+  top: position.top,
+  right: position.left + size.x,
+  bottom: position.top + size.y
+};
+console.log('getblc',box);
+const bounds = map.getBounds();
+// 获取东北角和西北角（计算高度）
+const northEast = bounds.getNorthEast();
+const northWest = L.latLng(northEast.lat, bounds.getSouthWest().lng);
+
+// 获取西南角和东南角（计算宽度）
+const southWest = bounds.getSouthWest();
+const southEast = L.latLng(southWest.lat, northEast.lng);
+
+// 计算宽度（东西方向距离）
+const widthInMeters = northEast.distanceTo(northWest);
+
+// 计算高度（南北方向距离）
+const heightInMeters = northEast.distanceTo(southEast);
+
+const geoBox = {
+  width: widthInMeters,  // 宽度（米）
+  height: heightInMeters, // 高度（米）
+  center: bounds.getCenter(),
+  zoom: map.getZoom()
+};
+
+console.log('getblc',geoBox);
+return geoBox
+}
 watchEffect(() => {
   searchAMap.value && search(keyword.value);
 });
@@ -337,21 +377,22 @@ defineExpose<QuiskExpose>({
   submit() {
     return new Promise<MapImage>((resolve) => {
       console.log("searchInfo", searchInfo.value, mapName.value);
+      const info = getblc();
       if (mapEl.value) {
-        const canvas = mapEl.value.querySelector("canvas") as HTMLCanvasElement;
-        console.log(canvas, "canvas");
-        canvas &&
-          canvas.toBlob((blob) => resolve({ blob, search: searchInfo.value! })); // || resolve({ search: searchInfo.value! });
-        if (!canvas) {
+        // const canvas = mapEl.value.querySelector("canvas") as HTMLCanvasElement;
+        // console.log(canvas, "canvas");
+        // canvas &&
+        //   canvas.toBlob((blob) => resolve({ blob, search: searchInfo.value! })); // || resolve({ search: searchInfo.value! });
+        // if (!canvas) {
           //div内容生成图片
           html2canvas(mapEl.value, {
             useCORS: true, // 添加这个选项以解决跨域问题
           }).then((canvas) => {
             let imgUrl = canvas.toDataURL("image/png");
             let blob = dataURLtoBlob(imgUrl);
-            resolve({ blob, search: searchInfo.value!, mapId: mapName.value.mapId, mapUrl: mapName.value.mapUrl });
+            resolve({ blob, search: searchInfo.value!,  mapId: mapName.value.mapId, mapUrl: mapName.value.mapUrl, ...info });
           });
-        }
+        // }
       } else {
         resolve({ blob: null, search: null, mapId: mapName.value.mapId, mapUrl: mapName.value.mapUrl });
       }

src/view/case/draw/selectMapImagess.vue

@@ -36,7 +36,7 @@ import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 export type MapImage = { blob: Blob | null; search: MapInfo | null };
 type MapInfo = { lat: number; lng: number; zoom: number; text: string };
-
+let map = null;
 const keyword = ref("");
 const showSearch = ref(true);
 const info = ref<MapInfo>();
@@ -62,7 +62,7 @@ watchEffect(async (onCleanup) => {
     version: "2.0",
   });
 
-  const map = new AMap.Map(mapEl.value, {
+  map = new AMap.Map(mapEl.value, {
     WebGLParams: {
       preserveDrawingBuffer: true,
     },
@@ -165,6 +165,72 @@ var dataURLtoBlob =  function (dataurl){
 const search = debounce((keyword: string) => {
   searchAMap.value.search(keyword);
 }, 1000);
+const getblc = () => {
+  console.log('map', map);
+  if (!map) {
+    ElMessage.error('地图未初始化')
+    return
+  }
+
+  try {
+    // 获取当前地图的可视区域边界
+    const bounds = map.getBounds()
+    const southwest = bounds.getSouthWest() // 西南角
+    const northeast = bounds.getNorthEast() // 东北角
+    const northwest = new (window as any).AMap.LngLat(southwest.lng, northeast.lat) // 西北角
+    const southeast = new (window as any).AMap.LngLat(northeast.lng, southwest.lat) // 东南角
+    
+    // 使用高德地图的几何工具计算距离（单位：米）
+    const AMap = (window as any).AMap
+    
+    // 计算宽度（东西方向距离）
+    const width = AMap.GeometryUtil.distance(southwest, southeast)
+    
+    // 计算高度（南北方向距离）
+    const height = AMap.GeometryUtil.distance(southwest, northwest)
+    
+    // 计算面积（平方米）
+    const area = width * height
+    
+    // 获取当前缩放级别
+    const zoom = map.getZoom()
+    
+    // 获取地图中心点
+    const center = map.getCenter()
+    
+    const viewportInfo = {
+      width: width, // 宽度（米）
+      height: height, // 高度（米）
+      area: Math.round(area), // 面积（平方米）
+      zoom: zoom, // 缩放级别
+      center: {
+        lat: center.lat,
+        lng: center.lng
+      },
+      bounds: {
+        southwest: { lat: southwest.lat, lng: southwest.lng },
+        northeast: { lat: northeast.lat, lng: northeast.lng }
+      }
+    }
+    
+    console.log('当前可视区域信息:', viewportInfo)
+    
+    // ElMessage.success(`
+    //   可视区域信息：
+    //   宽度：${viewportInfo.width.toLocaleString()} 米
+    //   高度：${viewportInfo.height.toLocaleString()} 米
+    //   面积：${viewportInfo.area.toLocaleString()} 平方米
+    //   缩放级别：${viewportInfo.zoom.toFixed(2)}
+    // `)
+    return {
+      width: viewportInfo.width,
+      height: viewportInfo.height,
+    }
+  } catch (error) {
+    console.error('计算可视区域失败:', error)
+    ElMessage.error('计算可视区域失败')
+  }
+}
 watchEffect(() => {
   searchAMap.value && search(keyword.value);
 });
@@ -172,7 +238,10 @@ watchEffect(() => {
 defineExpose<QuiskExpose>({
   submit() {
     return new Promise<MapImage>((resolve) => {
-        console.log('searchInfo', searchInfo.value, mapEl.value);
+        const info = getblc();
+        let firstElement = document.querySelector('.leaflet-control-container');
+        firstElement.style.visibility = 'hidden';
+        console.log('searchInfo',info, searchInfo.value, mapEl.value);
         if (mapEl.value) {
         // const canvas = mapEl.value.querySelector("canvas") as HTMLCanvasElement;
         // console.log(canvas, 'canvas');
@@ -184,7 +253,7 @@ defineExpose<QuiskExpose>({
           }).then((canvas) => {
             let imgUrl = canvas.toDataURL("image/png");
             let blob = dataURLtoBlob(imgUrl)
-            resolve({ blob, search: searchInfo.value! });
+            resolve({ blob, search: searchInfo.value!, ...info })// || resolve({ search: searchInfo.value!, ...info });
           });
         // }
       } else {