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

<< 所有组件

🏷️ @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;
};