table Height

wujingjing

2024-09-30 5e78e5bc69a8b7abf76663acaab6b7da63f35aa2

 src/model/map/GaoDeMap.ts

@@ -1,6 +1,5 @@
import AMapLoader from '@amap/amap-jsapi-loader';
import _ from 'lodash';

export type AMapInstance = typeof AMap;
export type GaoDePosition = [number, number];
export type GaoDeMapOption = {
@@ -8,7 +7,27 @@
   version?: string;
   plugins?: string[];
   container: string | HTMLDivElement;
   aMapOption?: Partial<AMap.MapOptions>;
   aMapOption?: Partial<AMap.MapOptions> & Record<string, any>;
};

export type GaoDeMarkerOption = {
   icon: {
      url: string;
      size: number;
   };
   click?: (e: any, labelMarker: AMap.LabelMarker) => void;
};
export type LabelMarkerData = {
   position: GaoDePosition;

   title?: string;
   textColor?: string;
   extData?: any;
};
export type MarkerLayerOption = {
   // 设置 allowCollision：true，可以让标注避让用户的标注
   layerOpt?: AMap.LabelsLayerOptions;
   markerOpt: GaoDeMarkerOption;
};

export class GaoDeMap {
@@ -41,11 +60,22 @@
            plugins: gaoDeOption.plugins,
         });
         this.map = new AMap.Map(gaoDeOption.container, gaoDeOption.aMapOption);
         this.setStyle();
      } catch (error) {
         // console.error(error);
      }
   }
   constructor() {}

   private setStyle() {
      const container = this.map.getContainer() as any;
      /**
       * 隐藏高德相关标志
       */
      container.querySelector('.amap-logo').style.opacity = 0;
      container.querySelector('.amap-copyright').style.opacity = 0;

   }

   zoomToRect(southWest: GaoDePosition, northEast: GaoDePosition) {
      if (!this.viewBound) {
@@ -57,11 +87,67 @@
      this.map.setBounds(this.viewBound);
   }

   applyBasicPlugins() {
      // const scale = new AMap.Scale();
      // this.map.addControl(scale)
      // const toolbar = new AMap.ToolBar();
      // this.map.addControl(toolbar)
   }

    applyBasicPlugins(){
        // const scale = new AMap.Scale();
        // this.map.addControl(scale)
        // const toolbar = new AMap.ToolBar();
        // this.map.addControl(toolbar)
    }
   addMarkerLayer(dataList: LabelMarkerData[], option: MarkerLayerOption) {
      const markerLayerOption = _.defaultsDeep(option, {
         layerOpt: {
            zooms: [3, 20],
            zIndex: 1000,
            allowCollision: false,
         },
      } as MarkerLayerOption) as MarkerLayerOption;

      const layer = new AMap.LabelsLayer(markerLayerOption.layerOpt);
      const { markerOpt } = markerLayerOption;
      const convertData = (dataList ?? []).map<AMap.LabelMarkerOptions>((item) => {
         const { icon } = markerOpt;
         return {
            // name: '自提点9',
            position: item.position,
            zIndex: 2,
            opacity: 1,
            icon: {
               // 图标类型，现阶段只支持 image 类型
               type: 'image',
               // 图片 url
               image: icon.url,
               // 图片尺寸
               size: [icon.size, icon.size],
               // 图片相对 position 的锚点，默认为 bottom-center
               anchor: 'center',
            },
            text: {
               content: item.title,
               direction: 'right',
               offset: [-5, -5],
               style: {
                  fontSize: 10,
                  fontWeight: 'normal',
                  fillColor: item.textColor,
                  strokeColor: '#fff',
                  strokeWidth: 2,
                  fold: true,
                  padding: '2, 5',
               },
            },
            extData: item.extData,
         };
      });
      const markerList = convertData.map((item) => {
         const label = new AMap.LabelMarker(item);
         if (markerOpt.click) {
            label.on('click', (e) => markerOpt.click(e, label));
         }
         return label;
      });

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