Showing
1 changed file
with
19 additions
and
19 deletions
| 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>目标地图经纬度: </div> | 20 | + <div>地图中心坐标: </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>地图层级: </div> | 29 | <div>地图层级: </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>上传图片基点: </div> | 41 | + <div>上传图片左下角坐标: </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>上传图片比例: </div> | 55 | + <div>上传图片缩放比例: </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 }} <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 }} <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; | ... | ... |
-
Please register or login to post a comment