@bdh-gis/mapbox-gl-layer
v1.5.2
Published
Layer for mapbox controls
Downloads
159
Readme
🏷️ @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;
};