feat: overlay 动态的位置

yue1123 · May 18, 2022 · ebed8b0 · ebed8b0
1 parent d7994ba
commit ebed8b0
Show file tree

Hide file tree

Showing 6 changed files with 263 additions and 174 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -7,25 +7,23 @@
 		enableDragging
 		:minZoom="10"
 	>
-		<Control style="display: flex; background-color: #f90; padding: 10px" :offset="{ x: 0, y: 0 }">
+		<Control
+			style="display: flex; background-color: #f90; padding: 10px"
+			:offset="{ x: 0, y: 0 }"
+		>
 			<button @click="handleZoomOut">缩小1</button>
 			<button @click="handleZoomIn">放大fasdf</button>
 		</Control>
 		<Navigation3d />
-		<Marker
+		<!-- <Marker
 			:position="{
 				lng: 116.404,
 				lat: 39.925
 			}"
 			icon="../docs/.vuepress/public/logo.png"
 			dragging
-		/>
-		<Marker
-			:position="{
-				lng: 116.404,
-				lat: 39.926
-			}"
-		/>
+		/> -->
+		<Marker :position="position" />
 		<Label
 			content="123123"
 			:position="{
@@ -61,7 +59,13 @@
 			:stroke-weight="10"
 			editing
 		></Polyline>
-		<Polygon :path="polylinePath" stroke-color="#f90" :stroke-opacity="1" :stroke-weight="10" editing></Polygon>
+		<!-- <Polygon
+			:path="polylinePath"
+			stroke-color="#f90"
+			:stroke-opacity="1"
+			:stroke-weight="10"
+			editing
+		></Polygon> -->
 		<Scale v-if="show"></Scale>
 		<Zoom v-if="show"></Zoom>
 	</Map>
@@ -81,11 +85,11 @@
 	}
 	const zoom = ref(16)
 	const show = ref<boolean>(true)
-	const polylinePath = [
+	const polylinePath = ref([
 		{ lng: 116.404, lat: 39.915 },
 		{ lng: 116.405, lat: 39.92 },
 		{ lng: 116.423493, lat: 39.907445 }
-	]
+	])
 	// setTimeout(() => {
 	// 	show.value = false
 	//   console.log('yingcang');
@@ -102,6 +106,17 @@
 		show.value = !show.value
 	}
 
+	const position = ref({
+		lng: 116.404,
+		lat: 39.937
+	})
+	const key = ref()
+	// setInterval(() => {
+	// 	console.log('gaib')
+	// 	// key.value = Math.random() * 0.01
+	// 	// polylinePath.value.push({ lng: 116.423493, lat: 39.907445 + key.value })
+	// 	// position.value.lng += 0.0001
+	// }, 1000)
 	;(window as any).toggle = cal
 </script>
 <style>

diff --git a/src/components/overlay/bm-circle/index.vue b/src/components/overlay/bm-circle/index.vue
@@ -2,7 +2,7 @@
 	<div></div>
 </template>
 <script setup lang="ts">
-	import { defineProps, withDefaults } from 'vue'
+	import { defineProps, watch, withDefaults } from 'vue'
 	import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
 	import bindEvents, { Callback } from '../../../utils/bindEvents'
 	import useLife from '../../..//hooks/useLife'
@@ -110,41 +110,56 @@
 		'lineupdate'
 	])
 	const { ready } = useLife()
+	let circle: BMapGL.Circle
 	useBaseMapEffect((map: BMapGL.Map) => {
-		const {
-			center,
-			radius,
-			strokeColor,
-			strokeOpacity,
-			fillColor,
-			fillOpacity,
-			strokeWeight,
-			strokeStyle,
-			enableMassClear,
-			enableEditing,
-			enableClicking,
-			geodesic,
-			clip
-		} = props
-		const centerPoint = new BMapGL.Point(center.lng, center.lat)
-		const circle = new BMapGL.Circle(centerPoint, radius, {
-			strokeColor,
-			strokeWeight,
-			strokeOpacity,
-			strokeStyle,
-			enableMassClear,
-			enableEditing,
-			enableClicking,
-			geodesic: geodesic,
-			clip,
-			fillOpacity,
-			fillColor
-		})
-		map.addOverlay(circle)
-		ready(map)
-		bindEvents(props, vueEmits, circle)
-		return () => {
+		const cal = () => {
 			map.removeOverlay(circle)
 		}
+		const init = () => {
+			const {
+				center,
+				radius,
+				strokeColor,
+				strokeOpacity,
+				fillColor,
+				fillOpacity,
+				strokeWeight,
+				strokeStyle,
+				enableMassClear,
+				enableEditing,
+				enableClicking,
+				geodesic,
+				clip
+			} = props
+			const centerPoint = new BMapGL.Point(center.lng, center.lat)
+			circle = new BMapGL.Circle(centerPoint, radius, {
+				strokeColor,
+				strokeWeight,
+				strokeOpacity,
+				strokeStyle,
+				enableMassClear,
+				enableEditing,
+				enableClicking,
+				geodesic: geodesic,
+				clip,
+				fillOpacity,
+				fillColor
+			})
+			map.addOverlay(circle)
+      bindEvents(props, vueEmits, circle)
+		}
+		watch(
+			() => props.center,
+			() => {
+				cal()
+				init()
+			},
+			{
+				deep: true
+			}
+		)
+		init()
+		ready(map)
+		return cal
 	})
 </script>
diff --git a/src/components/overlay/bm-label/index.vue b/src/components/overlay/bm-label/index.vue
@@ -1,11 +1,11 @@
 <template></template>
 <script setup lang="ts">
-	import { defineProps, withDefaults } from 'vue'
+	import { defineProps, watch, withDefaults } from 'vue'
 	import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
 	import bindEvents, { Callback } from '../../../utils/bindEvents'
 	import useLife from '../../..//hooks/useLife'
 	// TODO: 完善组件的属性动态监听设置
-	interface BmLabelProps {
+	export interface BmLabelProps {
 		/**
 		 * 文本标注信息
 		 */
@@ -67,23 +67,37 @@
 	const { ready } = useLife()
 	let label: BMapGL.Label
 	useBaseMapEffect((map: BMapGL.Map) => {
-		const { content, position, offset, enableMassClear, style } = props
-		const options: BMapGL.LabelOptions = {
-			position: new BMapGL.Point(position.lng, position.lat),
-			offset: new BMapGL.Size(offset.x, offset.y),
-			enableMassClear
+		const cal = () => {
+			map.removeOverlay(label)
 		}
-		label = new BMapGL.Label(content, options)
-		// 自定义文本标注样式
-		if (style) {
-			label.setStyle(style)
+		const init = () => {
+			const { content, position, offset, enableMassClear, style } = props
+			const options: BMapGL.LabelOptions = {
+				position: new BMapGL.Point(position.lng, position.lat),
+				offset: new BMapGL.Size(offset.x, offset.y),
+				enableMassClear
+			}
+			label = new BMapGL.Label(content, options)
+			// 自定义文本标注样式
+			if (style) {
+				label.setStyle(style)
+			}
+			map.addOverlay(label)
+      bindEvents(props, vueEmits, label)
 		}
-		map.addOverlay(label)
+		watch(
+			() => props.position,
+			() => {
+				cal()
+				init()
+			},
+			{
+				deep: true
+			}
+		)
+		init()
 		ready(map)
-		bindEvents(props, vueEmits, label)
 		// 在地图上添加点标记
-		return () => {
-			map.removeOverlay(label)
-		}
+		return cal
 	})
 </script>
diff --git a/src/components/overlay/bm-marker/index.vue b/src/components/overlay/bm-marker/index.vue
@@ -1,7 +1,7 @@
 <template></template>
 
 <script setup lang="ts">
-	import { defineProps, withDefaults } from 'vue'
+	import { defineProps, watch, withDefaults } from 'vue'
 	import useBaseMapEffect from '../../../hooks/useBaseMapEffect'
 	import { isString } from '../../../utils/index'
 	import bindEvents, { Callback } from '../../../utils/bindEvents'
@@ -200,62 +200,77 @@
 
 		return icons
 	}
+
 	useBaseMapEffect((map: BMapGL.Map) => {
-		const defaultIcons: any = getDefaultIcons()
-		const {
-			position,
-			offset,
-			icon,
-			enableMassClear,
-			enableDragging,
-			enableClicking,
-			raiseOnDrag,
-			draggingCursor,
-			rotation,
-			title
-		} = props
-		const options: BMapGL.MarkerOptions = {
-			offset: new BMapGL.Size(offset.x, offset.y),
-			enableMassClear,
-			enableDragging,
-			enableClicking,
-			raiseOnDrag,
-			draggingCursor,
-			rotation,
-			title
+		const cal = () => {
+			map.removeOverlay(marker)
 		}
-		if (icon) {
-			if (isString(icon) && defaultIcons[icon as string]) {
-				options.icon = defaultIcons[icon as string]
-			} else {
-				// @ts-ignore
-				const { anchor, imageOffset, imageSize, imageUrl, printImageUrl } = props.icon
-				const iconOptions: BMapGL.IconOptions = {
-					imageSize: new BMapGL.Size(imageSize.width, imageSize.height)
-				}
-				if (anchor) {
-					iconOptions.anchor = new BMapGL.Size(anchor.x, anchor.y)
-				}
-				if (imageOffset) {
-					iconOptions.imageOffset = new BMapGL.Size(imageOffset.x, imageOffset.y)
-				}
-				if (printImageUrl) {
-					iconOptions.printImageUrl = printImageUrl
+		const init = () => {
+			const defaultIcons: any = getDefaultIcons()
+			const {
+				position,
+				offset,
+				icon,
+				enableMassClear,
+				enableDragging,
+				enableClicking,
+				raiseOnDrag,
+				draggingCursor,
+				rotation,
+				title
+			} = props
+			const options: BMapGL.MarkerOptions = {
+				offset: new BMapGL.Size(offset.x, offset.y),
+				enableMassClear,
+				enableDragging,
+				enableClicking,
+				raiseOnDrag,
+				draggingCursor,
+				rotation,
+				title
+			}
+			if (icon) {
+				if (isString(icon) && defaultIcons[icon as string]) {
+					options.icon = defaultIcons[icon as string]
+				} else {
+					// @ts-ignore
+					const { anchor, imageOffset, imageSize, imageUrl, printImageUrl } = props.icon
+					const iconOptions: BMapGL.IconOptions = {
+						imageSize: new BMapGL.Size(imageSize.width, imageSize.height)
+					}
+					if (anchor) {
+						iconOptions.anchor = new BMapGL.Size(anchor.x, anchor.y)
+					}
+					if (imageOffset) {
+						iconOptions.imageOffset = new BMapGL.Size(imageOffset.x, imageOffset.y)
+					}
+					if (printImageUrl) {
+						iconOptions.printImageUrl = printImageUrl
+					}
+					options.icon = new BMapGL.Icon(
+						imageUrl,
+						new BMapGL.Size(imageSize.width, imageSize.height),
+						iconOptions
+					)
 				}
-				options.icon = new BMapGL.Icon(
-					imageUrl,
-					new BMapGL.Size(imageSize.width, imageSize.height),
-					iconOptions
-				)
 			}
+			marker = new BMapGL.Marker(new BMapGL.Point(position.lng, position.lat), options)
+			// 在地图上添加点标记
+			map.addOverlay(marker)
+      bindEvents(props, vueEmits, marker)
 		}
-		marker = new BMapGL.Marker(new BMapGL.Point(position.lng, position.lat), options)
-		// 在地图上添加点标记
-		map.addOverlay(marker)
+		watch(
+			() => props.position,
+			() => {
+				cal()
+				init()
+			},
+			{
+				deep: true
+			}
+		)
+		init()
 		ready(map)
-		bindEvents(props, vueEmits, marker)
-		return () => {
-			map.removeOverlay(marker)
-		}
+		return cal
 	})
 </script>