✨ feat:

自动计算图片所占右上角经纬度

 <!--
  * @Date: 2025-01-22 11:40:12
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-01-24 17:33:54
+ * @LastEditTime: 2025-02-08 10:05:50
  * @FilePath: /map-demo/src/views/mapCutter.vue
  * @Description: 文件描述
 -->
@@ -37,12 +37,12 @@
         @blur="onLBRangeBlur"
       />
       &nbsp;
-      <el-input
+      <!-- <el-input
         v-model="map_right_top_range"
         style="width: 240px"
         placeholder="输入右上角的经纬度"
         @blur="onRTRangeBlur"
-      />
+      /> -->
     </div>
     <div v-if="showUpload">
       <input type="file" @change="handleImageUpload" />
@@ -170,11 +170,56 @@ function handleImageUpload(event) {
   reader.readAsDataURL(file);
 }
 
-function addImageToMap(url) {
+async function addImageToMap(url) {
   if (imageLayer.value) {
     map.value.remove(imageLayer.value);
   }
 
+  // 计算图片右上角经纬度
+  const img = new Image();
+  img.src = url;
+
+  await new Promise((resolve) => {
+    img.onload = resolve;
+  });
+
+  const imgWidth = img.width;
+  const imgHeight = img.height;
+  const aspectRatio = imgWidth / imgHeight; // 图片宽高比
+
+  // 获取左下角经纬度
+  const [lng1, lat1] = map_left_bottom_range.value;
+
+  // 计算地理坐标的范围（保持图片比例）
+  const mapBounds = map.value.getBounds(); // 获取当前地图可视范围
+  const southWest = mapBounds.getSouthWest();
+  const northEast = mapBounds.getNorthEast();
+
+  // 计算地图当前可视区域的宽高
+  const mapLngWidth = Math.abs(northEast.lng - southWest.lng);
+  const mapLatHeight = Math.abs(northEast.lat - southWest.lat);
+
+  // 让地图范围的宽高比匹配图片的宽高比
+  let lat2, lng2;
+  if (mapLngWidth / mapLatHeight > aspectRatio) {
+    // 地图太宽了，需要基于高度调整宽度
+    const latHeight = mapLatHeight * 0.5; // 设定图片占地图的比例（可以调整）
+    const lngWidth = latHeight * aspectRatio;
+
+    lat2 = lat1 + latHeight;
+    lng2 = lng1 + lngWidth;
+  } else {
+    // 地图太高了，需要基于宽度调整高度
+    const lngWidth = mapLngWidth * 0.5; // 设定图片占地图的比例（可以调整）
+    const latHeight = lngWidth / aspectRatio;
+
+    lat2 = lat1 + latHeight;
+    lng2 = lng1 + lngWidth;
+  }
+
+  // 更新右上角坐标
+  map_right_top_range.value = [lng2, lat2];
+
   // TAG： 设置图片范围
   bounds.value = new AMap.Bounds(map_left_bottom_range.value, map_right_top_range.value); // 设置图片范围 左下角 (西南) -> 右上角 (东北)
   imageLayer.value = new AMap.ImageLayer({
@@ -269,7 +314,7 @@ const onRTRangeBlur = () => {
 }
 
 const showUpload = computed(() => {
-  return map_left_bottom_range.value && map_right_top_range.value ? true : false;
+  return map_left_bottom_range.value ? true : false;
 });
 
 const onCenterBlur = () => {