@summeruse/ol 0.4.2 → 0.5.1

package/dist/index.js

@@ -2,347 +2,31 @@ import { computed, createElementBlock, defineComponent, inject, onBeforeUnmount,
 import { Feature, Map as Map$1, Overlay, View } from "ol";
 import { Attribution, FullScreen, OverviewMap, Rotate, ScaleLine, Zoom } from "ol/control";
 import { DoubleClickZoom, DragPan, DragRotate, Draw, KeyboardPan, KeyboardZoom, Modify, MouseWheelZoom, PinchRotate, PinchZoom } from "ol/interaction";
-import { getCenter } from "ol/extent";
 import { Circle, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from "ol/geom";
-import VectorLayer from "ol/layer/Vector";
-import VectorSource from "ol/source/Vector";
 import { Circle as Circle$1, Fill, Icon, Stroke, Style, Text } from "ol/style";
 import { Graticule, Layer, Tile } from "ol/layer";
+import HeatmapLayer from "ol/layer/Heatmap";
+import VectorLayer from "ol/layer/Vector";
 import WebGLVectorLayer from "ol/layer/WebGLVector";
 import { BingMaps, OSM, Source, XYZ } from "ol/source";
 import ImageTileSource from "ol/source/ImageTile";
+import VectorSource from "ol/source/Vector";
 import { get, transform, transformExtent } from "ol/proj";
 import { register } from "ol/proj/proj4";
 import { createXYZ } from "ol/tilegrid";
+import { getCenter } from "ol/extent";
 
-//#region components/ol-map/props.ts
-const olMapInjectionKey = Symbol("olMapInjectionKey");
-function useOlMap() {
-	return inject(olMapInjectionKey);
-}
+//#region constants/distance.ts
+const ONE_NM = 1852;
 
 //#endregion
-//#region components/ol-map/index.vue
-const _sfc_main = /* @__PURE__ */ defineComponent({
-	name: "OlMap",
-	__name: "index",
-	props: {
-		olMap: { default: () => new Map$1() },
-		center: { default: () => [0, 0] },
-		zoom: { default: 2 },
-		minZoom: { default: 2 },
-		maxZoom: { default: 18 },
-		constrainResolution: {
-			type: Boolean,
-			default: true
-		},
-		projection: {},
-		extent: {},
-		showZoom: {
-			type: Boolean,
-			default: false
-		},
-		showAttribution: {
-			type: Boolean,
-			default: false
-		},
-		showRotate: {
-			type: Boolean,
-			default: false
-		},
-		showFullScreen: {
-			type: Boolean,
-			default: false
-		},
-		showOverview: {
-			type: Boolean,
-			default: false
-		},
-		showScale: {
-			type: Boolean,
-			default: false
-		},
-		dragPan: {
-			type: Boolean,
-			default: true
-		},
-		mouseWheelZoom: {
-			type: Boolean,
-			default: true
-		},
-		doubleClickZoom: {
-			type: Boolean,
-			default: false
-		},
-		pinchRotate: { type: Boolean },
-		pinchZoom: { type: Boolean },
-		altShiftDragRotate: { type: Boolean }
-	},
-	emits: [
-		"update:zoom",
-		"update:center",
-		"changeResolution",
-		"changeCenter",
-		"moveend",
-		"movestart"
-	],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emits = __emit;
-		const mapRef = ref();
-		const olMap = props.olMap;
-		const view = new View({
-			projection: props.projection,
-			extent: props.extent
-		});
-		olMap.setView(view);
-		view.setZoom(props.zoom);
-		view.setCenter(props.center);
-		watch(() => props.constrainResolution, (val) => {
-			view.setConstrainResolution(val);
-		}, { immediate: true });
-		watch(() => props.minZoom, (val) => {
-			if (val) view.setMinZoom(val);
-		}, { immediate: true });
-		watch(() => props.maxZoom, (val) => {
-			if (val) view.setMaxZoom(val);
-		}, { immediate: true });
-		watch(mapRef, (val) => {
-			if (val) olMap.setTarget(val);
-		});
-		__expose({ olMap });
-		provide(olMapInjectionKey, olMap);
-		const controls = olMap.getControls().getArray();
-		const zoomControl = controls.find((control) => control instanceof Zoom) || new Zoom();
-		const attributionControl = controls.find((control) => control instanceof Attribution) || new Attribution();
-		const rotateControl = controls.find((control) => control instanceof Rotate) || new Rotate();
-		const fullScreenControl = controls.find((control) => control instanceof FullScreen) || new FullScreen();
-		const overviewMapControl = controls.find((control) => control instanceof OverviewMap) || new OverviewMap();
-		const scaleControl = controls.find((control) => control instanceof ScaleLine) || new ScaleLine();
-		watch(() => props.showZoom, (val) => {
-			zoomControl.setMap(val ? olMap : null);
-		}, { immediate: true });
-		watch(() => props.showAttribution, (val) => {
-			attributionControl.setMap(val ? olMap : null);
-		}, { immediate: true });
-		watch(() => props.showRotate, (val) => {
-			rotateControl.setMap(val ? olMap : null);
-		}, { immediate: true });
-		watch(() => props.showFullScreen, (val) => {
-			fullScreenControl.setMap(val ? olMap : null);
-		}, { immediate: true });
-		watch(() => props.showOverview, (val) => {
-			overviewMapControl.setMap(val ? olMap : null);
-		}, { immediate: true });
-		watch(() => props.showScale, (val) => {
-			scaleControl.setMap(val ? olMap : null);
-		}, { immediate: true });
-		const interactions = olMap.getInteractions().getArray();
-		const dragPan = interactions.find((i$1) => i$1 instanceof DragPan) || new DragPan();
-		const mouseWheelZoom = interactions.find((i$1) => i$1 instanceof MouseWheelZoom) || new MouseWheelZoom();
-		const doubleClickZoom = interactions.find((i$1) => i$1 instanceof DoubleClickZoom) || new DoubleClickZoom();
-		const pinchRotate = interactions.find((i$1) => i$1 instanceof PinchRotate) || new PinchRotate();
-		const pinchZoom = interactions.find((i$1) => i$1 instanceof PinchZoom) || new PinchZoom();
-		const altShiftDragRotate = interactions.find((i$1) => i$1 instanceof DragRotate) || new DragRotate();
-		const keyboardPan = interactions.find((i$1) => i$1 instanceof KeyboardPan) || new KeyboardPan();
-		const keyboardZoom = interactions.find((i$1) => i$1 instanceof KeyboardZoom) || new KeyboardZoom();
-		olMap.removeInteraction(dragPan);
-		olMap.addInteraction(dragPan);
-		olMap.removeInteraction(mouseWheelZoom);
-		olMap.addInteraction(mouseWheelZoom);
-		olMap.removeInteraction(doubleClickZoom);
-		olMap.addInteraction(doubleClickZoom);
-		olMap.removeInteraction(pinchRotate);
-		olMap.addInteraction(pinchRotate);
-		olMap.removeInteraction(pinchZoom);
-		olMap.addInteraction(pinchZoom);
-		olMap.removeInteraction(altShiftDragRotate);
-		olMap.addInteraction(altShiftDragRotate);
-		olMap.removeInteraction(keyboardPan);
-		olMap.removeInteraction(keyboardZoom);
-		watch(() => props.dragPan, (val) => {
-			dragPan.setActive(val);
-		}, { immediate: true });
-		watch(() => props.mouseWheelZoom, (val) => {
-			mouseWheelZoom.setActive(val);
-		}, { immediate: true });
-		watch(() => props.doubleClickZoom, (val) => {
-			doubleClickZoom.setActive(val);
-		}, { immediate: true });
-		watch(() => props.pinchRotate, (val) => {
-			pinchRotate.setActive(val);
-		}, { immediate: true });
-		watch(() => props.pinchZoom, (val) => {
-			pinchZoom.setActive(val);
-		}, { immediate: true });
-		watch(() => props.altShiftDragRotate, (val) => {
-			altShiftDragRotate.setActive(val);
-		}, { immediate: true });
-		function changeResolution(e) {
-			emits("update:zoom", Math.floor(view.getZoom() || 0));
-			emits("changeResolution", e);
-		}
-		onMounted(() => {
-			view.on("change:resolution", changeResolution);
-		});
-		onUnmounted(() => {
-			view.un("change:resolution", changeResolution);
-		});
-		function changeCenter(e) {
-			emits("update:center", view.getCenter() || [0, 0]);
-			emits("changeCenter", e);
-		}
-		onMounted(() => {
-			view.on("change:center", changeCenter);
-		});
-		onUnmounted(() => {
-			view.un("change:center", changeCenter);
-		});
-		function movestart(e) {
-			emits("movestart", e);
-		}
-		onMounted(() => {
-			olMap.on("movestart", movestart);
-		});
-		onUnmounted(() => {
-			olMap.un("movestart", movestart);
-		});
-		function moveend(e) {
-			emits("moveend", e);
-		}
-		onMounted(() => {
-			olMap.on("moveend", moveend);
-		});
-		onUnmounted(() => {
-			olMap.un("moveend", moveend);
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "mapRef",
-				ref: mapRef
-			}, [renderSlot(_ctx.$slots, "default", {
-				olMap: unref(olMap),
-				mapRef: mapRef.value
-			})], 512);
-		};
-	}
-});
-var ol_map_default = _sfc_main;
-
-//#endregion
-//#region composables/useContextmenu/index.ts
-function useContextmenu(mapRef, items) {
-	const visible = ref(false);
-	const position = ref({
-		x: 0,
-		y: 0
-	});
-	const feature = ref();
-	const options = ref([]);
-	const coordinate = ref();
-	let currentMap;
-	/** 递归过滤可见菜单并排序 */
-	function filterAndSortMenu(menus, params$1) {
-		const options$1 = [];
-		menus.filter((item) => {
-			const visible$1 = item.visible;
-			if (typeof visible$1 === "function") return visible$1(params$1);
-			return visible$1 ?? true;
-		}).filter((item) => !item.children || item.children.length > 0).sort((a, b$1) => (a.order ?? 0) - (b$1.order ?? 0)).forEach((item) => {
-			const icon = item.icon;
-			const label = item.label;
-			options$1.push({
-				...item,
-				children: item.children ? filterAndSortMenu(item.children, params$1) : void 0,
-				visible: true,
-				action: () => {
-					item.action?.(params$1);
-					hide();
-				},
-				icon: typeof icon === "function" ? () => icon(params$1) : icon,
-				label: typeof label === "function" ? () => label(params$1) : label,
-				disabled: typeof item.disabled === "function" ? item.disabled(params$1) : item.disabled ?? false
-			});
-		});
-		return options$1;
-	}
-	function show(evt) {
-		evt.preventDefault();
-		if (!currentMap) return;
-		const _coordinate = currentMap.getEventCoordinate(evt);
-		coordinate.value = _coordinate;
-		const pixel = currentMap.getEventPixel(evt);
-		let foundFeature;
-		let foundLayer;
-		currentMap.forEachFeatureAtPixel(pixel, (feature$1, layer) => {
-			foundFeature = feature$1;
-			foundLayer = layer;
-			return true;
-		});
-		feature.value = foundFeature;
-		const [x$2, y] = [evt.clientX, evt.clientY];
-		position.value = {
-			x: x$2,
-			y
-		};
-		options.value = filterAndSortMenu(toValue(items), {
-			map: currentMap,
-			position: { ...position.value },
-			coordinate: _coordinate,
-			feature: foundFeature,
-			layer: foundLayer
-		});
-		visible.value = true;
-	}
-	function hide() {
-		visible.value = false;
-	}
-	/** 绑定 / 解绑事件 */
-	function bindMapEvents(map) {
-		if (!map) return;
-		const el = map.getViewport();
-		el.addEventListener("contextmenu", show);
-		el.addEventListener("click", hide);
-	}
-	function unbindMapEvents(map) {
-		if (!map) return;
-		const el = map.getViewport();
-		el.removeEventListener("contextmenu", show);
-		el.removeEventListener("click", hide);
-	}
-	/** 监听 mapRef 变化 */
-	watch(() => toValue(mapRef), (newMap, oldMap) => {
-		if (oldMap !== newMap) {
-			unbindMapEvents(oldMap);
-			bindMapEvents(newMap);
-			currentMap = newMap;
-		}
-	}, { immediate: true });
-	onBeforeUnmount(() => {
-		unbindMapEvents(currentMap);
-	});
-	return {
-		visible: computed(() => visible.value),
-		position: computed(() => position.value),
-		feature: computed(() => feature.value),
-		options: computed(() => options.value),
-		coordinate: computed(() => coordinate.value),
-		hide
-	};
-}
-
-//#endregion
-//#region constants/distance.ts
-const ONE_NM = 1852;
-
-//#endregion
-//#region constants/projection.ts
-/** 3857坐标系 球面墨卡托投影坐标系 */
-const EPSG_3857 = "EPSG:3857";
-/** 4326坐标系 经纬度坐标系 等距圆柱投影 */
-const EPSG_4326 = "EPSG:4326";
-/** 3395坐标系 椭球墨卡托投影坐标系 */
-const EPSG_3395 = "EPSG:3395";
+//#region constants/projection.ts
+/** 3857坐标系 球面墨卡托投影坐标系 */
+const EPSG_3857 = "EPSG:3857";
+/** 4326坐标系 经纬度坐标系 等距圆柱投影 */
+const EPSG_4326 = "EPSG:4326";
+/** 3395坐标系 椭球墨卡托投影坐标系 */
+const EPSG_3395 = "EPSG:3395";
 
 //#endregion
 //#region utils/distance/index.ts
@@ -354,6 +38,14 @@ function kmToNauticalMiles(km) {
 function nauticalMilesToKm(nauticalMiles) {
 	return nauticalMiles * ONE_NM / 1e3;
 }
+/** 弧度转角度 */
+function rotationToAngle(rotation) {
+	return formatRotation(rotation) * 180 / Math.PI;
+}
+/** 角度转弧度 */
+function angleToRotation(angle) {
+	return formatAngle(angle) * Math.PI / 180;
+}
 /** 格式化Rotation */
 function formatRotation(rotation) {
 	if (rotation < 0) return formatRotation(rotation + 2 * Math.PI);
@@ -9620,6 +9312,347 @@ function createCanvasLayer(olMap, refresh, options) {
 		source
 	};
 }
+function createHeatmapLayer(options) {
+	const { sourceOptions, ...restOptions } = options || {};
+	const source = createVectorSource(sourceOptions);
+	return {
+		layer: new HeatmapLayer({
+			...restOptions,
+			source
+		}),
+		source
+	};
+}
+
+//#endregion
+//#region components/ol-map/props.ts
+const olMapInjectionKey = Symbol("olMapInjectionKey");
+function useOlMap() {
+	return inject(olMapInjectionKey);
+}
+
+//#endregion
+//#region components/ol-map/index.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "OlMap",
+	__name: "index",
+	props: {
+		olMap: { default: () => new Map$1() },
+		center: { default: () => [0, 0] },
+		rotation: { default: 0 },
+		zoom: { default: 2 },
+		minZoom: { default: 2 },
+		maxZoom: { default: 18 },
+		constrainResolution: {
+			type: Boolean,
+			default: true
+		},
+		projection: {},
+		extent: {},
+		showZoom: {
+			type: Boolean,
+			default: false
+		},
+		showAttribution: {
+			type: Boolean,
+			default: false
+		},
+		showRotate: {
+			type: Boolean,
+			default: false
+		},
+		showFullScreen: {
+			type: Boolean,
+			default: false
+		},
+		showOverview: {
+			type: Boolean,
+			default: false
+		},
+		showScale: {
+			type: Boolean,
+			default: false
+		},
+		dragPan: {
+			type: Boolean,
+			default: true
+		},
+		mouseWheelZoom: {
+			type: Boolean,
+			default: true
+		},
+		doubleClickZoom: {
+			type: Boolean,
+			default: false
+		},
+		pinchRotate: { type: Boolean },
+		pinchZoom: { type: Boolean },
+		altShiftDragRotate: { type: Boolean }
+	},
+	emits: [
+		"update:zoom",
+		"update:center",
+		"update:rotation",
+		"changeResolution",
+		"changeRotation",
+		"changeCenter",
+		"moveend",
+		"movestart"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const mapRef = ref();
+		const olMap = props.olMap;
+		const view = new View({
+			projection: props.projection,
+			extent: props.extent
+		});
+		olMap.setView(view);
+		view.setZoom(props.zoom);
+		view.setCenter(props.center);
+		watch(() => props.constrainResolution, (val) => {
+			view.setConstrainResolution(val);
+		}, { immediate: true });
+		watch(() => props.minZoom, (val) => {
+			if (val) view.setMinZoom(val);
+		}, { immediate: true });
+		watch(() => props.maxZoom, (val) => {
+			if (val) view.setMaxZoom(val);
+		}, { immediate: true });
+		watch(mapRef, (val) => {
+			if (val) olMap.setTarget(val);
+		});
+		__expose({ olMap });
+		provide(olMapInjectionKey, olMap);
+		const controls = olMap.getControls().getArray();
+		const zoomControl = controls.find((control) => control instanceof Zoom) || new Zoom();
+		const attributionControl = controls.find((control) => control instanceof Attribution) || new Attribution();
+		const rotateControl = controls.find((control) => control instanceof Rotate) || new Rotate();
+		const fullScreenControl = controls.find((control) => control instanceof FullScreen) || new FullScreen();
+		const overviewMapControl = controls.find((control) => control instanceof OverviewMap) || new OverviewMap();
+		const scaleControl = controls.find((control) => control instanceof ScaleLine) || new ScaleLine();
+		watch(() => props.showZoom, (val) => {
+			zoomControl.setMap(val ? olMap : null);
+		}, { immediate: true });
+		watch(() => props.showAttribution, (val) => {
+			attributionControl.setMap(val ? olMap : null);
+		}, { immediate: true });
+		watch(() => props.showRotate, (val) => {
+			rotateControl.setMap(val ? olMap : null);
+		}, { immediate: true });
+		watch(() => props.showFullScreen, (val) => {
+			fullScreenControl.setMap(val ? olMap : null);
+		}, { immediate: true });
+		watch(() => props.showOverview, (val) => {
+			overviewMapControl.setMap(val ? olMap : null);
+		}, { immediate: true });
+		watch(() => props.showScale, (val) => {
+			scaleControl.setMap(val ? olMap : null);
+		}, { immediate: true });
+		const interactions = olMap.getInteractions().getArray();
+		const dragPan = interactions.find((i$1) => i$1 instanceof DragPan) || new DragPan();
+		const mouseWheelZoom = interactions.find((i$1) => i$1 instanceof MouseWheelZoom) || new MouseWheelZoom();
+		const doubleClickZoom = interactions.find((i$1) => i$1 instanceof DoubleClickZoom) || new DoubleClickZoom();
+		const pinchRotate = interactions.find((i$1) => i$1 instanceof PinchRotate) || new PinchRotate();
+		const pinchZoom = interactions.find((i$1) => i$1 instanceof PinchZoom) || new PinchZoom();
+		const altShiftDragRotate = interactions.find((i$1) => i$1 instanceof DragRotate) || new DragRotate();
+		const keyboardPan = interactions.find((i$1) => i$1 instanceof KeyboardPan) || new KeyboardPan();
+		const keyboardZoom = interactions.find((i$1) => i$1 instanceof KeyboardZoom) || new KeyboardZoom();
+		olMap.removeInteraction(dragPan);
+		olMap.addInteraction(dragPan);
+		olMap.removeInteraction(mouseWheelZoom);
+		olMap.addInteraction(mouseWheelZoom);
+		olMap.removeInteraction(doubleClickZoom);
+		olMap.addInteraction(doubleClickZoom);
+		olMap.removeInteraction(pinchRotate);
+		olMap.addInteraction(pinchRotate);
+		olMap.removeInteraction(pinchZoom);
+		olMap.addInteraction(pinchZoom);
+		olMap.removeInteraction(altShiftDragRotate);
+		olMap.addInteraction(altShiftDragRotate);
+		olMap.removeInteraction(keyboardPan);
+		olMap.removeInteraction(keyboardZoom);
+		watch(() => props.dragPan, (val) => {
+			dragPan.setActive(val);
+		}, { immediate: true });
+		watch(() => props.mouseWheelZoom, (val) => {
+			mouseWheelZoom.setActive(val);
+		}, { immediate: true });
+		watch(() => props.doubleClickZoom, (val) => {
+			doubleClickZoom.setActive(val);
+		}, { immediate: true });
+		watch(() => props.pinchRotate, (val) => {
+			pinchRotate.setActive(val);
+		}, { immediate: true });
+		watch(() => props.pinchZoom, (val) => {
+			pinchZoom.setActive(val);
+		}, { immediate: true });
+		watch(() => props.altShiftDragRotate, (val) => {
+			altShiftDragRotate.setActive(val);
+		}, { immediate: true });
+		function changeResolution(e) {
+			emits("update:zoom", Math.floor(view.getZoom() || 0));
+			emits("changeResolution", e);
+		}
+		onMounted(() => {
+			view.on("change:resolution", changeResolution);
+		});
+		onUnmounted(() => {
+			view.un("change:resolution", changeResolution);
+		});
+		function changeCenter(e) {
+			emits("update:center", view.getCenter() || [0, 0]);
+			emits("changeCenter", e);
+		}
+		onMounted(() => {
+			view.on("change:center", changeCenter);
+		});
+		onUnmounted(() => {
+			view.un("change:center", changeCenter);
+		});
+		function movestart(e) {
+			emits("movestart", e);
+		}
+		onMounted(() => {
+			olMap.on("movestart", movestart);
+		});
+		onUnmounted(() => {
+			olMap.un("movestart", movestart);
+		});
+		function moveend(e) {
+			emits("moveend", e);
+		}
+		onMounted(() => {
+			olMap.on("moveend", moveend);
+		});
+		onUnmounted(() => {
+			olMap.un("moveend", moveend);
+		});
+		function changeRotation(e) {
+			emits("update:rotation", formatRotation(e.target.getRotation() || 0));
+			emits("changeRotation", e);
+		}
+		onMounted(() => {
+			view.on("change:rotation", changeRotation);
+		});
+		onUnmounted(() => {
+			view.un("change:rotation", changeRotation);
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "mapRef",
+				ref: mapRef
+			}, [renderSlot(_ctx.$slots, "default", {
+				olMap: unref(olMap),
+				mapRef: mapRef.value
+			})], 512);
+		};
+	}
+});
+var ol_map_default = _sfc_main;
+
+//#endregion
+//#region composables/useContextmenu/index.ts
+function useContextmenu(mapRef, items) {
+	const visible = ref(false);
+	const position = ref({
+		x: 0,
+		y: 0
+	});
+	const feature = ref();
+	const options = ref([]);
+	const coordinate = ref();
+	let currentMap;
+	/** 递归过滤可见菜单并排序 */
+	function filterAndSortMenu(menus, params$1) {
+		const options$1 = [];
+		menus.filter((item) => {
+			const visible$1 = item.visible;
+			if (typeof visible$1 === "function") return visible$1(params$1);
+			return visible$1 ?? true;
+		}).filter((item) => !item.children || item.children.length > 0).sort((a, b$1) => (a.order ?? 0) - (b$1.order ?? 0)).forEach((item) => {
+			const icon = item.icon;
+			const label = item.label;
+			options$1.push({
+				...item,
+				children: item.children ? filterAndSortMenu(item.children, params$1) : void 0,
+				visible: true,
+				action: () => {
+					item.action?.(params$1);
+					hide();
+				},
+				icon: typeof icon === "function" ? () => icon(params$1) : icon,
+				label: typeof label === "function" ? () => label(params$1) : label,
+				disabled: typeof item.disabled === "function" ? item.disabled(params$1) : item.disabled ?? false
+			});
+		});
+		return options$1;
+	}
+	function show(evt) {
+		evt.preventDefault();
+		if (!currentMap) return;
+		const _coordinate = currentMap.getEventCoordinate(evt);
+		coordinate.value = _coordinate;
+		const pixel = currentMap.getEventPixel(evt);
+		let foundFeature;
+		let foundLayer;
+		currentMap.forEachFeatureAtPixel(pixel, (feature$1, layer) => {
+			foundFeature = feature$1;
+			foundLayer = layer;
+			return true;
+		});
+		feature.value = foundFeature;
+		const [x$2, y] = [evt.clientX, evt.clientY];
+		position.value = {
+			x: x$2,
+			y
+		};
+		options.value = filterAndSortMenu(toValue(items), {
+			map: currentMap,
+			position: { ...position.value },
+			coordinate: _coordinate,
+			feature: foundFeature,
+			layer: foundLayer
+		});
+		visible.value = true;
+	}
+	function hide() {
+		visible.value = false;
+	}
+	/** 绑定 / 解绑事件 */
+	function bindMapEvents(map) {
+		if (!map) return;
+		const el = map.getViewport();
+		el.addEventListener("contextmenu", show);
+		el.addEventListener("click", hide);
+	}
+	function unbindMapEvents(map) {
+		if (!map) return;
+		const el = map.getViewport();
+		el.removeEventListener("contextmenu", show);
+		el.removeEventListener("click", hide);
+	}
+	/** 监听 mapRef 变化 */
+	watch(() => toValue(mapRef), (newMap, oldMap) => {
+		if (oldMap !== newMap) {
+			unbindMapEvents(oldMap);
+			bindMapEvents(newMap);
+			currentMap = newMap;
+		}
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		unbindMapEvents(currentMap);
+	});
+	return {
+		visible: computed(() => visible.value),
+		position: computed(() => position.value),
+		feature: computed(() => feature.value),
+		options: computed(() => options.value),
+		coordinate: computed(() => coordinate.value),
+		hide
+	};
+}
 
 //#endregion
 //#region composables/common/index.ts
@@ -10112,4 +10145,4 @@ function useSwitchBaseLayer(data) {
 }
 
 //#endregion
-export { EPSG_3395, EPSG_3857, EPSG_3857ExtentToEPSG_4326, EPSG_3857ToEPSG_4326, EPSG_4326, EPSG_4326ExtentToEPSG_3857, EPSG_4326ToEPSG_3857, ONE_NM, ol_map_default as OlMap, createBingLayer, createCanvasLayer, createCircle, createCircleFeature, createCircleStyle, createFeature, createLineString, createLineStringFeature, createMultiLineString, createMultiLineStringFeature, createMultiPoint, createMultiPointFeature, createMultiPolygon, createMultiPolygonFeature, createOpenStreetMapLayer, createPMTilesLayer, createPoint, createPointFeature, createPolygon, createPolygonFeature, createStyle, createTextStyle, createTianDiTuLayer, createTianDiTuUrl, createTileGrid, createVectorLayer, createVectorSource, createWebGLVectorLayer, createXYZLayer, formatAngle, formatRotation, kmToNauticalMiles, nauticalMilesToKm, olMapInjectionKey, lib_default as proj4, registerEPSG_3395, useContextmenu, useDrawLineString, useDrawPolygon, useGraticule, useOlMap, usePointermove, useSwitchBaseLayer };
+export { EPSG_3395, EPSG_3857, EPSG_3857ExtentToEPSG_4326, EPSG_3857ToEPSG_4326, EPSG_4326, EPSG_4326ExtentToEPSG_3857, EPSG_4326ToEPSG_3857, ONE_NM, ol_map_default as OlMap, angleToRotation, createBingLayer, createCanvasLayer, createCircle, createCircleFeature, createCircleStyle, createFeature, createHeatmapLayer, createLineString, createLineStringFeature, createMultiLineString, createMultiLineStringFeature, createMultiPoint, createMultiPointFeature, createMultiPolygon, createMultiPolygonFeature, createOpenStreetMapLayer, createPMTilesLayer, createPoint, createPointFeature, createPolygon, createPolygonFeature, createStyle, createTextStyle, createTianDiTuLayer, createTianDiTuUrl, createTileGrid, createVectorLayer, createVectorSource, createWebGLVectorLayer, createXYZLayer, formatAngle, formatRotation, kmToNauticalMiles, nauticalMilesToKm, olMapInjectionKey, lib_default as proj4, registerEPSG_3395, rotationToAngle, useContextmenu, useDrawLineString, useDrawPolygon, useGraticule, useOlMap, usePointermove, useSwitchBaseLayer };