@bdh-gis/mapbox-gl-link v1.5.0

<< 所有组件

🏷️ @bdh-gis/mapbox-gl-link

外部链接

npm i @bdh-gis/mapbox-gl-link

import Link from '@bdh-gis/mapbox-gl-link';
import '@bdh-gis/mapbox-gl-link/src/index.css';

map.addControl(new Link({
  links: [
     {
       id: 'mapbox-doc',
       label: '跳转',
       img: mapbox_doc,
       url: 'https://docs.mapbox.com/mapbox-gl-js',
       target: '_blank',
     },
     {
       id: 'mapbox-doc',
       label: '跳转并替换',
       img: tianditu,
       url: 'https://www.tianditu.gov.cn/',
       target: '_self',
     },
     {
       id: 'mapbox-doc',
       label: '自处理',
       img: nongji,
       url: '',
       target: '',
     },
   ],
  onEvents: (event, data) => {
     switch (event){
         case 'LINK_SWITCH':
         break;
  }
}));

Options

export type AnyEvent =
  | 'CONTROL_BUTTON_CLICK'
  | 'CREATE_BUTTONS'
  | 'CREATE_PANEL'
  | 'UPDATE_PANEL'
  | 'PANEL_OPEN'
  | 'PANEL_CLOSE'
  | 'LINK_SWITCH';
export type Panel = {
  header?: HTMLDivElement;
  headerTitle?: HTMLDivElement;
  headerClose?: HTMLDivElement;
  body?: HTMLDivElement;
  bodyImgs?: {
    wrapperEl: HTMLDivElement;
    imgEl: HTMLDivElement;
    labelEl: HTMLDivElement;
    deleteEl?: HTMLDivElement;
  }[];
};
export type Options = {
  links?: Utils.Img[];
  isCreateButtons?: boolean;
  isCreatePanel?: boolean;
  buttons?: Utils.ButtonOptions[];
  panelContainer?: HTMLDivElement;
  panel?: {
    header: Utils.PanelOptions;
    body: {
      imgs: Utils.Img[];
    };
  };
  onEvents?: (event: AnyEvent, data?: any) => void;
};