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

<< 所有组件

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

底图切换

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

import Baselayer from '@bdh-gis/mapbox-gl-baselayer';
import '@bdh-gis/mapbox-gl-baselayer/src/index.css';

map.addControl(new Baselayer({
 baselayers: [
   {
     id: 'tdt_img_w',
     label: '天地图影像',
     active: true,
     multy: undefined,
     img: tdt_img_w,
     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,
       },
     },
     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',
     label: '天地图矢量',
     active: false,
     multy: undefined,
     img: tdt_vec_w,
     sources: {
       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,
       },
     },
     layers: [
       {
         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',
     label: '天地图地形',
     active: false,
     multy: undefined,
     img: tdt_ter_w,
     sources: {
       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,
       },
     },
     layers: [
       {
         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',
     label: '智图黛蓝',
     active: false,
     multy: undefined,
     img: blue,
     sources: {
       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: 'ChinaOnlineStreetPurplishBlue',
         source: 'ChinaOnlineStreetPurplishBlue',
         type: 'raster',
         paint: {},
         layout: {},
         metadata: {},
         minzoom: 0,
       },
     ],
   },
   {
     id: 'background-black',
     label: '纯黑',
     active: false,
     multy: undefined,
     img: black,
     sources: {},
     layers: [
       {
         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'
  | 'BASELAYER_SWITCH'
  | 'BASELAYER_ADD';
export type Panel = {
  header?: HTMLDivElement;
  headerTitle?: HTMLDivElement;
  headerClose?: HTMLDivElement;
  body?: HTMLDivElement;
  bodyImgs?: {
    wrapperEl: HTMLDivElement;
    imgEl: HTMLDivElement;
    labelEl: HTMLDivElement;
    deleteEl?: HTMLDivElement;
  }[];
};
export type Options = {
  baselayers?: 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;
};