From e50196bff10f0196307b2567ed6c0829eadd8ff6 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 10 二月 2025 12:12:25 +0800
Subject: [PATCH] 设备显示隐藏
---
src/model/map/OLMap.ts | 259 +++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 247 insertions(+), 12 deletions(-)
diff --git a/src/model/map/OLMap.ts b/src/model/map/OLMap.ts
index 602cb7e..c9cbde8 100644
--- a/src/model/map/OLMap.ts
+++ b/src/model/map/OLMap.ts
@@ -24,6 +24,8 @@
import type { Ref, ShallowRef } from 'vue';
import { markRaw, ref } from 'vue';
import { MarkerOverlay } from './overlay/marker';
+import { Text } from 'ol/style';
+
export type LangType = 'zh_cn' | 'en';
export const enum GaoDeSourceType {
/** @description 榛樿鍦板浘 */
@@ -59,7 +61,6 @@
};
type MapConfig = {
sourceType: GaoDeSourceType;
- markerIsVisible: boolean;
};
type OLEventType = 'blackClick' | 'featureChange' | 'featureHoverChange';
@@ -77,15 +78,18 @@
map: OpenLayerMap;
source: XYZ;
private eventMap: Map<OLEventType, Function[]>;
+ /** @description 鎺掗櫎鏈仛鐨刲ayer锛屽悗缁叏閮ㄥ仛濂斤紝鍙互涓嶅仛鍒ゆ柇 */
+ unsupportedLayers = [];
/** @description 鍥惧眰鎺у埗淇℃伅 */
layerInfo = ref([] as any[]);
+
+ drawStyles = ref([] as any[]);
/** @description 涓婚淇℃伅 */
themeInfo = ref([] as any[]);
activeSourceType: Ref<GaoDeSourceType> = ref(GaoDeSourceType.Vector);
- markerIsVisible: Ref<boolean> = ref(true);
interactLayer: VectorLayer<VectorSource<Feature<Geometry>>, Feature<Geometry>> = null;
/** @description 褰撳墠婵�娲荤姸鎬� feature */
@@ -120,13 +124,12 @@
}
constructor(options: OLMapOptions) {
- const { container, view, sourceType, markerIsVisible } = defaultsDeep(options, {
+ const { container, view, sourceType } = 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',
@@ -147,10 +150,182 @@
interactions: olDefaults({ doubleClickZoom: false }),
});
this.activeSourceType.value = sourceType;
- this.markerIsVisible.value = markerIsVisible;
this.applySourceType(this.activeSourceType.value);
this.listenMapClick();
this.addBasicControl();
+ }
+
+ // 淇濆瓨鐐规牱寮忕紦瀛�
+ pointStyeMap: Record<string, Style> = {};
+
+ /**
+ * 鏍规嵁鐐圭殑閰嶇疆鑾峰彇鏍峰紡
+ * @param config
+ * @returns
+ */
+ getPointStyles(config: { size; color; style }) {
+ const pSize = config.size ?? 15;
+
+ const pcolor = config.color;
+ const pstyle = config.style;
+
+ const pkey = `${pstyle}_${pSize}_${pcolor}`;
+
+ if (!this.pointStyeMap[pkey]) {
+ const drawStyle = this.drawStyles.value.find((item) => item.id === pstyle + '');
+ const drawStyleType = drawStyle?.type;
+ const config = drawStyle?.config;
+
+ const drawStyleConfigType = drawStyle?.config?.type;
+ if (drawStyleType === 'POINT') {
+ if (drawStyleConfigType === 'circle') {
+ this.pointStyeMap[pkey] = new Style({
+ image: new Circle({
+ radius: pSize,
+ fill: new Fill({ color: `#${pcolor}` }),
+ }),
+ });
+ } else if (drawStyleConfigType === 'font') {
+ this.pointStyeMap[pkey] = new Style({
+ text: new Text({
+ font: `${pSize}px "ywifont"`,
+ text: config?.text ?? '',
+ fill: new Fill({ color: `#${pcolor}` }),
+ }),
+ });
+ } else {
+ this.pointStyeMap[pkey] = new Style({
+ image: new Circle({
+ radius: pSize,
+ fill: new Fill({ color: `#${pcolor}` }),
+ }),
+ });
+ }
+ } else {
+ this.pointStyeMap[pkey] = new Style({
+ image: new Circle({
+ radius: pSize,
+ fill: new Fill({ color: `#${pcolor}` }),
+ }),
+ });
+ }
+ }
+ return this.pointStyeMap[pkey];
+ }
+
+ // 淇濆瓨绾挎牱寮忕紦瀛�
+ lineStyleMap: Record<string, Style> = {};
+
+ /**
+ * 鏍规嵁绾跨殑閰嶇疆鑾峰彇鏍峰紡
+ * @param config
+ */
+ getLineStyles(config: { lsize; lcolor; lstyle; psize?; pcolor?; pstyle? }) {
+ const lSize = config.lsize;
+ if (!lSize) return null;
+ const lColor = config.lcolor;
+ const lstyle = config.lstyle;
+ const styles = [];
+ const lKey = `${lstyle}_${lSize}_${lColor}`;
+ if (!this.lineStyleMap[lKey]) {
+ const drawStyle = this.drawStyles.value.find((item) => item.id === lstyle + '');
+ const drawStyleType = drawStyle?.type;
+ const config = drawStyle?.config;
+ this.lineStyleMap[lKey] = new Style({
+ // image: new Circle({
+ // radius: lsize,
+ // fill: new Fill({ color: `#${color}` }),
+ // }),
+ stroke: new Stroke({
+ color: `#${lColor}`,
+ width: lSize,
+ }),
+ });
+ }
+ styles.push(this.lineStyleMap[lKey]);
+
+ const hasPoint = Object.keys(config).some((key) => key === 'psize' && !!config[key]);
+ if (hasPoint) {
+ const psize = config.psize;
+ const pcolor = config.pcolor;
+ const pstyle = config.pstyle;
+ const pointStyle = this.getPointStyles({ size: psize, color: pcolor, style: pstyle });
+ styles.push(pointStyle);
+ }
+ return styles;
+ }
+ polygonStyleMap: Record<string, Style> = {};
+ getPolygonStyles(config: { pcolor; lstyle; lsize; lcolor }) {
+ const styles = [];
+ const pColor = config.pcolor;
+ const key = pColor;
+ if (!this.polygonStyleMap[key]) {
+ const polygonStyle = new Style({
+ fill: new Fill({ color: `#${pColor}` }),
+ });
+ styles.push(polygonStyle);
+ }
+
+ const lineStyle = this.getLineStyles({
+ lsize: config.lsize,
+ lcolor: config.lcolor,
+ lstyle: config.lstyle,
+ });
+ lineStyle && styles.push(...lineStyle);
+ return styles;
+ }
+
+ private maxTextResolution = 1;
+ getText(textContent, resolution) {
+ let text = `${textContent}`;
+ if (resolution > this.maxTextResolution) {
+ text = '';
+ }
+
+ // else if (type == 'hide') {
+ // text = '';
+ // } else if (type == 'shorten') {
+ // text = text.trunc(12);
+ // } else if (type == 'wrap' && (!dom.placement || dom.placement.value != 'line')) {
+ // text = stringDivider(text, 16, '\n');
+ // }
+
+ return text;
+ }
+
+ createTextStyle(textContent, resolution) {
+ return new Style({
+ text: new Text({
+ text: this.getText(textContent, resolution),
+ font: '14px Arial',
+ fill: new Fill({ color: '#000' }),
+ stroke: new Stroke({ color: '#fff', width: 2 }),
+ offsetX: 10, // 鏂囧瓧鐩稿浜庡嚑浣曚腑蹇冪殑姘村钩鍋忕Щ
+ offsetY: 20, // 鏂囧瓧鐩稿浜庡嚑浣曚腑蹇冪殑鍨傜洿鍋忕Щ
+ }),
+ });
+ }
+
+ // 淇濆瓨鏍囩鏍峰紡缂撳瓨
+ labelStyleMap: Record<string, Style> = {};
+
+ /**
+ * 鏍规嵁鏍囩鐨勯厤缃幏鍙栨牱寮�
+ * @param config
+ */
+ getLabelStyles(config: { textContent; resolution }) {
+ const textContent = config.textContent;
+ if (!textContent) return null;
+ const resolution = config.resolution;
+ if (!textContent) return null;
+ if (!this.labelStyleMap[textContent]) {
+ this.labelStyleMap[textContent] = this.createTextStyle(textContent, resolution);
+ }
+ return this.labelStyleMap[textContent];
+ }
+
+ setDrawStyles(styles: any[]) {
+ this.drawStyles.value = styles;
}
applySourceType(type: GaoDeSourceType = GaoDeSourceType.Vector) {
@@ -177,6 +352,24 @@
this.adjustViewToOverlays(markers);
}
+
+ checkEquipIsShow() {
+ for (const item of this.layerInfo.value) {
+ if (item.id === 'equip') {
+ return item.isVisible;
+ }
+ }
+ return false;
+ }
+
+ getEquipOverlay() {
+ for (const item of this.layerInfo.value) {
+ if (item.type === 'equip') {
+ return item;
+ }
+
+ }
+ }
createEleOverlay(dom: string | HTMLElement, position = [0, 0]) {
const ele = typeof dom === 'string' ? (document.querySelector(dom) as HTMLElement) : dom;
if (!ele) return;
@@ -187,7 +380,7 @@
stopEvent: false,
className: 'z-[999]',
});
- eleOverlay.setVisible(this.markerIsVisible.value);
+ eleOverlay.setVisible(this.checkEquipIsShow());
return eleOverlay;
}
@@ -276,6 +469,17 @@
if (feature !== this.activeFeature.value) {
this.emit('featureChange', feature, layer);
}
+ if (feature) {
+ console.log('馃殌 ~ feature:', feature);
+ const otype = feature.get('otype');
+ console.log('馃殌 ~ otype:', otype);
+ const oname = feature.get('oname');
+ console.log('馃殌 ~ oname:', oname);
+ const geometryType = feature.getGeometry().getType();
+ console.log('馃殌 ~ geometryType:', geometryType);
+ const properties = feature.getProperties();
+ console.log('馃殌 ~ properties:', properties);
+ }
this.activeFeature.value = feature;
// this.displayFeatureInfo(feature);
});
@@ -283,6 +487,27 @@
setAllThemes(themeInfo) {
this.themeInfo.value = themeInfo;
+ }
+
+ getAllLayers() {
+ const allLayers = this.layerInfo.value.reduce((preVal, curVal) => {
+ if (preVal.children && preVal.children.length > 0) {
+ return preVal.concat(curVal.children.map((item) => item));
+ } else {
+ return preVal;
+ }
+ }, []);
+ return allLayers;
+ }
+
+ getAllLayerModels() {
+ return this.layerInfo.value.reduce((preVal, curVal) => {
+ if (preVal.children && preVal.children.length > 0) {
+ return preVal.concat(curVal.children.map((item) => item.model));
+ } else {
+ return preVal;
+ }
+ }, []);
}
/** @description 璁板綍鎵�鏈夊浘灞� */
@@ -302,7 +527,6 @@
// },
// };
// });
- console.log('馃殌 ~ layerGroup:', layerGroup);
this.layerInfo.value = layerGroup.reduce((preVal, curVal) => {
const group = curVal.group;
const groupId = `group-${group}`;
@@ -336,7 +560,22 @@
mapGroupItem.children.push(data);
return preVal;
}, []);
- console.log('馃殌 ~ this.layerInfo.value:', this.layerInfo.value);
+ const that = this;
+ this.layerInfo.value.push({
+ id: 'equip',
+ title: '鐩戞祴璁惧',
+ children: [],
+ _isVisible: true,
+ get isVisible() {
+ return this._isVisible;
+ },
+ set isVisible(val) {
+ console.log("馃殌 ~ val:", val)
+ this._isVisible = val;
+ that.toggleMarkerOverlayVisible(val);
+ },
+ type: 'equip',
+ });
}
/**
@@ -365,21 +604,17 @@
}
}
});
- 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.applySourceType(this.activeSourceType.value);
- this.toggleMarkerOverlayVisible(this.markerIsVisible.value);
}
private addBasicControl() {
--
Gitblit v1.9.3