完成设计器 放大 缩小 百分比显示功能

src/components/AMap/src/AMapDesigner/index.vue

@@ -25,17 +25,17 @@
       <ATooltip title="放大"
                 placement="bottom"
                 :arrowPointAtCenter="true">
-        <a-button @click="">
+        <a-button :disabled="mapState.defaultZoom >= 9" @click="handleMapZoomIn">
           <Icon icon="fa6-solid:magnifying-glass-plus" size="13"/>
         </a-button>
       </ATooltip>
       <a-button>
-        {{ Math.ceil(mapState.defaultZoom * 10 * 10) + "%" }}
+        {{ Math.ceil(mapState.defaultZoom * 10 * 1.1) + "%" }}
       </a-button>
       <ATooltip title="缩小"
                 placement="bottom"
                 :arrowPointAtCenter="true">
-        <a-button @click="">
+        <a-button :disabled="mapState.defaultZoom <= 0" @click="handleMapZoomOut">
           <Icon icon="fa6-solid:magnifying-glass-minus" size="13"/>
         </a-button>
       </ATooltip>
@@ -100,7 +100,7 @@
   import AButton from "/@/components/Button/src/BasicButton.vue";
   import { Icon } from '/@/components/Icon';
   import { useUserStore } from "/@/store/modules/user";
-  import { split } from 'lodash-es';
+  import { split, divide, subtract } from 'lodash-es';
   import componentSetting from '/@/settings/componentSetting';
 
   /** 类型规范统一声明定义区域 */
@@ -123,7 +123,10 @@
     orgList: MapCommonType[];
     mapTask: Recordable[];
     mapLogisticPoint: Recordable[];
-    mapConfig: Recordable;
+    mapConfig: {
+      amapKey: string;
+      options: Recordable;
+    };
   }
 
   const mapProps = defineProps({
@@ -177,8 +180,9 @@
         viewMode:'3D',
         resizeEnable: true,
         center: split((userStore.getUserInfo.mapCenter || mapDesigner.mapCenter), ',', 2),
-        zoom: 17,
+        zoom: mapDesigner.defaultZoom,
-        keyboardEnable: true
+        keyboardEnable: true,
+        zooms: [2, 20]
       }
     }
   });
@@ -263,6 +267,9 @@
           })
         );
       });
+      map.on('zoomchange', ctx => {
+        mapState.defaultZoom = subtract(divide(map.getZoom(),2), 1);
+      });
 
       // 医检机构集群标记点
       orgMarkerCluster = new AMap.MarkerCluster(map, [], {
@@ -410,9 +417,9 @@
         radius: 14000,
         borderWeight: 3,
         strokeColor: '#3600ff',
-        strokeOpacity: 0.2,
+        strokeOpacity: 0,
         strokeWeight: 6,
-        fillOpacity: 0.4,
+        fillOpacity: 0,
         strokeStyle: 'dashed',
         strokeDasharray: [8, 8],
         fillColor: '#1791fc',
@@ -422,7 +429,7 @@
 
       // todo: 修改
 
-      // 构造路线导航类
+      // 构造路线导航类`
       driving = new AMap.Driving({
         map: map,
         panel: instance.refs.mapPanel
@@ -522,10 +529,21 @@
     mapPointOpenModal(true, { driving });
   }
 
+  /** 处理地图放大 */
+  function handleMapZoomIn() {
+    map.zoomIn();
+  }
+
+  /** 处理地图缩小 */
+  function handleMapZoomOut() {
+    map.zoomOut();
+  }
+
   /** 处理地图重置 */
   function handleMapReset() {
-    // 清除地图扫描圈
+    // 清除地图
-    map.remove(scanCourierUserCircleRange || {});
+    map.resize();
+    map.clearMap();
     // 清除表单数据
     formElRef.value.resetFields();
     formElRef.value.clearValidate();
@@ -533,7 +551,8 @@
     mapState.mapTask = [];
     mapState.mapLogisticPoint = [];
     // 重置地图画布
-    map.setZoomAndCenter(17, mapState.mapConfig.center);
+    map.setZoomAndCenter(mapState.mapConfig.options.zoom, mapState.mapConfig.options.center);
+    mapState.defaultZoom = mapState.mapConfig.options.zoom;
   }
 
 </script>

src/components/AMap/src/amap.data.ts

@@ -28,12 +28,6 @@ export const smallHospitalMapList: mapType[] = [
   {id: '003', title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, notify: true}
 ];
 
-export const specimenMapList: mapType[] = [
-  {id: '001', title: '收样员:小狗', orientation: 0, lng: 112.915897, lat: 28.295506},
-  {id: '002', title: '收样员:小红', orientation: 0, lng: 112.914481, lat: 28.294977},
-  {id: '003', title: '收样员:小明', orientation: 0, lng: 112.913864, lat: 28.295114}
-];
-
 export const columns: BasicColumn[] = [
   {
     title: '任务名称',

src/settings/componentSetting.ts

@@ -48,6 +48,8 @@ export default {
   // 地图设计器设置
   mapDesigner: {
     // 默认中心点
-    mapCenter: '112.919043, 28.288623'
+    mapCenter: '112.919043, 28.288623',
+    // 默认缩放
+    defaultZoom: 17
   }
 };