feat: 增加 copyright 控件

docs/.vitepress/sidebar.config.zh.ts

@@ -43,6 +43,10 @@ const sidebarConfig = {
 					text: 'Navigation3d 3D视角导航控件',
 					link: '/zh/control/navigation3d'
 				},
+				{
+					text: 'Copyright 版权',
+					link: '/zh/control/copyright'
+				},
 				{
 					text: 'Scale 比例尺控件',
 					link: '/zh/control/scale'

docs/zh/control/copyright.md

@@ -0,0 +1,79 @@
+# Copyright 版权控件
+地图3D控件，可以控制地图的旋转、倾斜，默认位于地图右下角
+
+```ts
+import { Copyright } from 'vue3-baidu-map-gl'
+```
+
+
+
+## 组件示例
+多个相同位置版权控件会自动排列，避免重叠
+
+<div>
+<Map
+  height="400px"
+>
+  <Copyright anchor="BMAP_ANCHOR_TOP_RIGHT" v-if="show">
+    <div style="display: flex; align-items:flex-end;">
+      <img width='40' src="./../../dist/logo.png" alt="">
+      @我是自定义版权控件呀
+    </div>
+  </Copyright>
+  <Copyright anchor="BMAP_ANCHOR_BOTTOM_RIGHT">
+      <h3>动态内容{{count}}</h3>
+  </Copyright>
+  <Copyright anchor="BMAP_ANCHOR_BOTTOM_RIGHT">
+      <h3>动态内容{{count}}</h3>
+  </Copyright>
+</Map>
+<button class="myButton no-m-b" @click="toggle">{{ show ? '隐藏': '显示' }}右上角版权</button>  
+</div>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+const count = ref<number>(1)
+const show = ref<boolean>(true)
+function toggle(){     
+  show.value = !show.value
+} 
+setInterval(() => {
+  count.value ++ 
+}, 1000); 
+</script>
+
+
+::: details 点击查看代码
+```html
+<Map
+:minZoom="3" 
+height="400px"
+>
+  <Copyright />
+</Map>
+
+<script setup lang="ts">
+import { Map, Copyright } from 'vue3-baidu-map-gl'
+</script>
+```
+:::
+
+::: warning
+如果动态内容中有图片会导致闪烁，建议将图片和文字拆分成两个自定义版权
+:::
+
+## 静态组件 Props
+| 参数   | 说明           | 类型                      | 可选值            | 默认值                    |
+| ------ | -------------- | ------------------------- | ----------------- | ------------------------- |
+| anchor | 控件的停靠位置 | `string`                  | [anchor](#anchor) | `BMAP_ANCHOR_BOTTOM_LEFT` |
+| offset | 控件的偏移值   | `{x: number, y: number }` |                   | `{ x: 83, y: 18 }`        |
+
+
+## anchor
+| 值                       | 说明 |
+| ------------------------ | ---- |
+| BMAP_ANCHOR_TOP_LEFT     | 左上 |
+| BMAP_ANCHOR_TOP_RIGHT    | 右上 |
+| BMAP_ANCHOR_BOTTOM_LEFT  | 左下 |
+| BMAP_ANCHOR_BOTTOM_RIGHT | 右下 |
+

package/components/control/bm-copyright/copyrightControlPosCacheMap.ts

@@ -0,0 +1,3 @@
+const copyrightControlPosCacheMap: Record<string, BMapGL.CopyrightControl> = {} as const
+
+export default copyrightControlPosCacheMap

package/components/control/bm-copyright/index.vue

@@ -0,0 +1,85 @@
+<template>
+	<div ref="copyrightContainer" style="display: none">
+		<slot></slot>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { defineProps, withDefaults, defineEmits, onMounted, ref, getCurrentInstance, onUpdated } from 'vue'
+	import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
+	import useLife from '../../../hooks/useLife'
+	import copyrightControlPosCacheMap from './copyrightControlPosCacheMap'
+	export interface CopyrightControlOptions {
+		/**
+		 * 控件的停靠位置
+		 */
+		anchor?: _ControlAnchor
+		/**
+		 * 控件的偏移值
+		 */
+		offset?: {
+			x: number
+			y: number
+		}
+	}
+	const props = withDefaults(defineProps<CopyrightControlOptions>(), {
+		anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT',
+		offset: () => ({ x: 83, y: 18 })
+	})
+	const { ready } = useLife()
+	const { anchor, offset } = props
+	const copyrightContainer = ref<HTMLDivElement>()
+	let copyrightControl: BMapGL.CopyrightControl
+	const uid = getCurrentInstance()?.uid
+
+	defineEmits(['initd', 'unload'])
+	onMounted(() => {
+		useBaseMapEffect((map: BMapGL.Map) => {
+			if (!copyrightContainer.value) return
+			let mapBounds = map.getBounds()
+			// 同一位置的 copyright 应该调用 addCopyright,防止多个 copyright 重叠
+			if (!(copyrightControl = copyrightControlPosCacheMap[anchor])) {
+				copyrightControl = new BMapGL.CopyrightControl({
+					offset: new BMapGL.Size(offset.x, offset.y),
+					anchor: window[anchor]
+				})
+				copyrightControlPosCacheMap[anchor] = copyrightControl
+				map.addControl(copyrightControl)
+			}
+			copyrightControl.addCopyright({
+				id: uid,
+				content: copyrightContainer.value.innerHTML,
+				bounds: mapBounds
+			})
+
+			ready(map)
+			return () => {
+				const cacheCopyright = copyrightControlPosCacheMap[anchor]
+				const getCopyrightCollection = cacheCopyright?.getCopyrightCollection?.bind(cacheCopyright)
+
+				if (getCopyrightCollection && getCopyrightCollection()?.length > 1) {
+					cacheCopyright.removeCopyright(uid!)
+				} else {
+					map.removeControl(cacheCopyright)
+					Reflect.deleteProperty(copyrightControlPosCacheMap, anchor)
+				}
+			}
+		})
+	})
+	onUpdated(() => {
+		if (!copyrightControl) return
+		let copyright = copyrightControl?.getCopyright(uid!)
+		if (copyright?.content !== copyrightContainer.value?.innerHTML) {
+			copyrightControl.addCopyright({
+				id: uid,
+				content: copyrightContainer.value?.innerHTML,
+				bounds: copyright.bounds
+			})
+		}
+	})
+</script>
+<script lang="ts">
+	export default {
+		name: 'BmCopyright'
+	}
+</script>

package/index.ts

@@ -5,7 +5,7 @@ import Scale from './components/control/bm-scale'
 import Zoom from './components/control/bm-zoom'
 import CityList from './components/control/bm-city-list'
 import Location from './components/control/bm-location'
-// import Navigation from './components/control/bm-navigation'
+import Copyright from './components/control/bm-copyright'
 import Navigation3d from './components/control/bm-navigation3d'
 import Marker from './components/overlay/bm-marker'
 import Label from './components/overlay/bm-label'
@@ -45,10 +45,10 @@ const components = [
 		name: 'bm-navigation3d',
 		com: Navigation3d
 	},
-	// {
-	// 	name: 'bm-navigation',
-	// 	com: Navigation
-	// },
+	{
+		name: 'bm-copyright',
+		com: Copyright
+	},
 	{
 		name: 'bm-marker',
 		com: Marker