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