feat: scale 支持visible属性

yue1123 · Jun 19, 2023 · ffccbcc · ffccbcc
1 parent bf0c0ad
commit ffccbcc
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 12 deletions.
diff --git a/docs/zh-CN/components/control/scale.md b/docs/zh-CN/components/control/scale.md
@@ -21,11 +21,10 @@ control/scale
 
 ## 动态组件 Props
 
-动态绑定的值变更，会自动更新到地图中
-
-| 属性 | 说明         | 类型     | 可选值        | 默认值             |
-| ---- | ------------ | -------- | ------------- | ------------------ |
-| unit | 比例尺单位制 | `string` | [unit](#unit) | `BMAP_UNIT_METRIC` |
+| 属性    | 说明         | 类型      | 可选值        | 默认值             | 版本                               |
+| ------- | ------------ | --------- | ------------- | ------------------ | ---------------------------------- |
+| unit    | 比例尺单位制 | `string`  | [unit](#unit) | `BMAP_UNIT_METRIC` |                                    |
+| visible | 是否显示     | `boolean` | -             | `true`             | <Badge type="tip" text="^2.1.4" /> |
 
 ## anchor
 

diff --git a/packages/components/control/scale/index.vue b/packages/components/control/scale/index.vue
@@ -21,34 +21,47 @@
      * 比例尺单位制
      */
     unit?: LengthUnit
+    /**
+     * 是否可见
+     */
+    visible?: boolean
   }
   const { ready } = useLifeCycle()
   const props = withDefaults(defineProps<ScaleProps>(), {
     anchor: 'BMAP_ANCHOR_BOTTOM_LEFT',
     offset: () => ({ x: 83, y: 18 }),
-    unit: 'BMAP_UNIT_METRIC'
+    unit: 'BMAP_UNIT_METRIC',
+    visible: true
   })
   let scaleCtrl: BMapGL.ScaleControl
   defineEmits(['initd', 'unload'])
   useBaseMapEffect((map) => {
+    const { visible, offset, anchor } = props
     scaleCtrl = new BMapGL.ScaleControl({
-      offset: new BMapGL.Size(props.offset.x, props.offset.y),
-      anchor: window[props.anchor]
+      offset: new BMapGL.Size(offset.x, offset.y),
+      anchor: window[anchor]
     })
+    visible && map.addControl(scaleCtrl)
     setUnit()
-    map.addControl(scaleCtrl)
     ready(map, scaleCtrl)
+    watch(
+      () => props.visible,
+      (n) => {
+        map[n ? 'addControl' : 'removeControl'](scaleCtrl)
+      }
+    )
     return () => map.removeControl(scaleCtrl)
   })
   // 监听比例尺单位变化
   watch(() => props.unit, setUnit)
+  defineOptions({
+    name: 'BScale'
+  })
+
   /**
    * 设置比例尺单位制
    */
   function setUnit() {
     scaleCtrl.setUnit(window[props.unit])
   }
-  defineOptions({
-    name: 'BScale'
-  })
 </script>