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

<< 所有组件

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

地形切换

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

import Terrain from '@bdh-gis/mapbox-gl-terrain';
import '@bdh-gis/mapbox-gl-terrain/src/index.css';

map.addControl(new Terrain({
terrains: [
  {
    id: 'mapbox_dem',
    label: '官方在线',
    active: true,
    img: tdt_img_w,
    sources: {
      mapbox_dem: {
        type: 'raster-dem',
        url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
        tileSize: 512,
        maxzoom: 14,
      },
    },
    exaggeration: 1,
  },
  {
    id: 'mapbox_rgb',
    label: '官方1.5倍',
    active: false,
    img: tdt_img_w,
    sources: {
      mapbox_rgb: {
        type: 'raster-dem',
        url: 'mapbox://mapbox.terrain-rgb',
        tileSize: 512,
        maxzoom: 14,
      },
    },
    exaggeration: 1.5,
  },
]
}));

Options

export type AnyEvent =
  | 'CONTROL_BUTTON_CLICK'
  | 'CREATE_BUTTONS'
  | 'CREATE_PANEL'
  | 'UPDATE_PANEL'
  | 'PANEL_OPEN'
  | 'PANEL_CLOSE'
  | 'TERRAIN_SWITCH'
  | 'TERRAIN_ADD';
export type Panel = {
  header?: HTMLDivElement;
  headerTitle?: HTMLDivElement;
  headerClose?: HTMLDivElement;
  body?: HTMLDivElement;
  bodyImgs?: {
    wrapperEl: HTMLDivElement;
    imgEl: HTMLDivElement;
    labelEl: HTMLDivElement;
    deleteEl?: HTMLDivElement;
  }[];
};
export type Options = {
  terrains?: 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;
};