From 8572e2e0c1655f1cf2a71da6b80ce132cbf545e6 Mon Sep 17 00:00:00 2001
From: gerson <1405270578@qq.com>
Date: 星期日, 09 二月 2025 21:13:14 +0800
Subject: [PATCH] 主题设置问题
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue | 204 ++++++++++++++++++++++++--------------------------
1 files changed, 97 insertions(+), 107 deletions(-)
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 98dc056..5ee5aa0 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,
@@ -99,31 +100,6 @@
}
);
-const changeTheme = async (themeId: string) => {
- const res = await switchMapTheme({
- theme_id: themeId,
- time: formatDate(new Date()),
- });
- const styles = (res?.styles ?? []).map((item) =>
- item.PSIZE
- ? new Style({
- image: new Circle({
- radius: item.PSIZE,
- fill: new Fill({ color: `#${item.PCOLOR}` }),
- }),
- })
- : null
- );
- const junctionsStyle = res?.['O_WDM_JUNCTIONS'] ?? {};
- junctionLayer?.setStyle((feature) => {
- const oname = feature.get('oname');
- if (!oname) return null;
- const styleIndex = junctionsStyle[oname]?.style_id;
- if (styleIndex == null) return null;
- const style = styles[styleIndex];
- return style;
- });
-};
const colsArray = computed(() => {
return props.data.cols ?? [];
});
@@ -297,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 = '';
}
@@ -314,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 }),
@@ -326,65 +301,99 @@
}),
});
};
-const getLayerStyles = (layerId: string) => {
- switch (layerId) {
- case 'junction':
- const styleMap: Record<string, Style> = {};
- return function (feature, resolution) {
- const size = feature.get('psize');
- const pcolor = feature.get('pcolor');
- const otype = feature.get('otype');
- if (!size) return null;
- const key = `${size}_${pcolor}`;
- if (!styleMap[key]) {
- styleMap[key] = new Style({
- image: new Circle({
- radius: size,
- fill: new Fill({ color: `#${pcolor}` }),
- }),
- });
- }
-
- const textStyle = createTextStyle(feature, resolution);
-
- return [styleMap[key], textStyle];
- };
- case 'pipes':
- const styleMap2 = {};
-
- return function (feature, resolution) {
- const size = feature.get('lsize');
- const lcolor = feature.get('lcolor');
- const otype = feature.get('otype');
- if (!size) return null;
- const key = `${size}_${lcolor}`;
- if (!styleMap2[key]) {
- styleMap2[key] = new Style({
- // image: new Circle({
- // radius: size,
- // fill: new Fill({ color: `#${color}` }),
- // }),
- stroke: new Stroke({
- color: `#${lcolor}`,
- width: size,
- }),
- });
- }
-
- return styleMap2[key];
- };
- default:
- return undefined;
- }
+const styleMap: Record<string, Record<string, Style>> = {
+ point: {},
+ line: {},
+ polygon: {},
};
-let junctionLayer: VectorTileLayer = null;
+const unsupportedLayers = ['dma1', 'dma2', 'dma3'];
+const layerStyleFunc = function (feature, resolution) {
+ const shape = feature.getGeometry().getType();
+ const styles = [];
+ switch (shape) {
+ case 'Point':
+ const pSize = feature.get('psize');
+
+ const pcolor = feature.get('pcolor');
+ const pstyle = feature.get('pstyle');
+ const pointStyle = olMap.value.getPointStyles({
+ size: pSize,
+ color: pcolor,
+ style: pstyle,
+ });
+
+ styles.push(pointStyle);
+ break;
+ case 'LineString':
+ const lSize = feature.get('lsize');
+ const lColor = feature.get('lcolor');
+ const lstyle = feature.get('lstyle');
+ const pSize1 = feature.get('psize');
+ const pcolor1 = feature.get('pcolor');
+ const pStyle1 = feature.get('pstyle');
+ const lineStyle = olMap.value.getLineStyles({
+ lsize: lSize,
+ lcolor: lColor,
+ lstyle: lstyle,
+ psize: pSize1,
+ pcolor: pcolor1,
+ pstyle: pStyle1,
+ });
+ styles.push(...lineStyle);
+ break;
+ case 'Polygon':
+ const pColor = feature.get('pcolor');
+ const lSize1 = feature.get('lsize');
+ const lColor1 = feature.get('lcolor');
+ const lstyle1 = feature.get('lstyle');
+ const polygonStyle = olMap.value.getPolygonStyles({
+ pcolor: pColor,
+ lsize: lSize1,
+ lcolor: lColor1,
+ lstyle: lstyle1,
+ });
+ styles.push(...polygonStyle);
+ break;
+ default:
+ break;
+ }
+
+ // switch (otype) {
+ // case 'WDM_JUNCTIONS':
+ // const textStyle = createTextStyle(feature, resolution);
+ // styles.push(textStyle);
+
+ // case 'WDM_PIPES':
+ // break;
+ // }
+ //#region ====================== 娣诲姞鏍囨敞 ======================
+ const tString = feature.get('tstring');
+
+ const tStringStyle = olMap.value.getLabelStyles({
+ textContent: tString,
+ resolution,
+ });
+ if (tStringStyle) {
+ styles.push(tStringStyle);
+ }
+ //#endregion
+
+ return styles;
+};
const getGroupList = async () => {
const res = await getMapLayerGroupList();
const groupList = res?.values ?? [];
return groupList;
+};
+
+const getDrawStyles = async () => {
+ const res = await getMapDrawStyles();
+ const styleList = res?.values ?? [];
+ // console.log("馃殌 ~ styleList:", styleList)
+ olMap.value.setDrawStyles(styleList);
};
const getThemeList = async () => {
@@ -406,45 +415,26 @@
id,
title: curVal.title,
type: 'theme',
- _isSet: false,
- get isSet() {
- return this._isSet;
- },
- set isSet(val) {
- this._isSet = val;
- if(val){
- const style = junctionLayer.getStyleFunction();
- junctionLayer.set('originStyle',style);
- changeTheme(this.id)
-
- }else{
- const originStyle = junctionLayer.get('originStyle');
- console.log("馃殌 ~ originStyle:", originStyle)
- junctionLayer.setStyle(originStyle);
- }
- },
+ activeTheme: null,
+ legends: null,
};
mapGroupItem.children.push(data);
return preVal;
}, []);
olMap.value.setAllThemes(themeTreeData);
- console.log('馃殌 ~ themeTreeData:', themeTreeData);
};
-
const initVectorTileLayer = async () => {
+ await getDrawStyles();
const res = await getMapLayersByPost();
const layers = reverse(res?.layers ?? []);
if (layers.length === 0) return;
const layerModels = [];
for (const item of layers) {
- const layer = olMap.value.addCustomLayer(
- `${MAIN_URL}map/get_vector_tile?x={x}&y={y}&z={z}&layer_id=${item.id}`,
- getLayerStyles(item.id)
- );
+ const styleFunc = olMap.value.unsupportedLayers.includes(item.id) ? undefined : layerStyleFunc;
+ const layer = olMap.value.addCustomLayer(`${MAIN_URL}map/get_vector_tile?x={x}&y={y}&z={z}&layer_id=${item.id}`, styleFunc);
+
+ layer.set('originStyle', styleFunc);
layerModels.push(layer);
- if (item.id === 'junction') {
- junctionLayer = layer;
- }
}
getGroupList().then((groupList) => {
olMap.value.setAllLayers(layerModels, layers, groupList);
--
Gitblit v1.9.3