可以自定义上传图片的比例

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     Floor: typeof import('./src/components/Floor/index.vue')['default']
     InfoPopup: typeof import('./src/components/InfoPopup.vue')['default']

 <!--
  * @Date: 2025-01-22 11:40:12
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-02-08 10:05:50
+ * @LastEditTime: 2025-02-08 10:47:47
  * @FilePath: /map-demo/src/views/mapCutter.vue
  * @Description: 文件描述
 -->
@@ -43,6 +43,12 @@
         placeholder="输入右上角的经纬度"
         @blur="onRTRangeBlur"
       /> -->
+      <div>上传图片比例:&nbsp;</div>
+      <el-input
+        v-model="img_ratio"
+        style="width: 240px"
+        placeholder="输入上传图片比例"
+      />
     </div>
     <div v-if="showUpload">
       <input type="file" @change="handleImageUpload" />
@@ -84,6 +90,7 @@ const mapRotation = ref(0); // 存储地图旋转角度
 const zooms = ref([17, 19]);
 
 const map_zoom = ref(17)
+const img_ratio = ref(0.5); // 图片缩放比例
 
 const zoom_options = [
   {
@@ -203,14 +210,14 @@ async function addImageToMap(url) {
   let lat2, lng2;
   if (mapLngWidth / mapLatHeight > aspectRatio) {
     // 地图太宽了，需要基于高度调整宽度
-    const latHeight = mapLatHeight * 0.5; // 设定图片占地图的比例（可以调整）
+    const latHeight = mapLatHeight * img_ratio.value; // 设定图片占地图的比例（可以调整）
     const lngWidth = latHeight * aspectRatio;
 
     lat2 = lat1 + latHeight;
     lng2 = lng1 + lngWidth;
   } else {
     // 地图太高了，需要基于宽度调整高度
-    const lngWidth = mapLngWidth * 0.5; // 设定图片占地图的比例（可以调整）
+    const lngWidth = mapLngWidth * img_ratio.value; // 设定图片占地图的比例（可以调整）
     const latHeight = lngWidth / aspectRatio;
 
     lat2 = lat1 + latHeight;