feat: 导出内部 useDefaultMarkerIcons hooks

yue1123 · Dec 17, 2022 · d7f168b · d7f168b
1 parent b0a4931
commit d7f168b
Show file tree

Hide file tree

Showing 7 changed files with 1,358 additions and 42 deletions.
diff --git a/docs/.vitepress/configs/sidebar.config.zh.ts b/docs/.vitepress/configs/sidebar.config.zh.ts
@@ -146,6 +146,10 @@ export const sidebarConfigZh = {
           text: 'usePoint 地图实例点',
           link: '/zh-CN/hooks/usePoint'
         },
+        {
+          text: 'useDefaultMarkerIcons 图标',
+          link: '/zh-CN/hooks/useDefaultMarkerIcons'
+        },
         {
           text: 'useIpLocation Ip定位',
           link: '/zh-CN/hooks/useIpLocation'

diff --git a/docs/zh-CN/hooks/useDefaultMarkerIcons.md b/docs/zh-CN/hooks/useDefaultMarkerIcons.md
@@ -0,0 +1,80 @@
+# useDefaultMarkerIcons
+
+通过该 hooks 可获取一些内置的地图图标(BMapGL.Icon)。
+
+```ts
+import { useDefaultMarkerIcons } from 'vue3-baidu-map-gl'
+```
+
+> 参考: [marker图标可选值](/zh-CN/components/overlay/marker#默认图标可选值)
+
+## 用法
+
+```ts
+const icons = useDefaultMarkerIcons()
+```
+
+:::tip
+该 hooks 依赖于 `BMapGL` ，所以需要在 `Map` 组件初始化完毕调用 `set` 方法后数据才可用
+:::
+
+### 参数
+
+无
+
+### 引用
+
+| 引用  | 描述                                    | 类型                                      |
+| ----- | --------------------------------------- | ----------------------------------------- |
+| icons | 所有内置的 `BMapGL.Icon` 实例对象键值对 | `Record<DefaultMarkerIcons, BMapGL.Icon>` |
+
+## 代码示例
+
+```vue
+<template>
+  <Map @initd="handleInitd"></Map>
+</template>
+
+<script setup lang="ts">
+  import { useAreaBoundary } from 'vue3-baidu-map-gl'
+
+  function handleInitd() {
+    const icons = useDefaultMarkerIcons()
+    // ...
+  }
+</script>
+```
+
+## TS 类型定义参考
+
+```ts
+export declare type DefaultMarkerIcons =
+  | 'simple_red'
+  | 'simple_blue'
+  | 'loc_red'
+  | 'loc_blue'
+  | 'start'
+  | 'end'
+  | 'location'
+  | 'red1'
+  | 'red2'
+  | 'red3'
+  | 'red4'
+  | 'red5'
+  | 'red6'
+  | 'red7'
+  | 'red8'
+  | 'red9'
+  | 'red10'
+  | 'blue1'
+  | 'blue2'
+  | 'blue3'
+  | 'blue4'
+  | 'blue5'
+  | 'blue6'
+  | 'blue7'
+  | 'blue8'
+  | 'blue9'
+  | 'blue10'
+export declare function useDefaultMarkerIcons(): Record<DefaultMarkerIcons, BMapGL.Icon>
+```
diff --git a/packages/components/overlay/marker/index.vue b/packages/components/overlay/marker/index.vue
@@ -5,35 +5,7 @@
   import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
   import { bindEvents, Callback, isString, callWhenDifferentValue, isDef, Point } from '../../../utils/index'
   import useLifeCycle from '../../../hooks/useLifeCycle'
-  import useMarkerDefaultIcons from '../../../hooks/useMarkerDefaultIcons'
-  export type MarkerDefaultIcons =
-    | 'simple_red'
-    | 'simple_blue'
-    | 'loc_red'
-    | 'loc_blue'
-    | 'start'
-    | 'end'
-    | 'location'
-    | 'red1'
-    | 'red2'
-    | 'red3'
-    | 'red4'
-    | 'red5'
-    | 'red6'
-    | 'red7'
-    | 'red8'
-    | 'red9'
-    | 'red10'
-    | 'blue1'
-    | 'blue2'
-    | 'blue3'
-    | 'blue4'
-    | 'blue5'
-    | 'blue6'
-    | 'blue7'
-    | 'blue8'
-    | 'blue9'
-    | 'blue10'
+  import { useDefaultMarkerIcons, DefaultMarkerIcons } from '../../../hooks/useDefaultMarkerIcons'
 
   export interface MarkerOffset {
     x: number
@@ -64,7 +36,7 @@
     /**
      * 标注所用的图标对象
      */
-    icon?: MarkerCustomIcon | MarkerDefaultIcons
+    icon?: MarkerCustomIcon | DefaultMarkerIcons
     /**
      * 显示层级
      */
@@ -210,7 +182,7 @@
 
   // 获取图标配置
   function getIconConfig(): BMapGL.Icon {
-    const defaultIcons = useMarkerDefaultIcons()
+    const defaultIcons = useDefaultMarkerIcons()
     const { icon } = props
     if (isString(icon) && defaultIcons[icon as string]) {
       return defaultIcons[icon as string]

diff --git a/packages/hooks/index.ts b/packages/hooks/index.ts
@@ -7,3 +7,4 @@ export * from './useBrowserLocation'
 export * from './useAddressGeocoder'
 export * from './usePointGeocoder'
 export * from './usePointConvertor'
+export * from './useDefaultMarkerIcons'
diff --git a/packages/hooks/useMarkerDefaultIcons.ts → packages/hooks/useDefaultMarkerIcons.ts b/packages/hooks/useMarkerDefaultIcons.ts → packages/hooks/useDefaultMarkerIcons.ts
@@ -1,4 +1,4 @@
-export type MarkerDefaultIcons =
+export type DefaultMarkerIcons =
   | 'simple_red'
   | 'simple_blue'
   | 'loc_red'
@@ -27,9 +27,9 @@ export type MarkerDefaultIcons =
   | 'blue9'
   | 'blue10'
 
-let icons: Record<MarkerDefaultIcons, BMapGL.Icon> | null = null
+let icons: Record<DefaultMarkerIcons, BMapGL.Icon> | null = null
 
-export default function useMarkerDefaultIcons(): Record<MarkerDefaultIcons, BMapGL.Icon> {
+export function useDefaultMarkerIcons(): Record<DefaultMarkerIcons, BMapGL.Icon> {
   if (icons !== null) return icons
   const defaultIconUrl = '//mapopen.bj.bcebos.com/cms/react-bmap/markers_new2x_fbb9e99.png'
   icons = {
@@ -61,7 +61,7 @@ export default function useMarkerDefaultIcons(): Record<MarkerDefaultIcons, BMap
       imageOffset: new BMapGL.Size(248 / 2, 466 / 2),
       imageSize: new BMapGL.Size(600 / 2, 600 / 2)
     })
-  } as Record<MarkerDefaultIcons, BMapGL.Icon>
+  } as Record<DefaultMarkerIcons, BMapGL.Icon>
 
   for (let i = 1; i <= 10; i++) {
     icons['red' + i] = new BMapGL.Icon(defaultIconUrl, new BMapGL.Size(42 / 2, 66 / 2), {