From 1113ced19c32c1b9b65571c48491d9435dbaf085 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期日, 19 一月 2025 12:16:49 +0800
Subject: [PATCH] 图层控制
---
src/model/map/OLMap.ts | 66 ++++++++++++++++++++++++++++-----
1 files changed, 56 insertions(+), 10 deletions(-)
diff --git a/src/model/map/OLMap.ts b/src/model/map/OLMap.ts
index e6c4630..7d2a0be 100644
--- a/src/model/map/OLMap.ts
+++ b/src/model/map/OLMap.ts
@@ -31,10 +31,11 @@
export const MARKER_OVERLAY_CLASS_NAME = 'marker-overlay';
export const gaoDeSourceTypeMap = {
- [GaoDeSourceType.Default]: '榛樿鍦板浘',
- [GaoDeSourceType.Satellite]: '褰卞儚鍦板浘',
- [GaoDeSourceType.Vector]: '鐭㈤噺鍦板浘',
- [GaoDeSourceType.SatelliteRoad]: '褰卞儚璺綉',
+ // [GaoDeSourceType.Default]: '榛樿鍦板浘',
+ [GaoDeSourceType.Vector]: '鏍囧噯鍦板浘',
+
+ [GaoDeSourceType.Satellite]: '鍗槦鍦板浘',
+ [GaoDeSourceType.SatelliteRoad]: '璺綉鍦板浘',
};
export const getGaoDeSourceUrl = (type: GaoDeSourceType, lang: LangType = 'zh_cn') => {
@@ -46,19 +47,23 @@
};
return urlMap[type];
};
+type MapConfig = {
+ sourceType: GaoDeSourceType;
+ markerIsVisible: boolean;
+};
type OLEventType = 'blackClick';
type OLMapOptions = {
container: HTMLDivElement;
view?: ViewOptions;
-};
+} & MapConfig;
export class OLMap {
map: OpenLayerMap;
source: XYZ;
private eventMap: Map<OLEventType, Function[]>;
activeSourceType: Ref<GaoDeSourceType> = ref(GaoDeSourceType.Vector);
- overlayIsVisible: Ref<boolean> = ref(true);
+ markerIsVisible: Ref<boolean> = ref(true);
private emit(eventName: OLEventType, ...args: any[]) {
const handlers = this.eventMap?.get(eventName);
if (handlers) {
@@ -89,11 +94,13 @@
}
constructor(options: OLMapOptions) {
- const { container, view } = defaultsDeep(options, {
+ const { container, view, sourceType, markerIsVisible } = defaultsDeep(options, {
view: {
center: [13247019.404399557, 4721671.572580107],
zoom: 8,
},
+ sourceType: GaoDeSourceType.Vector,
+ markerIsVisible: true,
} as OLMapOptions) as OLMapOptions;
this.source = new XYZ({
crossOrigin: 'anonymous',
@@ -112,6 +119,8 @@
layers: [layer], // 娣诲姞鍥惧眰
view: new View(view),
});
+ this.activeSourceType.value = sourceType;
+ this.markerIsVisible.value = markerIsVisible;
this.setSourceUrl(this.activeSourceType.value);
this.listenMapClick();
this.addBasicControl();
@@ -146,7 +155,7 @@
stopEvent: false,
className: 'z-[999]',
});
- eleOverlay.setVisible(this.overlayIsVisible.value);
+ eleOverlay.setVisible(this.markerIsVisible.value);
return eleOverlay;
}
@@ -232,12 +241,49 @@
}
}
});
- this.overlayIsVisible.value = visible;
+ this.markerIsVisible.value = visible;
+ }
+
+ getConfig(): MapConfig {
+ return {
+ sourceType: this.activeSourceType.value,
+ markerIsVisible: this.markerIsVisible.value,
+ };
+ }
+
+ setConfig(config: MapConfig) {
+ this.activeSourceType.value = config.sourceType;
+ this.markerIsVisible.value = config.markerIsVisible;
+ this.setSourceUrl(this.activeSourceType.value);
+ this.toggleMarkerOverlayVisible(this.markerIsVisible.value);
}
private addBasicControl() {
- this.map.addControl(new ZoomSlider());
+ // this.map.addControl(new ZoomSlider());
// this.map.addControl(new FullScreen());
+ const container = this.map.getViewport();
+ if (!container) return;
+ const olZoom = container.querySelector('.ol-zoom') as HTMLElement;
+ if (!olZoom) return;
+ olZoom.style.display = 'none';
+ }
+
+ /**
+ * 鏀惧ぇ鍦板浘
+ */
+ zoomIn() {
+ const view = this.map.getView();
+ const zoom = view.getZoom();
+ view.setZoom(zoom + 1);
+ }
+
+ /**
+ * 缂╁皬鍦板浘
+ */
+ zoomOut() {
+ const view = this.map.getView();
+ const zoom = view.getZoom();
+ view.setZoom(zoom - 1);
}
getWMTS = () => {
--
Gitblit v1.9.3