选中改颜色

wujingjing

2024-11-29 a7c0c52ed984e5dbae736a469fdac701d1a68a7f

选中改颜色

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue

@@ -1,6 +1,6 @@
<template>
    <div class="h-[60vh] relative">
                <div ref="containerRef" class="h-full"></div>
        <div ref="containerRef" class="h-full"></div>
        <!-- <div v-if="bottomBarIsShow" class="absolute w-full bottom-0 bg-white border-gray-300 border border-solid">
            <div
                class="w-28 h-5 absolute left-1/2 -translate-x-1/2 -translate-y-[100%] cursor-pointer bg-[#4974f3] rounded-t-lg flex-center"
@@ -19,6 +19,8 @@
import { onMounted, ref } from 'vue';

import equipPic from './img/equip.svg';
import equipSelectPic from './img/equip-select.svg';

import type { GaoDePosition, LabelMarkerData } from '/@/model/map/GaoDeMap';
import { GaoDeMap } from '/@/model/map/GaoDeMap';

@@ -26,13 +28,14 @@
const containerRef = ref<HTMLDivElement>(null);
const props = defineProps(['data']);

const emit = defineEmits(['equipClick','closeInfoWindow']);
const emit = defineEmits(['equipClick', 'closeInfoWindow']);
const createInfoWindow = () => {
    // title
    // <div class="title flex-center bg-[#ca0dab] text-white py-0.5 mb-2 w-full over-ellipsis">
    //             ç½—汉鱼
    //         </div>
    const dom = `<div class="rounded-md text-nowrap flex flex-col  w-fit border border-solid border-blue-600 " style="padding: 12px">
    const dom = `<div class="rounded-md text-nowrap flex flex-col  w-fit border border-solid border-blue-600 relative" style="padding: 12px">
            <span class="guanbi absolute ywifont ywicon-guanbi right-[4px] top-[-2px] font-bold text-[#c3c3c3] cursor-pointer" ></span>
            
            <div class="space-x-4 flex w-full">
                <div class="flex flex-col w-1/2 key-list">
@@ -69,7 +72,7 @@
    keyListDom.innerHTML = keyItemHtml;
    valueListDom.innerHTML = valueItemHtml;
};

let curMarkerLabel: AMap.LabelMarker;
const addMarkerLayer = () => {
    const map = props.data.map;
    if (map.pos_x == null && map.pos_y == null) return;
@@ -90,6 +93,7 @@
            icon: {
                url: equipPic,
                size: 30,
                selectUrl: equipSelectPic,
            },
            click(e, label) {
                // if (!bottomBarIsShow.value) {
@@ -98,6 +102,9 @@
                // if (!chartIsShow.value) {
                //     chartIsShow.value = true;
                // }

                curMarkerLabel && curMarkerLabel !== label && restoreLabel();
                curMarkerLabel = label;
                infoWindow.open(gaoDeMap.map, label.getPosition() as any);
                const extData = label.getExtData();
                emit('equipClick', extData);
@@ -117,7 +124,12 @@
};

let infoWindow: AMap.InfoWindow;

const restoreLabel = () => {
    // å…³é—­æ¢å¤å›¾ç‰‡
    curMarkerLabel?.setIcon({
        image: equipPic,
    });
};
onMounted(async () => {
    await gaoDeMap.init({
        container: containerRef.value,
@@ -132,7 +144,6 @@

    addMarkerLayer();
    gaoDeMap.map.setFitView();
	

    infoWindow = new AMap.InfoWindow({
        content: createInfoWindow(),
@@ -140,11 +151,21 @@
        anchor: 'top-left',
        closeWhenClickMap: true,
    });
	
    const closeBtnDom = infoWindow.dom.querySelector('.amap-info-close');
    closeBtnDom.addEventListener('click', () => {
    (infoWindow as any).on('close', (...a) => {
        restoreLabel();
        curMarkerLabel = null;

        emit('closeInfoWindow');
    });

    // è‡ªå¸¦å…³é—­åŽ»æŽ‰ï¼Œè‡ªå¸¦å…³é—­ç›‘听 close ä¼šå¤šæ¬¡è§¦å‘ close äº‹ä»¶
    const closeBtnDom = infoWindow.dom.querySelector('.amap-info-close');
    closeBtnDom.remove();
    const myCloseBtn = infoWindow.dom.querySelector('.guanbi');
    myCloseBtn.addEventListener('click', () => {
        infoWindow.close();
    });
	
});
</script>
<style scoped lang="scss">

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/img/equip-select.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1732676631156" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2297" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M786.809 847.838c-78.767 41.195-174.909-12.715-185.924-101.68-2.165-17.485-1.77-34.846 4.06-51.473 2.682-7.645 0.749-12.033-4.534-17.296-85.062-84.735-170.007-169.587-254.762-254.628-5.792-5.813-10.415-6.833-18.577-4.539-72.713 20.445-148.312-25.295-163.248-99.328-5.504-27.284-3.914-54.766 8.968-80.467 5.553-0.898 7.24 3.702 9.867 6.302 25.058 24.797 49.784 49.928 74.935 74.63 21.171 20.792 46.71 21.995 65.357 3.665 18.325-18.011 17.284-44.533-3.222-65.374-27.202-27.645-54.811-54.889-84.062-84.119 40.922-16.76 79.539-17.603 117.611 2.244 54.164 28.234 81.982 92.17 65.165 150.84-2.618 9.135-0.449 13.802 5.454 19.685 84.324 84.027 168.561 168.14 252.514 252.538 6.738 6.774 12.271 7.202 21.269 5.065 50.978-12.11 95.839 0.585 130.861 39.423 33.614 37.275 43.297 81.071 26.675 129.642-3.615 10.561-5.963 14.77-15.988 4.182-24.58-25.96-50.174-50.973-75.733-75.986-13.395-13.108-29.463-18.45-47.742-11.505-16.112 6.122-25.69 18.124-27.916 35.359-2.144 16.605 4.963 29.586 16.483 40.933 27.275 26.858 54.347 53.923 82.489 81.887z m-625.06-53.597c-2.14-16.57 5.342-31.411 17.68-43.805 69.58-69.892 139.431-139.514 209.017-209.4 4.931-4.954 7.687-6.024 13.22-0.363 26.426 27.042 53.244 53.707 80.263 80.159 5.226 5.116 5.455 7.934 0.115 13.24-69.966 69.507-139.195 139.763-209.691 208.727-34.114 33.373-85.326 24.101-105.52-17.11-4.615-9.422-5.094-12.225-5.084-31.448z m443.146-330.187c-2.417-2.07-4.787-3.859-6.879-5.932-10.879-10.778-21.303-22.052-32.663-32.293-6.879-6.2-5.358-9.823 0.509-15.556 25.924-25.337 50.785-51.788 77.244-76.542 20.823-19.482 39.05-40.66 48.748-67.477 15.324-42.376 43.383-70.798 85.786-85.975 13.315-4.766 26.082-17.779 38.354-16.877 12.574 0.924 20.05 18.9 31.37 27.397 13.863 10.403 15.204 19.93 5.647 35.01-13.05 20.592-23.243 43.04-34.014 65.008-3.831 7.814-8.87 13.25-16.868 16.529-59.122 24.25-108.413 61.834-150.243 109.896-12.372 14.216-26.559 26.851-39.939 40.187-2.153 2.146-4.43 4.17-7.052 6.625z" p-id="2298" fill="red"></path></svg>

 src/model/map/GaoDeMap.ts

@@ -13,6 +13,8 @@
export type GaoDeMarkerOption = {
    icon: {
        url: string;
        /** @description é€‰ä¸­æ—¶çš„图片 */
        selectUrl?: string;
        size: number;
    };
    click?: (e: any, labelMarker: AMap.LabelMarker) => void;
@@ -57,21 +59,19 @@
            } as Partial<AMap.MapOptions>,
        } as Partial<GaoDeMapOption>) as GaoDeMapOption;
        try {

            this.AMap = await AMapLoader.load({
                key: gaoDeOption.key,
                version: gaoDeOption.version,
                plugins: gaoDeOption.plugins,
            });
			

            this.map = new this.AMap.Map(gaoDeOption.container, gaoDeOption.aMapOption);
            this.setStyle();
        } catch (error) {
            // console.error(error);
        }
    }
    constructor() {
    }
    constructor() {}

    private setStyle() {
        const container = this.map.getContainer() as any;
@@ -110,8 +110,9 @@

        const layer = new AMap.LabelsLayer(markerLayerOption.layerOpt);
        const { markerOpt } = markerLayerOption;
        const { icon } = markerOpt;

        const convertData = (dataList ?? []).map<AMap.LabelMarkerOptions>((item) => {
            const { icon } = markerOpt;
            return {
                // name: '自提点9',
                position: item.position,
@@ -145,18 +146,23 @@
            };
        });

	
        const markerList = convertData.map((item) => {
            const label = new AMap.LabelMarker(item);
			
            if (markerOpt.click) {
                label.on('click', (e) => markerOpt.click(e, label));
            }

            label.on('click', (e) => {
                if (icon.selectUrl) {
                    setTimeout(() => {
                        label.setIcon({
                            image: icon.selectUrl,
                        });
                    }, 30);
                }
                markerOpt.click?.(e, label);
            });
            return label;
        });

        layer.add(markerList);
        this.map.add(layer);

    }
}