@bdh-gis/mapbox-gl-legend
v1.5.0
Published
Legend for mapbox controls
Downloads
24
Readme
🏷️ @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;
};