feat: 增加行政区图层组件

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'
         }
       ]
     },

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>

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}`            |

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
 ]

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'

packages/components/layer/district-layer/index.ts

@@ -0,0 +1,2 @@
+export { default as DistrictLayer } from './index.vue'
+export * from './index.vue'

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>

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
+}

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
     /**
      * 启动视角动画
      */

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