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 16:15:04 4 + * @LastEditTime: 2025-02-08 17:37:19
5 * @FilePath: /map-demo/src/views/mapCutter.vue 5 * @FilePath: /map-demo/src/views/mapCutter.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 </div> --> 17 </div> -->
18 <div style="display: flex; padding: 1rem; gap: 1rem;"> 18 <div style="display: flex; padding: 1rem; gap: 1rem;">
19 <div style="display: flex; align-items: center;"> 19 <div style="display: flex; align-items: center;">
20 - <div>目标地图经纬度:&nbsp;</div> 20 + <div>地图中心坐标:&nbsp;</div>
21 <el-input 21 <el-input
22 v-model="map_center" 22 v-model="map_center"
23 style="width: 240px" 23 style="width: 240px"
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
27 </div> 27 </div>
28 <div style="display: flex; align-items: center;"> 28 <div style="display: flex; align-items: center;">
29 <div>地图层级:&nbsp;</div> 29 <div>地图层级:&nbsp;</div>
30 - <el-select v-model="map_zoom" placeholder="地图层级" style="width: 240px" @change="onZoomChange"> 30 + <el-select v-model="map_zoom" placeholder="地图层级" style="width: 80px" @change="onZoomChange">
31 <el-option 31 <el-option
32 v-for="item in zoom_options" 32 v-for="item in zoom_options"
33 :key="item.value" 33 :key="item.value"
...@@ -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"
...@@ -52,11 +52,11 @@ ...@@ -52,11 +52,11 @@
52 placeholder="输入右上角的经纬度" 52 placeholder="输入右上角的经纬度"
53 @blur="onRTRangeBlur" 53 @blur="onRTRangeBlur"
54 /> --> 54 /> -->
55 - <div>上传图片比例:&nbsp;</div> 55 + <div>上传图片缩放比例:&nbsp;</div>
56 <el-input 56 <el-input
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 @blur="onRatioBlur"
61 > 61 >
62 </el-input> 62 </el-input>
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
83 <el-button type="primary" @click="rotateMap(-10)">地图逆时针旋转</el-button> 83 <el-button type="primary" @click="rotateMap(-10)">地图逆时针旋转</el-button>
84 </div> --> 84 </div> -->
85 85
86 - <div v-if="log_lnglat" style="position: fixed; top: 5rem; left: 1rem; color: black; background-color: white; padding: 1rem;"> 86 + <div v-if="log_lnglat" style="position: fixed; top: 8rem; left: 1rem; color: black; background-color: white; padding: 1rem;">
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 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>
88 </div> 88 </div>
89 89
...@@ -367,20 +367,20 @@ imageLayer.value.setBounds(bounds.value); ...@@ -367,20 +367,20 @@ imageLayer.value.setBounds(bounds.value);
367 367
368 // ✅ 2. 缩放图片 368 // ✅ 2. 缩放图片
369 const scaleImage = (factor) => { 369 const scaleImage = (factor) => {
370 -const sw = bounds.value.getSouthWest(); 370 + const sw = bounds.value.getSouthWest();
371 -const ne = bounds.value.getNorthEast(); 371 + const ne = bounds.value.getNorthEast();
372 372
373 -const centerX = (sw.lng + ne.lng) / 2; 373 + const centerX = (sw.lng + ne.lng) / 2;
374 -const centerY = (sw.lat + ne.lat) / 2; 374 + const centerY = (sw.lat + ne.lat) / 2;
375 -const newWidth = (ne.lng - sw.lng) * factor; 375 + const newWidth = (ne.lng - sw.lng) * factor;
376 -const newHeight = (ne.lat - sw.lat) * factor; 376 + const newHeight = (ne.lat - sw.lat) * factor;
377 377
378 -bounds.value = new AMap.Bounds( 378 + bounds.value = new AMap.Bounds(
379 - [centerX - newWidth / 2, centerY - newHeight / 2], 379 + [centerX - newWidth / 2, centerY - newHeight / 2],
380 - [centerX + newWidth / 2, centerY + newHeight / 2] 380 + [centerX + newWidth / 2, centerY + newHeight / 2]
381 -); 381 + );
382 382
383 -imageLayer.value.setBounds(bounds.value); 383 + imageLayer.value.setBounds(bounds.value);
384 }; 384 };
385 385
386 // 旋转地图 386 // 旋转地图
...@@ -531,7 +531,7 @@ const onRatioBlur = () => { ...@@ -531,7 +531,7 @@ const onRatioBlur = () => {
531 531
532 .controls-container { 532 .controls-container {
533 position: absolute; 533 position: absolute;
534 - top: 5rem; 534 + top: 8rem;
535 right: 10px; 535 right: 10px;
536 display: flex; 536 display: flex;
537 flex-direction: column; 537 flex-direction: column;
......