feat: 子组件监听父组件加载完毕,增加比例尺组件

package.json

@@ -11,6 +11,7 @@
 	},
 	"packageManager": "pnpm",
 	"dependencies": {
+		"mitt": "^3.0.0",
 		"vue": "^3.2.25"
 	},
 	"devDependencies": {

src/App.vue

@@ -1,10 +1,15 @@
 <template>
 	<BaiduMap ak="4stE857hYPHbEmgKhLiTAa0QbCIULHpm" :enable-keyboard="false">
-		<BmControl></BmControl>
+		<BmControl>
+			<BmScale></BmScale>
+			<!-- <BmControl> -->
+			<!-- <BmControl></BmControl> -->
+			<!-- </BmControl> -->
+		</BmControl>
 	</BaiduMap>
 </template>
 <script setup lang="ts">
-	import { BaiduMap, BmControl } from './index'
+	import { BaiduMap, BmControl, BmScale } from './index'
 </script>
 <style>
 	#app {

src/env.d.ts

@@ -15,5 +15,5 @@ declare module '*.vue' {
   export default component
 }
 // 百度地图
-declare const BMap: any
+// declare const BMap: any
 

src/hooks/useBaseMapInitdCallback.ts

@@ -0,0 +1,8 @@
+import { getCurrentInstance } from 'vue'
+import { BMapGL } from 'types/index.d'
+// import useEmitter from './useEmitter'
+export function useBaseMapInitdCallback(cal: (mapInstance: BMapGL['Map']) => void) {
+	const parent: any = getCurrentInstance()?.parent
+	const { map, emitter } = parent.exposed
+	map() ? cal(map()) : emitter.on('onInitd', () => cal(map()))
+}

src/hooks/useEmits.ts

@@ -0,0 +1,13 @@
+import mitt from 'mitt'
+const emitter = mitt()
+export function useEmits(vueEmits?: any) {
+	return {
+		emit: (event: string, arg?: any) => {
+			emitter.emit(event, arg)
+      vueEmits && vueEmits(event, arg)
+		},
+		on: (event: string, cal: (arg: any) => void) => {
+			emitter.on(event, cal)
+		}
+	}
+}

src/index.ts

@@ -2,6 +2,7 @@ import { App, Plugin } from 'vue'
 
 import BaiduMap from './lib/components/baidu-map/index.vue'
 import BmControl from './lib/components/control/bm-control/index.vue'
+import BmScale from './lib/components/control/bm-scale/index.vue'
 
 export type BaiduMapOptions = {
 	ak: string
@@ -12,6 +13,6 @@ const baiduMapInitPlugin: Plugin = {
 		app.provide('baiduMapAk', options.ak)
 	}
 }
-export { BaiduMap, BmControl }
+export { BaiduMap, BmControl, BmScale }
 
 export default baiduMapInitPlugin

src/lib/components/baidu-map/index.vue

@@ -1,28 +1,12 @@
 <template>
-	<div
-		id="baidu-map-container"
-		:style="{ width: props.width, height: props.height }"
-	></div>
+	<div id="baidu-map-container" :style="{ width: props.width, height: props.height }"></div>
 	<slot></slot>
 </template>
 
 <script setup lang="ts">
-	import {
-		inject,
-		defineProps,
-		withDefaults,
-		defineEmits,
-		watch,
-		ref,
-		defineExpose
-	} from 'vue'
-	import {
-		BMapGL,
-		Point,
-		MapOptions,
-		_MapType
-	} from '../../../../types/index.d'
-
+	import { inject, defineProps, withDefaults, defineEmits, watch, ref, defineExpose, provide, onMounted } from 'vue'
+	import { BMapGL, Point, MapOptions, _MapType } from 'types/index.d'
+	import { useEmits } from 'hooks/useEmits'
 	export interface Props extends MapOptions {
 		ak?: string
 		/**
@@ -102,11 +86,14 @@
 		 */
 		enableAutoResize?: boolean
 	}
+
 	let _BMapGL: BMapGL
 	let map = ref<BMapGL['Map']>()
 	// 是否初始化
 	let initd: boolean = false
+	// const vueEmit =
 	const emits = defineEmits(['onInitd'])
+	const { emit } = useEmits(emits)
 	const props = withDefaults(defineProps<Props>(), {
 		width: '100%',
 		height: '100vh',
@@ -128,9 +115,6 @@
 		enablePinchToZoom: true,
 		enableAutoResize: true
 	})
-	defineExpose({
-		map: () => map.value
-	})
 	// 监听props变化
 	watch(() => props.zoom, setZoom)
 	watch(() => props.center, setCenter)
@@ -142,28 +126,27 @@
 	watch(() => props.enablePinchToZoom, setPinchToZoom)
 	watch(() => props.enableAutoResize, setAutoResize)
 	watch(() => props.mapType, setMapType)
-
+	// defineExpose({
+	// 	map: () => map.value
+	// })
 	const ak = props.ak || inject('baiduMapAk')
 	// 获取地图SDK Script
 	function getMapScriptAsync() {
 		if (!window._BMap) {
 			window._BMap = {}
-			window._BMap.scriptLoader = new Promise<BMapGL>(
-				(resolve, reject) => {
-					const script: HTMLScriptElement =
-						document.createElement('script')
-					window._initBMap = () => {
-						resolve(window.BMapGL)
-						window.document.body.removeChild(script)
-					}
-					script.src = `//api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=_initBMap`
-					script.type = 'text/javascript'
-					script.defer = true
-					script.async = true
-					script.onerror = reject
-					document.body.appendChild(script)
+			window._BMap.scriptLoader = new Promise<BMapGL>((resolve, reject) => {
+				const script: HTMLScriptElement = document.createElement('script')
+				window._initBMap = () => {
+					resolve(window.BMapGL)
+					window.document.body.removeChild(script)
 				}
-			)
+				script.src = `//api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=_initBMap`
+				script.type = 'text/javascript'
+				script.defer = true
+				script.async = true
+				script.onerror = reject
+				document.body.appendChild(script)
+			})
 			return window._BMap.scriptLoader
 		} else {
 			return Promise.resolve(window.BMapGL)
@@ -178,7 +161,8 @@
 			initMapOptions()
 			if (!initd) {
 				initd = true
-				emits('onInitd')
+				emit('onInitd', map.value)
+				// emitter.emit('onInitd')
 			}
 		})
 	}
@@ -228,10 +212,7 @@
 		if (typeof props.center === 'string') {
 			map.value!.centerAndZoom(props.center)
 		} else {
-			map.value!.centerAndZoom(
-				genPoint(props.center.lng, props.center.lat),
-				props.zoom
-			)
+			map.value!.centerAndZoom(genPoint(props.center.lng, props.center.lat), props.zoom)
 		}
 	}
 	/**
@@ -246,57 +227,39 @@
 	}
 	// 设置地图是否可拖动
 	function setDragging(enableDragging: boolean): void {
-		enableDragging
-			? map.value!.enableDragging()
-			: map.value!.disableDragging()
+		enableDragging ? map.value!.enableDragging() : map.value!.disableDragging()
 	}
 	// 设置地图惯性拖拽
 	function setInertialDragging(enableInertialDragging: boolean) {
-		enableInertialDragging
-			? map.value!.enableInertialDragging()
-			: map.value!.disableInertialDragging()
+		enableInertialDragging ? map.value!.enableInertialDragging() : map.value!.disableInertialDragging()
 	}
 	// 设置地图是否可滚轮缩放
 	function setScrollWheelZoom(enableScrollWheelZoom: boolean) {
-		enableScrollWheelZoom
-			? map.value!.enableScrollWheelZoom()
-			: map.value!.disableScrollWheelZoom()
+		enableScrollWheelZoom ? map.value!.enableScrollWheelZoom() : map.value!.disableScrollWheelZoom()
 	}
 	// 设置地图是否可连续缩放
 	function setContinuousZoom(enableContinuousZoom: boolean): void {
-		enableContinuousZoom
-			? map.value!.enableContinuousZoom()
-			: map.value!.disableContinuousZoom()
+		enableContinuousZoom ? map.value!.enableContinuousZoom() : map.value!.disableContinuousZoom()
 	}
 	// 设置地图是否可缩放至中心点
 	function setResizeOnCenter(enableResizeOnCenter: boolean): void {
-		enableResizeOnCenter
-			? map.value!.enableResizeOnCenter()
-			: map.value!.disableResizeOnCenter()
+		enableResizeOnCenter ? map.value!.enableResizeOnCenter() : map.value!.disableResizeOnCenter()
 	}
 	// 设置地图是否可双击缩放
 	function setDoubleClickZoom(enableDoubleClickZoom: boolean): void {
-		enableDoubleClickZoom
-			? map.value!.enableDoubleClickZoom()
-			: map.value!.disableDoubleClickZoom()
+		enableDoubleClickZoom ? map.value!.enableDoubleClickZoom() : map.value!.disableDoubleClickZoom()
 	}
 	// 设置地图是否可键盘操作
 	function setKeyboard(enableKeyboard: boolean): void {
-		enableKeyboard
-			? map.value!.enableKeyboard()
-			: map.value!.disableKeyboard()
+		enableKeyboard ? map.value!.enableKeyboard() : map.value!.disableKeyboard()
 	}
 	// 设置地图是否可手势缩放
 	function setPinchToZoom(enablePinchToZoom: boolean): void {
-		enablePinchToZoom
-			? map.value!.enablePinchToZoom()
-			: map.value!.disablePinchToZoom()
+		enablePinchToZoom ? map.value!.enablePinchToZoom() : map.value!.disablePinchToZoom()
 	}
 	// 设置地图是否自动适应窗口大小
 	function setAutoResize(enableAutoResize: boolean): void {
-		enableAutoResize
-			? map.value!.enableAutoResize()
-			: map.value!.disableAutoResize()
+		enableAutoResize ? map.value!.enableAutoResize() : map.value!.disableAutoResize()
 	}
 	init()
 </script>

src/lib/components/control/bm-control/index.vue

@@ -1,9 +1,5 @@
 <template>
-	<div>我是子组件</div>
+	<slot></slot>
 </template>
 
-<script setup lang="ts">
-	import { useBaseMap } from 'hooks/useBaseMap'
-	const { map } = useBaseMap()
-	console.log(map)
-</script>
+<script setup lang="ts"></script>

src/lib/components/control/bm-scale/index.vue

@@ -0,0 +1,11 @@
+<template></template>
+
+<script setup lang="ts">
+	// import { useBaseMapInitdCallback } from 'hooks/useBaseMapInitdCallback'
+	import { useEmits } from 'hooks/useEmits'
+	const { on } = useEmits()
+	on('onInitd', (map) => {
+		const scaleCtrl = new window.BMapGL.ScaleControl()
+		map.addControl(scaleCtrl)
+	})
+</script>

tsconfig.json

@@ -23,6 +23,7 @@
 		"src/**/*.d.ts",
 		"src/**/*.tsx",
 		"src/**/*.vue",
+    "src/**/**/*.vue",
 		"types/*.ts"
 	],
 	"references": [

types/common.d.ts

@@ -95,6 +95,17 @@ export enum DrivingPolicy {
 	'BMAP_DRIVING_POLICY_AVOID_HIGHWAYS'
 }
 
+export enum LengthUnit {
+	/**
+	 * 公制单位
+	 */
+	BMAP_UNIT_METRIC = 'BMAP_UNIT_IMPERIAL',
+	/**
+	 * 英制单位
+	 */
+	BMAP_UNIT_IMPERIAL = 'BMAP_UNIT_IMPERIAL'
+}
+export type _LengthUnit = keyof typeof LengthUnit
 // export enum MapTypeControlType {
 // 	/**
 // 	 * 按钮水平方式展示，默认采用此类型展示

types/control.d.ts

@@ -1,5 +1,5 @@
-import { Size } from "./base"
-import { ControlAnchor } from "./common"
+import { Size } from './base'
+import { ControlAnchor, _LengthUnit } from './common'
 import { Map } from './core'
 /**
  * 此类是所有控件的基类，您可以通过此类来实现自定义控件。
@@ -51,3 +51,29 @@ export interface Control {
 	 */
 	isVisible(): Boolean
 }
+
+interface ScaleControlOptions {
+	/**
+	 * 控件停靠的位置
+	 */
+	anchor: ControlAnchor
+	/**
+	 * 控件的偏移值
+	 */
+	offset: Size
+}
+export interface ScaleControl extends Control {
+	/**
+	 *
+	 */
+	/**
+	 * 返回比例尺单位制
+	 */
+	getUnit(): _LengthUnit
+	/**
+	 * 设置比例尺单位制
+	 * @param unit
+	 */
+	setUnit(unit: _LengthUnit): void
+	new (opts?: ScaleControlOptions): ScaleControl
+}

types/index.d.ts

@@ -1,11 +1,13 @@
 import { Point, Pixel, Bounds, Size } from './base'
 import { Map } from './core'
+import { ScaleControl } from './control'
 export interface BMapGL {
 	Map: Map
 	Point: Point
 	Pixel: Pixel
 	Bounds: Bounds
 	Size: Size
+	ScaleControl: ScaleControl
 }
 
 // 基础类