feat: circle 支持visible属性

yue1123 · Jun 19, 2023 · aedd28b · aedd28b
1 parent b3037e5
commit aedd28b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/docs/zh-CN/components/overlay/circle.md b/docs/zh-CN/components/overlay/circle.md
@@ -22,18 +22,19 @@ overlay/circle
 
 ## 动态组件 Props
 
-| 属性            | 说明                                        | 类型                          | 可选值                    | 默认值     |
-| --------------- | ------------------------------------------- | ----------------------------- | ------------------------- | ---------- |
-| center          | 圆形中心点经纬度                            | `{ lng: number, lat: number}` | -                         | `required` |
-| radius          | 圆形的半径，单位为米                        | `number`                      | -                         | `required` |
-| strokeColor     | 描边的颜色，同 CSS 颜色                     | `string`                      | -                         | `#000`     |
-| strokeOpacity   | 描边的透明度，范围 0-1                      | `number`                      | `0-1 `                    | 1          |
-| fillColor       | 面填充颜色，同 CSS 颜色                     | `string`                      | -                         | `#fff`     |
-| fillOpacity     | 面填充的透明度，范围 0-1                    | `number`                      | `0-1 `                    | `0.3 `     |
-| strokeWeight    | 描边的宽度，单位为像素                      | `number`                      | -                         | `2 `       |
-| strokeStyle     | 描边的样式，为实线、虚线、或者点状线        | `string`                      | `solid / dashed / dotted` | `solid `   |
-| enableMassClear | 是否在调用 `map.clearOverlays` 清除此覆盖物 | `boolean`                     | -                         | `true `    |
-| enableEditing   | 是否启用线编辑                              | `boolean`                     | -                         | `false `   |
+| 属性            | 说明                                        | 类型                          | 可选值                    | 默认值     | 版本                               |
+| --------------- | ------------------------------------------- | ----------------------------- | ------------------------- | ---------- | ---------------------------------- |
+| center          | 圆形中心点经纬度                            | `{ lng: number, lat: number}` | -                         | `required` | -                                  |
+| radius          | 圆形的半径，单位为米                        | `number`                      | -                         | `required` | -                                  |
+| strokeColor     | 描边的颜色，同 CSS 颜色                     | `string`                      | -                         | `#000`     | -                                  |
+| strokeOpacity   | 描边的透明度，范围 0-1                      | `number`                      | `0-1 `                    | 1          | -                                  |
+| fillColor       | 面填充颜色，同 CSS 颜色                     | `string`                      | -                         | `#fff`     | -                                  |
+| fillOpacity     | 面填充的透明度，范围 0-1                    | `number`                      | `0-1 `                    | `0.3 `     | -                                  |
+| strokeWeight    | 描边的宽度，单位为像素                      | `number`                      | -                         | `2 `       | -                                  |
+| strokeStyle     | 描边的样式，为实线、虚线、或者点状线        | `string`                      | `solid / dashed / dotted` | `solid `   | -                                  |
+| enableMassClear | 是否在调用 `map.clearOverlays` 清除此覆盖物 | `boolean`                     | -                         | `true `    | -                                  |
+| enableEditing   | 是否启用线编辑                              | `boolean`                     | -                         | `false `   | -                                  |
+| visible         | 是否显示                                    | `boolean`                     | -                         | `true`     | <Badge type="tip" text="^2.1.4" /> |
 
 ## 组件事件
 

diff --git a/packages/components/overlay/circle/index.vue b/packages/components/overlay/circle/index.vue
@@ -67,6 +67,10 @@
      * 是否进行跨经度180度裁剪，绘制跨精度180时为了优化效果，可以设置成false，默认为true
      */
     clip?: boolean
+    /**
+     * 是否可见
+     */
+    visible?: boolean
     onClick?: Callback
     onDblclick?: Callback
     onMousedown?: Callback
@@ -87,7 +91,8 @@
     enableEditing: false,
     enableClicking: true,
     geodesic: false,
-    clip: true
+    clip: true,
+    visible: true
   })
   const vueEmits = defineEmits([
     'initd',
@@ -123,7 +128,8 @@
         enableEditing,
         enableClicking,
         geodesic,
-        clip
+        clip,
+        visible
       } = props
       const centerPoint = new BMapGL.Point(center.lng, center.lat)
       circle = new BMapGL.Circle(centerPoint, radius, {
@@ -139,7 +145,7 @@
         fillOpacity,
         fillColor
       })
-      map.addOverlay(circle)
+      visible && map.addOverlay(circle)
       bindEvents(props, vueEmits, circle)
       ready(map, circle)
     }
@@ -156,11 +162,19 @@
     watch(() => props.strokeStyle, setStrokeStyle)
     watch(() => props.enableMassClear, setMassClear)
     watch(() => props.enableEditing, setEditing)
-
+    watch(
+      () => props.visible,
+      (n) => {
+        map[n ? 'addOverlay' : 'removeOverlay'](circle)
+      }
+    )
     return cal
   })
 
   provide('getOverlayInstance', () => circle)
+  defineOptions({
+    name: 'BCircle'
+  })
 
   function setRadius(radius: number): void {
     circle.setRadius(radius)
@@ -194,7 +208,4 @@
   function setEditing(enableEditing: boolean): void {
     enableEditing ? circle!.enableEditing() : circle!.disableEditing()
   }
-  defineOptions({
-    name: 'BCircle'
-  })
 </script>