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

<< 所有组件

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

图例

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

import Legend from '@bdh-gis/mapbox-gl-legend';
import '@bdh-gis/mapbox-gl-legend/src/index.css';

map.addControl(new Legend({
 title: '厉害图例',
 legends: [[
  {label: 'COLOR_BAR_0', type: 'COLOR_BAR', color: '#f00', isChecked: true,},
  {label: 'COLOR_BAR_1', type: 'COLOR_BAR', color: '#0f0', borderColor: '#000', isChecked: true,},
  {label: 'COLOR_BAR_2', type: 'COLOR_BAR', color: '#0ff', borderColor: '#000', isChecked: true,},
  {label: 'POLYGON_0', type: 'POLYGON', color: '#f00', borderColor: '#000', isChecked: true,},
  {label: 'CIRCLE_0', type: 'CIRCLE', img: '', color: '#f00', borderColor: '#000', isChecked: false,},
  {label: 'LINE_0', type: 'LINE', img: '', color: '#f00', borderColor: '#000', isChecked: true,},
  {label: 'LINEDASH_1', type: 'LINEDASH', img: '', color: '#0f0', borderColor: '#000', isChecked: true,},
  {label: '高速', type: 'LABEL', img: '', color: '#fff', borderColor: '', backgroundColor: '#FFA500', backgroundBorderColor: '#fff', isChecked: true,},
  {label: 'IMAGE_0', type: 'IMAGE', img: image_0, isChecked: true,},
  ]],
  // checkType: 'CHECKBOX',
  checkType: 'DELETELINE',
  isShowCheckAll: true,
  isShowClose: true,
  isCreateButtons: true,
  isShowPanel: true,
}));

Options

export type AnyEvent =
  | 'CONTROL_BUTTON_CLICK'
  | 'CREATE_BUTTONS'
  | 'CREATE_PANEL'
  | 'PANEL_CLOSE'
  | 'LEGENDNODE_CHECK'
  | 'LEGENDNODE_CHECK_ALL';
export type Panel = {
  header?: HTMLDivElement;
  headerTitle?: HTMLDivElement;
  headerCheckAll?: HTMLDivElement;
  headerClose?: HTMLDivElement;
  body?: HTMLDivElement;
  legendNodeEls?: HTMLDivElement[];
};
export type Options = {
  title?: string;
  legends?: Utils.LegendNode[][];
  checkType?: 'CHECKBOX' | 'DELETELINE';
  isShowCheckAll?: boolean;
  isShowClose?: boolean;
  isShowPanel?: boolean;
  isCreateButtons?: boolean;
  isCreatePanel?: boolean;
  buttons?: Utils.ButtonOptions[];
  panelContainer?: HTMLDivElement;
  panel?: Utils.LegendProps;
  onEvents?: (event: AnyEvent, data?: any) => void;
};