hookehuyr

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

...@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' { ...@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
15 ElButton: typeof import('element-plus/es')['ElButton'] 15 ElButton: typeof import('element-plus/es')['ElButton']
16 ElInput: typeof import('element-plus/es')['ElInput'] 16 ElInput: typeof import('element-plus/es')['ElInput']
17 ElOption: typeof import('element-plus/es')['ElOption'] 17 ElOption: typeof import('element-plus/es')['ElOption']
18 + ElProgress: typeof import('element-plus/es')['ElProgress']
18 ElSelect: typeof import('element-plus/es')['ElSelect'] 19 ElSelect: typeof import('element-plus/es')['ElSelect']
19 Floor: typeof import('./src/components/Floor/index.vue')['default'] 20 Floor: typeof import('./src/components/Floor/index.vue')['default']
20 InfoPopup: typeof import('./src/components/InfoPopup.vue')['default'] 21 InfoPopup: typeof import('./src/components/InfoPopup.vue')['default']
......
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 10:05:50 4 + * @LastEditTime: 2025-02-08 10:47:47
5 * @FilePath: /map-demo/src/views/mapCutter.vue 5 * @FilePath: /map-demo/src/views/mapCutter.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -43,6 +43,12 @@ ...@@ -43,6 +43,12 @@
43 placeholder="输入右上角的经纬度" 43 placeholder="输入右上角的经纬度"
44 @blur="onRTRangeBlur" 44 @blur="onRTRangeBlur"
45 /> --> 45 /> -->
46 + <div>上传图片比例:&nbsp;</div>
47 + <el-input
48 + v-model="img_ratio"
49 + style="width: 240px"
50 + placeholder="输入上传图片比例"
51 + />
46 </div> 52 </div>
47 <div v-if="showUpload"> 53 <div v-if="showUpload">
48 <input type="file" @change="handleImageUpload" /> 54 <input type="file" @change="handleImageUpload" />
...@@ -84,6 +90,7 @@ const mapRotation = ref(0); // 存储地图旋转角度 ...@@ -84,6 +90,7 @@ const mapRotation = ref(0); // 存储地图旋转角度
84 const zooms = ref([17, 19]); 90 const zooms = ref([17, 19]);
85 91
86 const map_zoom = ref(17) 92 const map_zoom = ref(17)
93 +const img_ratio = ref(0.5); // 图片缩放比例
87 94
88 const zoom_options = [ 95 const zoom_options = [
89 { 96 {
...@@ -203,14 +210,14 @@ async function addImageToMap(url) { ...@@ -203,14 +210,14 @@ async function addImageToMap(url) {
203 let lat2, lng2; 210 let lat2, lng2;
204 if (mapLngWidth / mapLatHeight > aspectRatio) { 211 if (mapLngWidth / mapLatHeight > aspectRatio) {
205 // 地图太宽了,需要基于高度调整宽度 212 // 地图太宽了,需要基于高度调整宽度
206 - const latHeight = mapLatHeight * 0.5; // 设定图片占地图的比例(可以调整) 213 + const latHeight = mapLatHeight * img_ratio.value; // 设定图片占地图的比例(可以调整)
207 const lngWidth = latHeight * aspectRatio; 214 const lngWidth = latHeight * aspectRatio;
208 215
209 lat2 = lat1 + latHeight; 216 lat2 = lat1 + latHeight;
210 lng2 = lng1 + lngWidth; 217 lng2 = lng1 + lngWidth;
211 } else { 218 } else {
212 // 地图太高了,需要基于宽度调整高度 219 // 地图太高了,需要基于宽度调整高度
213 - const lngWidth = mapLngWidth * 0.5; // 设定图片占地图的比例(可以调整) 220 + const lngWidth = mapLngWidth * img_ratio.value; // 设定图片占地图的比例(可以调整)
214 const latHeight = lngWidth / aspectRatio; 221 const latHeight = lngWidth / aspectRatio;
215 222
216 lat2 = lat1 + latHeight; 223 lat2 = lat1 + latHeight;
......