@bdh-gis/mapbox-gl-textlayer v1.5.1

<< 所有组件

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

文本标签切换

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

import Textlayer from '@bdh-gis/mapbox-gl-textlayer';
import '@bdh-gis/mapbox-gl-textlayer/src/index.css';

map.addControl(new Textlayer({
textlayers: [
    {
      id: 'tdt_img_w',
      label: '影像标签',
      active: true,
      multy: undefined,
      img: tdt_img_w,
      sources: {
        tdt_cia_w: {
          type: 'raster',
          tiles: ['http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620'],
          tileSize: 256,
          minzoom: 0,
          maxzoom: 18,
        },
      },
      layers: [
        {
          id: 'tdt_cia_w',
          source: 'tdt_cia_w',
          type: 'raster',
          paint: {},
          layout: {},
          metadata: {},
          minzoom: 0,
        },
      ],
    },
    {
      id: 'tdt_vec_w',
      label: '矢量标签',
      active: false,
      multy: undefined,
      img: tdt_vec_w,
      sources: {
        tdt_cva_w: {
          type: 'raster',
          tiles: ['http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620'],
          tileSize: 256,
          minzoom: 0,
          maxzoom: 18,
        },
      },
      layers: [
        {
          id: 'tdt_cva_w',
          source: 'tdt_cva_w',
          type: 'raster',
          paint: {},
          layout: {},
          metadata: {},
          minzoom: 0,
        },
      ],
    },
    {
      id: 'tdt_ter_w',
      label: '地形标签',
      active: false,
      multy: undefined,
      img: tdt_ter_w,
      sources: {
        tdt_cta_w: {
          type: 'raster',
          tiles: ['http://t0.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620'],
          tileSize: 256,
          minzoom: 0,
          maxzoom: 14,
        },
      },
      layers: [
        {
          id: 'tdt_cta_w',
          source: 'tdt_cta_w',
          type: 'raster',
          paint: {},
          layout: {},
          metadata: {},
          minzoom: 0,
        },
      ],
    },
  ]
}));

Options

export type AnyEvent =
  | 'CONTROL_BUTTON_CLICK'
  | 'CREATE_BUTTONS'
  | 'CREATE_PANEL'
  | 'UPDATE_PANEL'
  | 'PANEL_OPEN'
  | 'PANEL_CLOSE'
  | 'TEXTLAYER_SWITCH'
  | 'TEXTLAYER_ADD';
export type Panel = {
  header?: HTMLDivElement;
  headerTitle?: HTMLDivElement;
  headerClose?: HTMLDivElement;
  body?: HTMLDivElement;
  bodyImgs?: {
    wrapperEl: HTMLDivElement;
    imgEl: HTMLDivElement;
    labelEl: HTMLDivElement;
    deleteEl?: HTMLDivElement;
  }[];
};
export type Options = {
  textlayers?: Utils.Img[];
  isCreateButtons?: boolean;
  isCreatePanel?: boolean;
  buttons?: Utils.ButtonOptions[];
  panelContainer?: HTMLDivElement;
  panel?: {
    header: Utils.PanelOptions;
    body: {
      imgs: Utils.Img[];
    };
  };
  onEvents?: (event: AnyEvent, data?: any) => void;
};