From 055c8329a8e8f7bc50bb1f10711031ea0bccaf2f Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期五, 17 一月 2025 10:30:18 +0800
Subject: [PATCH] 地图
---
src/model/map/OLMap.ts | 66 ++++++++++++++++++++++++---------
1 files changed, 48 insertions(+), 18 deletions(-)
diff --git a/src/model/map/OLMap.ts b/src/model/map/OLMap.ts
index cd4c5df..7434965 100644
--- a/src/model/map/OLMap.ts
+++ b/src/model/map/OLMap.ts
@@ -1,5 +1,7 @@
import { defaultsDeep } from 'lodash-es';
-import { Map as OpenLayerMap, Overlay, View } from 'ol';
+import type { Overlay } from 'ol';
+import { Map as OpenLayerMap, View } from 'ol';
+import { ZoomSlider } from 'ol/control';
import type { Extent } from 'ol/extent';
import { getTopLeft, getWidth } from 'ol/extent';
import Tile from 'ol/layer/Tile';
@@ -9,6 +11,9 @@
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import type { ViewOptions } from 'ol/View';
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import { MarkerOverlay } from './overlay/marker';
export type LangType = 'zh_cn' | 'en';
export const enum GaoDeSourceType {
/** @description 榛樿鍦板浘 */
@@ -20,8 +25,9 @@
/** @description 褰卞儚璺綉 */
SatelliteRoad = 3,
}
+export const MARKER_OVERLAY_CLASS_NAME = 'marker-overlay';
-export const GaoDeSourceTypeMap = {
+export const gaoDeSourceTypeMap = {
[GaoDeSourceType.Default]: '榛樿鍦板浘',
[GaoDeSourceType.Satellite]: '褰卞儚鍦板浘',
[GaoDeSourceType.Vector]: '鐭㈤噺鍦板浘',
@@ -48,7 +54,8 @@
map: OpenLayerMap;
source: XYZ;
private eventMap: Map<OLEventType, Function[]>;
-
+ activeSourceType: Ref<GaoDeSourceType> = ref(GaoDeSourceType.Vector);
+ overlayIsVisible: Ref<boolean> = ref(true);
private emit(eventName: OLEventType, ...args: any[]) {
const handlers = this.eventMap?.get(eventName);
if (handlers) {
@@ -102,8 +109,9 @@
layers: [layer], // 娣诲姞鍥惧眰
view: new View(view),
});
- this.setSourceUrl();
+ this.setSourceUrl(this.activeSourceType.value);
this.listenMapClick();
+ this.addBasicControl();
}
setSourceUrl(type: GaoDeSourceType = GaoDeSourceType.Vector) {
@@ -115,42 +123,47 @@
const markers: Overlay[] = [];
// 鍒涘缓鏍囪鐐�
- dataList.forEach((item) => {
- const marker = this.createMarker(item, markerOpt);
+ dataList.forEach((item, index) => {
+ const marker = this.createMarker(`marker-${index}`, item, markerOpt);
markers.push(marker);
this.map.addOverlay(marker);
});
// 璁＄畻骞惰皟鏁磋鍥捐寖鍥�
- this.adjustViewToMarkers(dataList);
+ this.adjustViewToOverlays(markers);
}
createEleOverlay(dom: string | HTMLElement, position = [0, 0]) {
const ele = typeof dom === 'string' ? (document.querySelector(dom) as HTMLElement) : dom;
if (!ele) return;
- const eleOverlay = new Overlay({
+ const eleOverlay = new MarkerOverlay({
element: ele,
position: position,
positioning: 'top-left',
stopEvent: false,
className: 'z-[999]',
});
- // // 鐢变簬 setVisible 鏄彈淇濇姢鐨勬柟娉�,鏀圭敤 set('visible', true) 鏉ヨ缃彲瑙佹��
- // eleOverlay.set('visible', true);
+ eleOverlay.setVisible(this.overlayIsVisible.value);
+
return eleOverlay;
}
- private createMarker(item: any, markerOpt: any): Overlay {
+
+ private createMarker(id: string, item: any, markerOpt: any): Overlay {
// 鍒涘缓鍥剧墖鍏冪礌
const markerImg = document.createElement('img');
markerImg.src = markerOpt.icon.url;
markerImg.style.width = `${markerOpt.icon.size}px`;
markerImg.style.height = `${markerOpt.icon.size}px`;
markerImg.style.cursor = 'pointer';
+ markerImg.style.userSelect = 'none';
+
const position = fromLonLat(item.position);
// 鍒涘缓 Overlay
- const overlay = new Overlay({
+ const overlay = new MarkerOverlay({
+ id,
+ className: MARKER_OVERLAY_CLASS_NAME,
element: markerImg,
position: position,
positioning: 'center-center',
@@ -163,23 +176,22 @@
if (markerOpt.icon.selectUrl) {
markerImg.src = markerOpt.icon.selectUrl;
}
- markerOpt.click?.(event, overlay, item, position);
+ markerOpt.click?.(event, overlay, item.extData, position);
});
return overlay;
}
- private adjustViewToMarkers(dataList: any[]) {
- // 璁＄畻鎵�鏈夌偣鐨勮寖鍥�
- const extent = dataList.reduce((ext, item) => {
- const coord = fromLonLat(item.position);
+ adjustViewToOverlays(overlays: Overlay[]) {
+ const extent = overlays.reduce<number[] | null>((ext, item) => {
+ const coord = item.getPosition();
+
if (!ext) {
return [coord[0], coord[1], coord[0], coord[1]];
}
return [Math.min(ext[0], coord[0]), Math.min(ext[1], coord[1]), Math.max(ext[2], coord[0]), Math.max(ext[3], coord[1])];
}, null);
- // 璋冩暣瑙嗗浘浠ラ�傚簲鏍囪鐐硅寖鍥�
if (extent) {
this.fitExtend(extent);
}
@@ -206,6 +218,24 @@
});
}
+ toggleMarkerOverlayVisible(visible: boolean) {
+ const overlays = this.map.getOverlays();
+ overlays.forEach((overlay) => {
+ if (overlay instanceof MarkerOverlay) {
+ const overlayElement = overlay.getElement();
+ if (overlayElement) {
+ overlayElement.style.visibility = visible ? 'visible' : 'hidden';
+ }
+ }
+ });
+ this.overlayIsVisible.value = visible;
+ }
+
+ private addBasicControl() {
+ this.map.addControl(new ZoomSlider());
+ // this.map.addControl(new FullScreen());
+ }
+
getWMTS = () => {
const projection = getProjection('EPSG:3857');
const projectionExtent = projection.getExtent();
--
Gitblit v1.9.3