@bdh-gis/mapbox-gl-view
v1.5.0
Published
View for mapbox controls
Downloads
28
Readme
🏷️ @bdh-gis/mapbox-gl-view
视角书签
npm i @bdh-gis/mapbox-gl-view
import View from '@bdh-gis/mapbox-gl-view';
import '@bdh-gis/mapbox-gl-view/src/index.css';
map.addControl(new View({
views: [
{
id: '86024cb1-54b1-4215-aa37-d734a41eeb80',
label: '信息公司',
img: 'data:image/jpeg;base64,',
lon: 126.70483924347661,
lat: 45.744062452603174,
zoom: 16.043804073620258,
bearing: 12,
pitch: 41.547634166346306,
},
{
id: 'b4632a67-d72f-4a62-9c3a-e305b8768eeb',
label: '武汉研发中心',
img: 'data:image/jpeg;base64,',
lon: 114.3867551563784,
lat: 30.4457860923621,
zoom: 16.857779955432957,
bearing: 22.39999999999941,
pitch: 50.00000000000005,
}
],
duration: 1000,
imgQuality: 0.1
}));
Options
export type AnyEvent =
| 'CONTROL_BUTTON_CLICK'
| 'CREATE_BUTTONS'
| 'CREATE_PANEL'
| 'UPDATE_PANEL'
| 'PANEL_OPEN'
| 'PANEL_CLOSE'
| 'ADD_INPUT_CHANGE'
| 'ADD_BUTTON_CLICK'
| 'VIEW_LOCATE'
| 'VIEW_ADD'
| 'VIEW_DELETE'
| 'VIEW_EXCHANGE';
export type Panel = {
header?: HTMLDivElement;
headerTitle?: HTMLDivElement;
headerClose?: HTMLDivElement;
body?: HTMLDivElement;
bodyInputButtonRows?: {
row: HTMLDivElement;
input: HTMLInputElement;
button: HTMLDivElement;
}[];
bodyImgs?: {
wrapperEl: HTMLDivElement;
imgEl: HTMLDivElement;
labelEl: HTMLDivElement;
deleteEl?: HTMLDivElement;
}[];
addInputValue?: string;
};
export type Options = {
duration?: number;
imgQuality?: number;
views?: Utils.Img[];
isCreateButtons?: boolean;
isCreatePanel?: boolean;
buttons?: Utils.ButtonOptions[];
panelContainer?: HTMLDivElement;
panel?: {
header: Utils.PanelOptions;
body: {
inputButtons: Utils.InputButton[];
imgs: Utils.Img[];
};
};
onEvents?: (event: AnyEvent, data?: any) => void;
};