@bdh-gis/mapbox-gl-layer v1.5.2

<< 所有组件

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

图层管理

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

import Layer from '@bdh-gis/mapbox-gl-layer';
import '@bdh-gis/mapbox-gl-layer/src/index.css';

map.addControl(new Layer({
  sources: {
   tdt_img_w: {
     type: 'raster',
     tiles: ['http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620'],
     tileSize: 256,
     minzoom: 0,
     maxzoom: 18,
   },
   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,
   },
   tdt_vec_w: {
     type: 'raster',
     tiles: ['http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620'],
     tileSize: 256,
     minzoom: 0,
     maxzoom: 18,
   },
   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,
   },
   tdt_ter_w: {
     type: 'raster',
     tiles: ['http://t0.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620'],
     tileSize: 256,
     minzoom: 0,
     maxzoom: 14,
   },
   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,
   },
   ChinaOnlineStreetPurplishBlue: {
     type: 'raster',
     tiles: [
       'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/export?dpi=96&transparent=true&size=256,                         256&format=png8&bbox={bbox-epsg-3857}&f=image&bboxSR=102100&imageSR=102100',
     ],
     tileSize: 256,
     minzoom: 0,
     maxzoom: 14,
   },
 },
  layers: [
  {
    id: 'tdt_img_w',
    source: 'tdt_img_w',
    type: 'raster',
    paint: {},
    layout: {},
    metadata: {},
    minzoom: 0,
  },
  {
    id: 'tdt_cia_w',
    source: 'tdt_cia_w',
    type: 'raster',
    paint: {},
    layout: {},
    metadata: {},
    minzoom: 0,
  },
  {
    id: 'tdt_vec_w',
    source: 'tdt_vec_w',
    type: 'raster',
    paint: {},
    layout: {},
    metadata: {},
    minzoom: 0,
  },
  {
    id: 'tdt_cva_w',
    source: 'tdt_cva_w',
    type: 'raster',
    paint: {},
    layout: {},
    metadata: {},
    minzoom: 0,
  },
  {
    id: 'tdt_ter_w',
    source: 'tdt_ter_w',
    type: 'raster',
    paint: {},
    layout: {},
    metadata: {},
    minzoom: 0,
  },
  {
    id: 'tdt_cta_w',
    source: 'tdt_cta_w',
    type: 'raster',
    paint: {},
    layout: {},
    metadata: {},
    minzoom: 0,
  },
  {
    id: 'ChinaOnlineStreetPurplishBlue',
    source: 'ChinaOnlineStreetPurplishBlue',
    type: 'raster',
    paint: {},
    layout: {},
    metadata: {},
    minzoom: 0,
  },
  {
    id: 'background-black',
    type: 'background',
    paint: {
      'background-color': '#000000',
      'background-opacity': 1,
    },
    metadata: {},
    minzoom: 0,
  },
]
}));

Options

export type AnyEvent =
  | 'CONTROL_BUTTON_CLICK'
  | 'CREATE_BUTTONS'
  | 'CREATE_PANEL'
  | 'UPDATE_PANEL'
  | 'PANEL_OPEN'
  | 'PANEL_CLOSE'
  | 'LAYER_ADD'
  | 'TRANS_LAYERS_2_TREENODES'
  | 'TREENODE_CHECK'
  | 'TREENODE_EXPAND'
  | 'TREENODE_LABEL_CLICK';
export type Panel = {
  header?: HTMLDivElement;
  headerTitle?: HTMLDivElement;
  headerClose?: HTMLDivElement;
  body?: HTMLDivElement;
  treeEl?: HTMLDivElement;
};
export type Options = {
  sources?: {
    [key: string]: mapboxgl.AnySourceData;
  };
  layers?: mapboxgl.AnyLayer[] | Utils.TreeNode[];
  isCreateButtons?: boolean;
  isCreatePanel?: boolean;
  buttons?: Utils.ButtonOptions[];
  panelContainer?: HTMLDivElement;
  panel?: {
    header: Utils.PanelOptions;
    body: {
      layers: Utils.TreeNode[];
    };
  };
  onEvents?: (event: AnyEvent, data?: any) => void;
};