<< 所有组件

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

测量

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

import Measure from '@bdh-gis/mapbox-gl-measure';
import '@bdh-gis/mapbox-gl-measure/src/index.css';

map.addControl(new Measure({}));

Options

export type AnyEvent =
  | 'CONTROL_BUTTON_CLICK'
  | 'CREATE_BUTTONS'
  | 'CREATE_PANEL'
  | 'PANEL_CLOSE'
  | 'PANEL_BUTTON_CLICK';
export type Options = {
  styles?: MeasureStyle;
  isCreateButtons?: boolean | undefined;
  isCreatePanel?: boolean | undefined;
  buttons?: Utils.ButtonOptions[] | undefined;
  panelContainer?: HTMLDivElement | undefined;
  panel?:
    | {
        header: Utils.PanelOptions;
        body: {
          buttons: Utils.PanelButton[];
        };
      }
    | undefined;
  onEvents?: ((event: AnyEvent, data?: any) => void) | undefined;
};
export type Panel = {
  header?: HTMLDivElement;
  headerTitle?: HTMLDivElement;
  headerClose?: HTMLDivElement;
  body?: HTMLDivElement;
  bodyButtons?: {
    wrapperEl: HTMLDivElement;
    buttonEl: HTMLDivElement;
    labelEl: HTMLDivElement;
  }[];
};
export type MeasureType = 'FLAT_DISTANCE' | 'FLAT_AREA' | 'COORDINATES' | 'AZIMUTH' | 'NONE';
export type MeasureStyle = {
  lineColor?: string;
  lineWidth?: number;
  lineOpacity?: number;
  drawingLineColor?: string;
  drawingLineWidth?: number;
  drawingLineOpacity?: 1;
  fillColor?: string;
  fillOpacity?: number;
  fillStrokeColor?: string;
  fillStrokeWidth?: number;
  drawingFillColor?: string;
  drawingFillOpacity?: number;
  vertexRadius?: number;
  vertexColor?: string;
  vertexOutlineColor?: string;
  vertexOutlineWidth?: number;
};