@bdh-gis/mapbox-gl-baselayer
v1.5.1
Published
Baselayer for mapbox controls
Downloads
98
Readme
🏷️ @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;
};