选中改颜色

wujingjing

2024-11-29 a7c0c52ed984e5dbae736a469fdac701d1a68a7f

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

   }
}