feat(BDistrictLayer): add stroke-opacity and stroke-weight props

close #79
yue1123 · Aug 11, 2024 · 9a34d5b · 9a34d5b
1 parent b16f4ba
commit 9a34d5b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 12 deletions.
diff --git a/docs/examples/layer/districtLayer.vue b/docs/examples/layer/districtLayer.vue
@@ -13,11 +13,11 @@
 <script lang="ts" setup>
   import { DistrictType } from 'vue3-baidu-map-gl'
 
-  function handleMouseover(e) {
+  function handleMouseover(e: any) {
     e.currentTarget.setFillColor('#9169db')
   }
 
-  function handleMouseout(e) {
+  function handleMouseout(e: any) {
     e.currentTarget.setFillColor(e.currentTarget.style.fillColor)
   }
 </script>
diff --git a/docs/zh-CN/components/layer/district-layer.md b/docs/zh-CN/components/layer/district-layer.md
@@ -14,14 +14,16 @@ layer/districtLayer
 
 ## 静态组件 Props
 
-| 属性        | 说明             | 类型                            | 可选值 | 默认值                 |
-| ----------- | ---------------- | ------------------------------- | ------ | ---------------------- |
-| name        | 行政区名字       | `string`                        | -      | `required`             |
-| kind        | 行政区类型       | [`DistrictType`](#districttype) | -      | `DistrictType['AREA']` |
-| fillColor   | 填充颜色         | `string`                        | -      | `#fdfd27`              |
-| fillOpacity | 填充透明度       | `number`                        | -      | `1`                    |
-| strokeColor | 线条颜色         | `string`                        | -      | `#231cf8`              |
-| viewport    | 自动聚焦地图中心 | `boolean`                       | -      | `false`                |
+| 属性          | 说明             | 类型                            | 可选值 | 默认值                 | 版本                               |
+| ------------- | ---------------- | ------------------------------- | ------ | ---------------------- | ---------------------------------- |
+| name          | 行政区名字       | `string`                        | -      | `required`             |                                    |
+| kind          | 行政区类型       | [`DistrictType`](#districttype) | -      | `DistrictType['AREA']` |                                    |
+| fillColor     | 填充颜色         | `string`                        | -      | `#fdfd27`              |                                    |
+| fillOpacity   | 填充透明度       | `number`                        | -      | `1`                    |                                    |
+| strokeColor   | 描边线条颜色     | `string`                        | -      | `#231cf8`              |                                    |
+| strokeWeight  | 描边线条粗细     | `number`                        | -      | `1`                    | <Badge type="tip" text="^2.4.0" /> |
+| strokeOpacity | 描边线透明度     | `number`                        | -      | `1`                    | <Badge type="tip" text="^2.4.0" /> |
+| viewport      | 自动聚焦地图中心 | `boolean`                       | -      | `false`                |                                    |
 
 ## 动态组件 Props
 

diff --git a/packages/components/layer/district/index.vue b/packages/components/layer/district/index.vue
@@ -33,6 +33,16 @@
      * 线条颜色
      */
     strokeColor?: string
+    /**
+     * @default 1
+     * 描边线粗细
+     */
+    strokeWeight?: number
+    /**
+     * @default 1
+     * 描边线透明度
+     */
+    strokeOpacity?: number
     /**
      * @default false
      * 自动聚焦地图中心
@@ -51,22 +61,27 @@
     visible: true,
     fillColor: '#fdfd27',
     fillOpacity: 1,
+    strokeWeight: 1,
+    strokeOpacity: 1,
     strokeColor: '#231cf8',
     viewport: false
   })
   let districtLayer: BMapGL.DistrictLayer
   const vueEmits = defineEmits(['initd', 'unload', 'mouseover', 'mouseout', 'click'])
   const { ready } = useParentComponentEffect((map) => {
     if (!props.name) return error('BDistrictLayer', 'DistrictLayer props.name is required')
-    const { visible, name, kind, fillColor, fillOpacity, strokeColor, viewport } = props
+    const { visible, name, kind, fillColor, fillOpacity, strokeColor, strokeOpacity, strokeWeight, viewport } = props
     districtLayer = new BMapGL.DistrictLayer({
       name: `(${name})`,
       kind,
       fillColor,
       fillOpacity,
       strokeColor,
+      strokeOpacity,
+      strokeWeight,
       viewport
     })
+
     visible && map.addDistrictLayer(districtLayer)
 
     bindEvents(props, vueEmits, districtLayer)

diff --git a/types/BMapGL/layer.d.ts b/types/BMapGL/layer.d.ts
@@ -64,11 +64,13 @@ declare namespace BMapGL {
     kind: number
     fillColor: string
     fillOpacity: number
+    strokeOpacity: number
+    strokeWeight: number
     strokeColor: string
     viewport: boolean
   }
   class DistrictLayer extends TileLayer {
-    constructor(opts: DistrictLayerOptions)
+    constructor(opts: DistrictLayerOptions, callback?: (...args: any[]) => any)
   }
 }