高亮问题

wujingjing

2025-02-10 e792d4d46e406da8d0a4ae8ad97db34a95f1c66a

高亮问题

 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",

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue

@@ -94,6 +94,8 @@
            }
        }
    });

    props.olMap.displayFeatureInfo(null);
};

const handleNodeClick = () => {};

 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');

 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) {

 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',