hookehuyr

fix 上传图片比例操作优化,可以动态修改图片大小

1 <!-- 1 <!--
2 * @Date: 2025-01-22 11:40:12 2 * @Date: 2025-01-22 11:40:12
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-02-08 15:08:33 4 + * @LastEditTime: 2025-02-08 15:24:26
5 * @FilePath: /map-demo/src/views/mapCutter.vue 5 * @FilePath: /map-demo/src/views/mapCutter.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
38 </div> 38 </div>
39 39
40 <div style="display: flex; align-items: center;"> 40 <div style="display: flex; align-items: center;">
41 - <div>上传图片范围:&nbsp;</div> 41 + <div>上传图片基点:&nbsp;</div>
42 <el-input 42 <el-input
43 v-model="map_left_bottom_range" 43 v-model="map_left_bottom_range"
44 style="width: 240px" 44 style="width: 240px"
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
57 v-model="img_ratio" 57 v-model="img_ratio"
58 style="width: 240px" 58 style="width: 240px"
59 placeholder="输入上传图片比例" 59 placeholder="输入上传图片比例"
60 + @blur="onRatioBlur"
60 > 61 >
61 </el-input> 62 </el-input>
62 </div> 63 </div>
...@@ -86,7 +87,7 @@ ...@@ -86,7 +87,7 @@
86 <div style=" display: flex; align-items: center; justify-content: center;">经纬度:{{ log_lnglat }}&nbsp;&nbsp;&nbsp;<el-button @click="copyText(log_lnglat)" type="primary" :icon="Brush" size="small">复制</el-button></div> 87 <div style=" display: flex; align-items: center; justify-content: center;">经纬度:{{ log_lnglat }}&nbsp;&nbsp;&nbsp;<el-button @click="copyText(log_lnglat)" type="primary" :icon="Brush" size="small">复制</el-button></div>
87 </div> 88 </div>
88 89
89 - <div v-if="showUpload" class="controls-container"> 90 + <div v-if="showUpload && imageURL" class="controls-container">
90 <!-- 遥控器界面 --> 91 <!-- 遥控器界面 -->
91 <div class="remote-control"> 92 <div class="remote-control">
92 <!-- 方向控制 --> 93 <!-- 方向控制 -->
...@@ -501,7 +502,13 @@ const objectStyle = computed(() => ({ ...@@ -501,7 +502,13 @@ const objectStyle = computed(() => ({
501 rotate(${rotation.value}deg) 502 rotate(${rotation.value}deg)
502 `, 503 `,
503 transition: 'transform 0.3s ease-in-out' 504 transition: 'transform 0.3s ease-in-out'
504 -})) 505 +}));
506 +
507 +const onRatioBlur = () => {
508 + if (imageURL.value) {
509 + addImageToMap(imageURL.value);
510 + }
511 +}
505 </script> 512 </script>
506 513
507 <style> 514 <style>
......