From e792d4d46e406da8d0a4ae8ad97db34a95f1c66a Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 10 二月 2025 17:31:08 +0800
Subject: [PATCH] 高亮问题
---
vite.config.ts | 2
src/model/map/OLMap.ts | 92 ++++++++++++++++++++++++++++++++++------------
package.json | 1
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue | 2 +
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/PropertyPanel.vue | 20 +++++++--
5 files changed, 86 insertions(+), 31 deletions(-)
diff --git a/package.json b/package.json
index 64196bd..5b93cc9 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
"fix-memory-limit": "cross-env LIMIT=8048 increase-memory-limit"
},
"dependencies": {
-
"@amap/amap-jsapi-loader": "^1.0.1",
"@amap/amap-jsapi-types": "^0.0.15",
"@element-plus/icons-vue": "^2.1.0",
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue
index c89a8a8..14b6778 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue
@@ -94,6 +94,8 @@
}
}
});
+
+ props.olMap.displayFeatureInfo(null);
};
const handleNodeClick = () => {};
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/PropertyPanel.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/PropertyPanel.vue
index 43942d1..272cbdc 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/PropertyPanel.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/PropertyPanel.vue
@@ -1,14 +1,14 @@
<template>
- <div class="property-panel bg-white flex-col" style="display: flex">
- <div class="bg-white rounded flex-0">
+ <div class="property-panel bg-white flex-col w-[340px]" style="display: flex">
+ <div class="bg-white rounded flex-0 h-full flex flex-col">
<div class="header flex-items-center pb-1.5" style="border-bottom: 1px solid black">
<div class="flex-items-center w-full">
<span class="ywifont ywicon-guanbi cursor-pointer mr-1.5 flex-0" @click="closeClick"></span>
<span class="text-lg font-bold over-ellipsis flex-auto">{{ propertyTitle }}</span>
</div>
</div>
- <div class="content rounded-lg max-h-[700px] overflow-y-auto min-h-[600px]">
- <el-collapse v-model="activeNames" @change="handleChange" class="mt-2 h-full">
+ <div class="content rounded-lg overflow-y-auto mt-2">
+ <el-collapse v-model="activeNames" @change="handleChange" class="h-full">
<el-collapse-item v-for="group in propertyGroupList" :key="group.type" :title="group.title" :name="group.type" class="">
<el-table
class="collapse-table"
@@ -20,7 +20,15 @@
>
<el-table-column prop="date" label="Date" min-width="40%" show-overflow-tooltip>
<template #default="scope">
- {{ scope.row.info.title }}
+
+ <div v-if="scope.row.info.unit" class="flex-items-center">
+ <el-tooltip :disabled="disableTooltip" effect="dark" :content="scope.row.info.title" placement="top-start">
+ <span class="over-ellipsis " @mouseover="textMouseOver($event)"> {{ scope.row.info.title }}</span>
+ </el-tooltip>
+
+ <span> {{`锛�${scope.row.info.unit}锛塦}}</span>
+ </div>
+ <span v-else>{{ scope.row.info.title }}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="Name">
@@ -53,6 +61,8 @@
const activeNames = ref(['1']);
const { disableTooltip, textMouseOver } = useTextOverflow();
+
+
const handleChange = (val) => {};
const closeClick = () => {
emit('close');
diff --git a/src/model/map/OLMap.ts b/src/model/map/OLMap.ts
index c9cbde8..db0bbea 100644
--- a/src/model/map/OLMap.ts
+++ b/src/model/map/OLMap.ts
@@ -25,6 +25,9 @@
import { markRaw, ref } from 'vue';
import { MarkerOverlay } from './overlay/marker';
import { Text } from 'ol/style';
+import { Select } from 'ol/interaction';
+import { click } from 'ol/events/condition';
+import { Polygon } from 'ol/geom';
export type LangType = 'zh_cn' | 'en';
export const enum GaoDeSourceType {
@@ -155,6 +158,46 @@
this.addBasicControl();
}
+ hightLightColor: '0000FFFF';
+ sizeRate: 0;
+
+ getPointHighLightStyle(feature) {
+ if (!feature) return null;
+ let pSize = feature.get('psize') ?? 15;
+ pSize += pSize * this.sizeRate;
+
+ const pcolor = this.hightLightColor;
+ const pstyle = feature.get('pstyle');
+
+ return this.getPointStyles({ color: pcolor, size: pSize, style: pstyle });
+ }
+
+ getLineHighLightStyle(feature) {
+ if (!feature) return null;
+
+ const lcolor = this.hightLightColor;
+ let lsize = feature.get('lsize') ?? 15;
+ lsize += lsize * this.sizeRate;
+ const lstyle = feature.get('lstyle');
+ return this.getLineStyles({ lsize: lsize, lcolor: lcolor, lstyle: lstyle });
+ }
+
+ getPolygonHighLightStyle(feature) {
+ if (!feature) return null;
+
+ const lcolor = this.hightLightColor;
+ // return this.getPolygonStyles({ pcolor: lcolor, lstyle: 'default', lsize: 2 });
+ return new Style({
+ stroke: new Stroke({
+ color: lcolor,
+ width: 5,
+ }),
+ // fill: new Fill({
+ // color: lcolor,
+ // }),
+ });
+ }
+
// 淇濆瓨鐐规牱寮忕紦瀛�
pointStyeMap: Record<string, Style> = {};
@@ -164,7 +207,7 @@
* @returns
*/
getPointStyles(config: { size; color; style }) {
- const pSize = config.size ?? 15;
+ const pSize = config.size;
const pcolor = config.color;
const pstyle = config.style;
@@ -189,6 +232,7 @@
this.pointStyeMap[pkey] = new Style({
text: new Text({
font: `${pSize}px "ywifont"`,
+
text: config?.text ?? '',
fill: new Fill({ color: `#${pcolor}` }),
}),
@@ -352,7 +396,6 @@
this.adjustViewToOverlays(markers);
}
-
checkEquipIsShow() {
for (const item of this.layerInfo.value) {
if (item.id === 'equip') {
@@ -367,7 +410,6 @@
if (item.type === 'equip') {
return item;
}
-
}
}
createEleOverlay(dom: string | HTMLElement, position = [0, 0]) {
@@ -480,8 +522,8 @@
const properties = feature.getProperties();
console.log('馃殌 ~ properties:', properties);
}
+ this.displayFeatureInfo(feature);
this.activeFeature.value = feature;
- // this.displayFeatureInfo(feature);
});
}
@@ -491,7 +533,7 @@
getAllLayers() {
const allLayers = this.layerInfo.value.reduce((preVal, curVal) => {
- if (preVal.children && preVal.children.length > 0) {
+ if (curVal.children && curVal.children.length > 0) {
return preVal.concat(curVal.children.map((item) => item));
} else {
return preVal;
@@ -501,8 +543,9 @@
}
getAllLayerModels() {
+ console.log('馃殌 ~ this.layerInfo.value:', this.layerInfo.value);
return this.layerInfo.value.reduce((preVal, curVal) => {
- if (preVal.children && preVal.children.length > 0) {
+ if (curVal.children && curVal.children.length > 0) {
return preVal.concat(curVal.children.map((item) => item.model));
} else {
return preVal;
@@ -512,21 +555,6 @@
/** @description 璁板綍鎵�鏈夊浘灞� */
setAllLayers(layerModels: Layer[], layers: any[], layerGroup: any[]) {
- // this.layerInfo.value = layerModels.map((layer, index) => {
- // const layerData = layers[index];
-
- // return {
- // id: layerData.id,
- // title: layerData.title,
- // model: markRaw(layer),
- // get isVisible() {
- // return layer.getVisible();
- // },
- // set isVisible(val) {
- // layer.setVisible(val);
- // },
- // };
- // });
this.layerInfo.value = layerGroup.reduce((preVal, curVal) => {
const group = curVal.group;
const groupId = `group-${group}`;
@@ -570,7 +598,6 @@
return this._isVisible;
},
set isVisible(val) {
- console.log("馃殌 ~ val:", val)
this._isVisible = val;
that.toggleMarkerOverlayVisible(val);
},
@@ -673,9 +700,16 @@
displayFeatureInfo(feature) {
const highlightStyle = {
Point: new Style({
+ // image: new Circle({
+ // radius: 5,
+ // fill: new Fill({ color: `blue` }),
+ // }),
image: new Circle({
- radius: 5,
- fill: new Fill({ color: `blue` }),
+ radius: 13,
+ stroke: new Stroke({
+ color: `blue`,
+ width: 3,
+ }),
}),
}),
LineString: new Style({
@@ -683,6 +717,15 @@
color: `blue`,
width: 5,
}),
+ }),
+ Polygon: new Style({
+ stroke: new Stroke({
+ color: `blue`,
+ width: 5,
+ }),
+ // fill: new Fill({
+ // color: `rgba(0, 0, 255, 0.1)`,
+ // }),
}),
};
// 鍒涘缓楂樹寒鍥惧眰
@@ -700,6 +743,7 @@
// 璁剧疆楂樹寒瑕佺礌
if (feature !== this.activeFeature.value) {
if (this.activeFeature.value) {
+ console.log('remove feature:', this.activeFeature.value);
this.interactLayer.getSource().removeFeature(this.activeFeature.value as any);
}
if (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