From 6e2557b3ae3e1b43bc01a5122f5fd4aa9b83d755 Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期日, 09 二月 2025 18:51:33 +0800
Subject: [PATCH] 整理绘制
---
vite.config.ts | 2
src/model/map/OLMap.ts | 160 +++++++++++++++++++++++++-
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/ThemeControl.vue | 54 +++-----
src/api/map/index.ts | 15 +
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue | 77 +++++-------
5 files changed, 221 insertions(+), 87 deletions(-)
diff --git a/src/api/map/index.ts b/src/api/map/index.ts
index f478dc4..e741d4f 100644
--- a/src/api/map/index.ts
+++ b/src/api/map/index.ts
@@ -53,7 +53,6 @@
method: 'post',
params: {},
data: params,
-
});
/**
@@ -66,8 +65,7 @@
params: {},
});
-
- /**
+/**
* @description 鑾峰彇鍦板浘灞炴�у垪琛�
**/
export const getMapThemeList = () =>
@@ -77,5 +75,12 @@
params: {},
});
-
-
\ No newline at end of file
+/**
+ * @description 鑾峰彇鍦板浘灞炴�у垪琛�
+ **/
+export const getMapDrawStyles = () =>
+ request({
+ url: `/map/get_map_draw_styles`,
+ method: 'post',
+ params: {},
+ });
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue
index d47ad85..ba1a401 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue
@@ -69,6 +69,7 @@
import LayerControl from './LayerControl.vue';
import PanelTool from './panelTool/index.vue';
import {
+ getMapDrawStyles,
getMapLayerGroupList,
getMapLayersByPost,
getMapThemeList,
@@ -98,7 +99,6 @@
}),
}
);
-
const colsArray = computed(() => {
return props.data.cols ?? [];
@@ -273,9 +273,8 @@
const maxResolution = 1;
-const getText = function (feature, resolution) {
- const oname = feature.get('oname');
- let text = `first-${oname[0]}`;
+const getText = function (textContent, resolution) {
+ let text = `${textContent}`;
if (resolution > maxResolution) {
text = '';
}
@@ -290,10 +289,10 @@
return text;
};
-const createTextStyle = (feature, resolution) => {
+const createTextStyle = (textContent, resolution) => {
return new Style({
text: new Text({
- text: getText(feature, resolution),
+ text: getText(textContent, resolution),
font: '14px Arial',
fill: new Fill({ color: '#000' }),
stroke: new Stroke({ color: '#fff', width: 2 }),
@@ -304,8 +303,8 @@
};
const styleMap: Record<string, Record<string, Style>> = {
- junction: {},
- pipe: {},
+ point: {},
+ line: {},
polygon: {},
};
/** @description 宸茬粡鍋氱殑layer锛屽悗缁叏閮ㄥ仛濂斤紝鍙互涓嶅仛鍒ゆ柇 */
@@ -316,41 +315,28 @@
switch (shape) {
case 'Point':
const pSize = feature.get('psize');
- if (!pSize) return null;
const pcolor = feature.get('pcolor');
- const pkey = `${pSize}_${pcolor}`;
+ const pstyle = feature.get('pstyle');
+ const pointStyle = olMap.value.getPointStyles({
+ size: pSize,
+ color: pcolor,
+ style: pstyle,
+ });
- if (!styleMap.junction[pkey]) {
- styleMap.junction[pkey] = new Style({
- image: new Circle({
- radius: pSize,
- fill: new Fill({ color: `#${pcolor}` }),
- }),
- });
- }
-
- // const textStyle = createTextStyle(feature, resolution);
- styles.push(styleMap.junction[pkey]);
+ styles.push(pointStyle);
break;
case 'LineString':
const lSize = feature.get('lsize');
- if (!lSize) return null;
const lColor = feature.get('lcolor');
- const lKey = `${lSize}_${lColor}`;
- if (!styleMap.pipe[lKey]) {
- styleMap.pipe[lKey] = new Style({
- // image: new Circle({
- // radius: lsize,
- // fill: new Fill({ color: `#${color}` }),
- // }),
- stroke: new Stroke({
- color: `#${lColor}`,
- width: lSize,
- }),
- });
- }
- styles.push(styleMap.pipe[lKey]);
+ const lstyle = feature.get('lstyle');
+
+ const lineStyle = olMap.value.getLineStyles({
+ lsize: lSize,
+ lcolor: lColor,
+ lstyle: lstyle,
+ });
+ styles.push(...lineStyle);
break;
case 'Polygon':
break;
@@ -358,7 +344,6 @@
break;
}
- const otype = feature.get('otype');
// switch (otype) {
// case 'WDM_JUNCTIONS':
// const textStyle = createTextStyle(feature, resolution);
@@ -369,9 +354,13 @@
// }
//#region ====================== 娣诲姞鏍囨敞 ======================
const tString = feature.get('tstring');
- if (tString) {
- const textStyle = createTextStyle(feature, resolution);
- styles.push(textStyle);
+
+ const tStringStyle = olMap.value.getLabelStyles({
+ textContent: tString,
+ resolution,
+ });
+ if (tStringStyle) {
+ styles.push(tStringStyle);
}
//#endregion
@@ -384,6 +373,11 @@
return groupList;
};
+const getDrawStyles = async () => {
+ const res = await getMapDrawStyles();
+ const styleList = res?.values ?? [];
+ olMap.value.setDrawStyles(styleList);
+};
const getThemeList = async () => {
const res = await getMapThemeList();
@@ -406,7 +400,6 @@
type: 'theme',
activeTheme: null,
legends: null,
-
};
mapGroupItem.children.push(data);
return preVal;
@@ -414,6 +407,7 @@
olMap.value.setAllThemes(themeTreeData);
};
const initVectorTileLayer = async () => {
+ await getDrawStyles();
const res = await getMapLayersByPost();
const layers = reverse(res?.layers ?? []);
if (layers.length === 0) return;
@@ -424,7 +418,6 @@
layer.set('originStyle', styleFunc);
layerModels.push(layer);
-
}
getGroupList().then((groupList) => {
olMap.value.setAllLayers(layerModels, layers, groupList);
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/ThemeControl.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/ThemeControl.vue
index 4dcd7de..5a7f985 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/ThemeControl.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/ThemeControl.vue
@@ -308,42 +308,30 @@
switch (shape) {
case 'Point':
const pSize = themeStyle?.PSIZE ?? feature.get('psize');
- if (!pSize) return null;
const pcolor = themeStyle?.PCOLOR ?? feature.get('pcolor');
- const pkey = `${pSize}_${pcolor}`;
- if (!styleMap.junction[pkey]) {
- styleMap.junction[pkey] = new Style({
- image: new Circle({
- radius: pSize,
- fill: new Fill({ color: `#${pcolor}` }),
- // fill: new Fill({ color: `blue` }),
- }),
- });
- }
+ const pStyle = themeStyle?.PSTYLE ?? feature.get('pstyle');
- // const textStyle = createTextStyle(feature, resolution);
- styles.push(styleMap.junction[pkey]);
+ const pointStyle = props.olMap?.getPointStyles({
+ size: pSize,
+ color: pcolor,
+ style: pStyle,
+ });
+ pointStyle && styles.push(pointStyle);
break;
case 'LineString':
const lSize = themeStyle?.LSIZE ?? feature.get('lsize');
- if (!lSize) return null;
const lColor = themeStyle?.LCOLOR ?? feature.get('lcolor');
- const lKey = `${lSize}_${lColor}`;
- if (!styleMap.pipe[lKey]) {
- styleMap.pipe[lKey] = new Style({
- // image: new Circle({
- // radius: lsize,
- // fill: new Fill({ color: `#${color}` }),
- // }),
- stroke: new Stroke({
- color: `#${lColor}`,
- width: lSize,
- }),
- });
- }
- styles.push(styleMap.pipe[lKey]);
+ const lStyle = themeStyle?.LSTYLE ?? feature.get('lstyle');
+
+ const lineStyle = props.olMap?.getLineStyles({
+ lsize: lSize,
+ lcolor: lColor,
+ lstyle: lStyle,
+ });
+ lineStyle && styles.push(...lineStyle);
+
break;
case 'Polygon':
break;
@@ -361,10 +349,11 @@
// }
//#region ====================== 娣诲姞鏍囨敞 ======================
const tString = themeStyle?.TSTRING ?? feature.get('tstring');
- if (tString) {
- const textStyle = createTextStyle(feature, resolution);
- styles.push(textStyle);
- }
+ const tStringStyle = props.olMap?.getLabelStyles({
+ textContent: tString,
+ resolution,
+ });
+ tStringStyle && styles.push(tStringStyle);
//#endregion
return styles;
@@ -400,7 +389,6 @@
const legends = await changeTheme(ids);
legendList.value = parseLegends(legends);
};
-
watch(
() => themeInfo.value,
diff --git a/src/model/map/OLMap.ts b/src/model/map/OLMap.ts
index e1869c7..810b19e 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 榛樿鍦板浘 */
@@ -80,6 +82,8 @@
/** @description 鍥惧眰鎺у埗淇℃伅 */
layerInfo = ref([] as any[]);
+
+ drawStyles = ref([] as any[]);
/** @description 涓婚淇℃伅 */
themeInfo = ref([] as any[]);
@@ -151,6 +155,150 @@
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;
+ if (!pSize) return null;
+
+ 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 }) {
+ const lSize = config.lsize;
+ if (!lSize) return null;
+ const lColor = config.lcolor;
+ const lstyle = config.lstyle;
+
+ 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,
+ }),
+ });
+ }
+ return [this.lineStyleMap[lKey]];
+ }
+
+ 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) {
@@ -276,16 +424,16 @@
if (feature !== this.activeFeature.value) {
this.emit('featureChange', feature, layer);
}
- if(feature){
- console.log("馃殌 ~ feature:", feature);
+ if (feature) {
+ console.log('馃殌 ~ feature:', feature);
const otype = feature.get('otype');
- console.log("馃殌 ~ otype:", otype)
+ console.log('馃殌 ~ otype:', otype);
const oname = feature.get('oname');
- console.log("馃殌 ~ oname:", oname)
+ console.log('馃殌 ~ oname:', oname);
const geometryType = feature.getGeometry().getType();
- console.log("馃殌 ~ geometryType:", geometryType)
+ console.log('馃殌 ~ geometryType:', geometryType);
const properties = feature.getProperties();
- console.log("馃殌 ~ properties:", properties)
+ console.log('馃殌 ~ properties:', properties);
}
this.activeFeature.value = feature;
// this.displayFeatureInfo(feature);
diff --git a/vite.config.ts b/vite.config.ts
index 27dae42..1c82ca0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -58,7 +58,7 @@
host: '0.0.0.0',
port: env.VITE_PORT as unknown as number,
open: JSON.parse(env.VITE_OPEN),
- hmr: true,
+ hmr: false,
proxy: {
'/events': {
target: 'http://localhost:3000',
--
Gitblit v1.9.3