From e50196bff10f0196307b2567ed6c0829eadd8ff6 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 10 二月 2025 12:12:25 +0800
Subject: [PATCH] 设备显示隐藏
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue | 223 +++++++++++++++++++++++++++----------------------------
1 files changed, 110 insertions(+), 113 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..ee1ac3e 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue
@@ -34,7 +34,7 @@
</div>
</div>
</div>
- <LayerControl v-if="olMap" :olMap="olMap" class="absolute top-3 left-3 z-10" />
+ <!-- <LayerControl v-if="olMap" :olMap="olMap" class="absolute top-3 left-3 z-10" /> -->
<!-- <PropertyPanel class="absolute top-14 left-10 z-14"></PropertyPanel> -->
<PanelTool
@@ -42,8 +42,10 @@
ref="panelToolRef"
:propertyMap="propertyMap"
:propertyConfigMap="propertyConfigMap"
- class="absolute top-12 right-2 z-14"
+ class="absolute top-0 right-2 z-14 h-full"
:olMap="olMap"
+ :isFullscreen="isFullscreen"
+ @toggleFullScreen="toggleFullScreen"
></PanelTool>
<!-- <el-button class="absolute top-3 right-4" @click="changeTheme" type="primary">鍒囨崲涓婚</el-button> -->
</div>
@@ -69,6 +71,7 @@
import LayerControl from './LayerControl.vue';
import PanelTool from './panelTool/index.vue';
import {
+ getMapDrawStyles,
getMapLayerGroupList,
getMapLayersByPost,
getMapThemeList,
@@ -81,53 +84,33 @@
import { MarkerOverlay } from '/@/model/map/overlay/marker';
import { useCompRef } from '/@/utils/types';
import { formatDate } from '/@/utils/formatTime';
+import { MapPanelTool } from './types';
const panelToolRef = useCompRef(PanelTool);
+
const props = withDefaults(
defineProps<{
data: any;
config?: {
sourceType: GaoDeSourceType;
- markerIsVisible: boolean;
};
+ isFullscreen: boolean;
}>(),
{
config: () => ({
sourceType: GaoDeSourceType.Vector,
- markerIsVisible: true,
}),
}
);
-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 ?? [];
});
-const emit = defineEmits(['markerClick', 'closeInfoWindow']);
+const emit = defineEmits(['markerClick', 'closeInfoWindow','toggleFullScreen']);
+
+const toggleFullScreen = () => {
+ emit('toggleFullScreen');
+};
const containerRef = ref<HTMLDivElement>(null);
const infoWindowRef = ref<HTMLDivElement>(null);
@@ -282,6 +265,7 @@
const handleVectorTileClick = (feature, layer) => {
panelToolRef.value.featureClick(feature);
+ feature && panelToolRef.value.setActivePanel(MapPanelTool.Property);
// setActiveStyle(feature,layer);
};
const propertyMap = ref({});
@@ -297,9 +281,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 +297,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 +309,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 +423,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);
@@ -457,7 +455,6 @@
olMap.value = new OLMap({
container: containerRef.value,
sourceType: props.config?.sourceType,
- markerIsVisible: props.config?.markerIsVisible,
});
addMarkerLayer();
--
Gitblit v1.9.3