From 1e2464a69200a0d48d64b2eb1f890cfb1af788e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E5=BC=80=E5=8D=8A=E4=BA=A9=E5=9C=B0?=
 <2572468699@qq.com>
Date: Thu, 15 Dec 2022 17:48:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=A1=8C=E6=94=BF?=
 =?UTF-8?q?=E5=8C=BA=E5=9B=BE=E5=B1=82=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/configs/sidebar.config.zh.ts  |  4 +
 docs/examples/layer/districtLayer.vue         | 22 ++++++
 docs/zh-CN/components/layer/district-layer.md | 41 ++++++++++
 packages/components.ts                        |  4 +-
 packages/components/index.ts                  |  1 +
 .../components/layer/district-layer/index.ts  |  2 +
 .../components/layer/district-layer/index.vue | 78 +++++++++++++++++++
 packages/utils/typescript.ts                  |  5 ++
 types/BMapGL/core.d.ts                        |  2 +
 types/BMapGL/layer.d.ts                       | 12 +++
 10 files changed, 170 insertions(+), 1 deletion(-)
 create mode 100644 docs/examples/layer/districtLayer.vue
 create mode 100644 docs/zh-CN/components/layer/district-layer.md
 create mode 100644 packages/components/layer/district-layer/index.ts
 create mode 100644 packages/components/layer/district-layer/index.vue

diff --git a/docs/.vitepress/configs/sidebar.config.zh.ts b/docs/.vitepress/configs/sidebar.config.zh.ts
index 6527dc96..6fc2792d 100644
--- a/docs/.vitepress/configs/sidebar.config.zh.ts
+++ b/docs/.vitepress/configs/sidebar.config.zh.ts
@@ -131,6 +131,10 @@ export const sidebarConfigZh = {
         {
           text: 'PanoramaCoverageLayer 全景图层',
           link: '/zh-CN/components/layer/panorama-coverage'
+        },
+        {
+          text: 'DistrictLayer 行政区图层',
+          link: '/zh-CN/components/layer/district-layer'
         }
       ]
     },
diff --git a/docs/examples/layer/districtLayer.vue b/docs/examples/layer/districtLayer.vue
new file mode 100644
index 00000000..72f3d189
--- /dev/null
+++ b/docs/examples/layer/districtLayer.vue
@@ -0,0 +1,22 @@
+<template>
+  <Map enable-scroll-wheel-zoom :zoom="9">
+    <DistrictLayer
+      @mouseover="handleMouseover"
+      @mouseout="handleMouseout"
+      viewport
+      :kind="DistrictType['AREA']"
+      name="北京市"
+    />
+  </Map>
+</template>
+
+<script lang="ts" setup>
+  import { DistrictType } from 'vue3-baidu-map-gl'
+  function handleMouseover(e) {
+    e.currentTarget.setFillColor('#9169db')
+  }
+
+  function handleMouseout(e) {
+    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
new file mode 100644
index 00000000..e30b6a1b
--- /dev/null
+++ b/docs/zh-CN/components/layer/district-layer.md
@@ -0,0 +1,41 @@
+# DistrictLayer 行政区图层 <Badge type="tip" text="^1.1.2" />
+
+在地图上显示行政区划分
+
+```ts
+import { DistrictLayer } from 'vue3-baidu-map-gl'
+```
+
+## 组件示例
+
+:::demo 渲染北京市行政区划分，绑定鼠标事件
+layer/districtLayer
+:::
+
+## 静态组件 Props
+
+| 属性        | 说明             | 类型                            | 可选值 | 默认值                 |
+| ----------- | ---------------- | ------------------------------- | ------ | ---------------------- |
+| name        | 行政区名字       | `string`                        | -      | `required`             |
+| kind        | 行政区类型       | [`DistrictType`](#districttype) | -      | `DistrictType['AREA']` |
+| fillColor   | 填充颜色         | `string`                        | -      | `#fdfd27`              |
+| fillOpacity | 填充透明度       | `number`                        | -      | `1`                    |
+| strokeColor | 线条颜色         | `string`                        | -      | `#231cf8`              |
+| viewport    | 自动聚焦地图中心 | `boolean`                       | -      | `false`                |
+
+## DistrictType
+
+| 值       | 说明    |
+| -------- | ------- |
+| PROVINCE | 省级    |
+| CITY     | 市级    |
+| AREA     | 县/区级 |
+
+## 组件事件
+
+| 事件名    | 说明                                       | 类型                        |
+| --------- | ------------------------------------------ | --------------------------- |
+| initd     | 组件初始化后，调用的方法，返回一个地图实例 | `{ map, BmapGL, instance }` |
+| unload    | 组件卸载时会调用此方法                     | -                           |
+| mouseover | 鼠标移入行政区域时触发此事件               | `{type, target}`            |
+| mouseout  | 鼠标移出行政区域时触发此事件               | `{type, target}`            |
diff --git a/packages/components.ts b/packages/components.ts
index 7e223877..f35ad606 100644
--- a/packages/components.ts
+++ b/packages/components.ts
@@ -19,6 +19,7 @@ import { Circle } from './components/overlay/circle/index'
 import { Prism } from './components/overlay/prism/index'
 import { GroundOverlay } from './components/overlay/ground-overlay/index'
 import { ContextMenu } from './components/contextMenu/index'
+import { DistrictLayer } from './components/layer/district-layer/index'
 
 export default [
   Map,
@@ -41,5 +42,6 @@ export default [
   ContextMenu,
   PanoramaControl,
   PanoramaCoverageLayer,
-  GroundOverlay
+  GroundOverlay,
+  DistrictLayer
 ]
diff --git a/packages/components/index.ts b/packages/components/index.ts
index e9f05686..9badf8f8 100644
--- a/packages/components/index.ts
+++ b/packages/components/index.ts
@@ -19,3 +19,4 @@ export * from './overlay/circle/index'
 export * from './overlay/prism/index'
 export * from './overlay/ground-overlay/index'
 export * from './contextMenu/index'
+export * from './layer/district-layer/index'
diff --git a/packages/components/layer/district-layer/index.ts b/packages/components/layer/district-layer/index.ts
new file mode 100644
index 00000000..dc8f1016
--- /dev/null
+++ b/packages/components/layer/district-layer/index.ts
@@ -0,0 +1,2 @@
+export { default as DistrictLayer } from './index.vue'
+export * from './index.vue'
diff --git a/packages/components/layer/district-layer/index.vue b/packages/components/layer/district-layer/index.vue
new file mode 100644
index 00000000..6567814a
--- /dev/null
+++ b/packages/components/layer/district-layer/index.vue
@@ -0,0 +1,78 @@
+<template></template>
+
+<script setup lang="ts">
+  import { defineProps, withDefaults } from 'vue'
+  import useLifeCycle from '../../../hooks/useLifeCycle'
+  import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
+  import { warn, type Callback, type DistrictType, bindEvents } from '../../../utils'
+  export interface DistrictLayerProps {
+    /**
+     * 行政区名字
+     */
+    name: string
+    /**
+     * @default 0
+     * 行政区类型
+     */
+    kind?: DistrictType
+    /**
+     * @default #fdfd27
+     * 填充颜色
+     */
+    fillColor?: string
+    /**
+     * @default 1
+     * 填充透明度
+     */
+    fillOpacity?: number
+    /**
+     * @default #231cf8
+     * 线条颜色
+     */
+    strokeColor?: string
+    /**
+     * @default false
+     * 自动聚焦地图中心
+     */
+    viewport?: boolean
+    onClick?: Callback
+    onDblclick?: Callback
+    onRightclick?: Callback
+    onRightdblclick?: Callback
+    onMousemove?: Callback
+    onMouseover?: Callback
+    onMouseout?: Callback
+  }
+  const { ready } = useLifeCycle()
+  const props = withDefaults(defineProps<DistrictLayerProps>(), {
+    kind: 0,
+    fillColor: '#fdfd27',
+    fillOpacity: 1,
+    strokeColor: '#231cf8',
+    viewport: false
+  })
+  let districtLayer: BMapGL.DistrictLayer
+  const vueEmits = defineEmits(['initd', 'unload', 'mouseover', 'mouseout', 'click'])
+  useBaseMapEffect((map) => {
+    if (!props.name) return warn('DistrictLayer props.name is required')
+    const { name, kind, fillColor, fillOpacity, strokeColor, viewport } = props
+    districtLayer = new BMapGL.DistrictLayer({
+      name: `(${name})`,
+      kind,
+      fillColor,
+      fillOpacity,
+      strokeColor,
+      viewport
+    })
+    map.addDistrictLayer(districtLayer)
+
+    bindEvents(props, vueEmits, districtLayer)
+    ready(map, districtLayer)
+    return () => map.removeDistrictLayer(districtLayer)
+  })
+</script>
+<script lang="ts">
+  export default {
+    name: 'BDistrictLayer'
+  }
+</script>
diff --git a/packages/utils/typescript.ts b/packages/utils/typescript.ts
index 9c12e818..32e02462 100644
--- a/packages/utils/typescript.ts
+++ b/packages/utils/typescript.ts
@@ -11,3 +11,8 @@ export interface _Point {
 export type Point = _Point | BMapGL.Point
 export type ControlAnchor = _ControlAnchor
 export type StrokeStyle = 'solid' | 'dashed' | 'dotted'
+export enum DistrictType {
+  'PROVINCE' = 0,
+  'CITY' = 1,
+  'AREA' = 2
+}
diff --git a/types/BMapGL/core.d.ts b/types/BMapGL/core.d.ts
index b54a41cf..d71d216e 100644
--- a/types/BMapGL/core.d.ts
+++ b/types/BMapGL/core.d.ts
@@ -249,6 +249,8 @@ declare namespace BMapGL {
     addTileLayer(tileLayer: TileLayer): void
     removeTileLayer(tilelayer: TileLayer): void
     getTileLayer(mapType: string): TileLayer
+    removeDistrictLayer(districtLayer: BMapGL.DistrictLayer): void
+    addDistrictLayer(districtLayer: BMapGL.DistrictLayer): void
     /**
      * 启动视角动画
      */
diff --git a/types/BMapGL/layer.d.ts b/types/BMapGL/layer.d.ts
index 116f92f4..e2723896 100644
--- a/types/BMapGL/layer.d.ts
+++ b/types/BMapGL/layer.d.ts
@@ -58,6 +58,18 @@ declare namespace BMapGL {
     pointDensityType?: PointDensityType
   }
   type PointDensityType = number
+
+  interface DistrictLayerOptions {
+    name: string
+    kind: number
+    fillColor: string
+    fillOpacity: number
+    strokeColor: string
+    viewport: boolean
+  }
+  class DistrictLayer extends TileLayer {
+    constructor(opts: DistrictLayerOptions)
+  }
 }
 
 declare const BMAP_POINT_DENSITY_HIGH: BMapGL.PointDensityType