fix 新增图片透明度调整

 <!--
 <!--
  * @Date: 2025-01-22 11:40:12
  * @Date: 2025-01-22 11:40:12
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-02-26 09:54:08
+ * @LastEditTime: 2025-02-26 17:35:21
  * @FilePath: /map-demo/src/views/mapCutter.vue
  * @FilePath: /map-demo/src/views/mapCutter.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -111,6 +111,12 @@
         <button class="z-button" @click="rotateMap(10)">↺</button>
         <button class="z-button" @click="rotateMap(10)">↺</button>
         <button class="z-button" @click="rotateMap(-10)">↻</button>
         <button class="z-button" @click="rotateMap(-10)">↻</button>
       </div>
       </div>
+
+      <!-- 透明度控制 -->
+      <div class="opacity-control">
+        <div style="margin-bottom: 1rem;">透明度: {{ imageOpacity }}%</div>
+        <van-slider v-model="imageOpacity" :min="0" :max="100" @change="handleOpacityChange" style="width: 200px;" />
+      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -276,6 +282,14 @@ function handleImageUpload(event) {
   event.target.value = "";
   event.target.value = "";
 }
 }
 
 
+const imageOpacity = ref(60); // 默认透明度为60%
+
+const handleOpacityChange = (value) => {
+  if (imageLayer.value) {
+    imageLayer.value.setOpacity(value / 100);
+  }
+};
+
 async function addImageToMap(url) {
 async function addImageToMap(url) {
   if (imageLayer.value) {
   if (imageLayer.value) {
     map.value.remove(imageLayer.value);
     map.value.remove(imageLayer.value);
@@ -332,7 +346,7 @@ async function addImageToMap(url) {
     url: url,
     url: url,
     bounds: bounds.value,
     bounds: bounds.value,
     zooms: [17, 19],
     zooms: [17, 19],
-    opacity: 0.6 // 透明度 (0 完全透明, 1 完全不透明)
+    opacity: imageOpacity.value / 100 // 使用响应式的透明度值
   });
   });
 
 
   map.value.add(imageLayer.value);
   map.value.add(imageLayer.value);
@@ -556,6 +570,12 @@ const onRatioBlur = () => {
   border-radius: 10px;
   border-radius: 10px;
 }
 }
 
 
+.opacity-control {
+  background: #f0f0f0;
+  padding: 1rem 0;
+  text-align: center;
+}
+
 .direction-control {
 .direction-control {
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;