Skip to content

TdtLayer (Tianditu Tile Layer)

Create and manage Tianditu tile layers for map display.

Constructor

ts
new ge3d.object.TdtLayer(options?: TdtLayerOptions): TdtLayer

Parameters (TdtLayerOptions)

ParameterTypeDefaultDescription
idString-Layer unique identifier
nameString-Layer display name
typeString"tdt"Layer type (fixed as "tdt")
layerString"vec_d"Tianditu layer type (see Layer Types below)
showBooleantrueWhether to show the layer
keyString | String[]defaultTokenArrTianditu API key(s)
crsString"EPSG:3857"Coordinate reference system
rectangleCesium.Rectangle | Object-Layer coverage area
bboxNumber[]-Bounding box [xmin, ymin, xmax, ymax]
opacityNumber1.0Layer opacity (0.0-1.0)
alphaNumber1.0Layer alpha (same as opacity)
brightnessNumber1.0Layer brightness (0.0-1.0)
contrastNumber1.0Layer contrast (0.0-1.0)
hueNumber0.0Layer hue adjustment
saturationNumber1.0Layer saturation (0.0-1.0)
gammaNumber1.0Layer gamma correction
zIndexNumber-Layer z-index for ordering
themeObject-Theme configuration (see Theme Options)
highlightObject-Highlight configuration
flyToBooleanfalseWhether to fly to layer after loading
fitTilesetBooleanfalseWhether to fit to tileset
proxyString-Proxy URL for requests
headersObject-HTTP headers for requests
queryParametersObject-Query parameters for requests

Layer Types

ValueDescriptionMax Level
"vec_d"Vector map (day)18
"vec_z"Vector annotation (day)18
"img_d"Satellite imagery (day)18
"img_z"Satellite annotation (day)18
"ter_d"Terrain (day)14
"ter_z"Terrain annotation (day)14

Theme Options

ParameterTypeDefaultDescription
bgColorString-Background color
alphaNumber1.0Theme transparency
invertBooleanfalseWhether to invert colors

Properties

PropertyTypeDescription
layerCesium.ImageryLayerInternal Cesium ImageryLayer object
imageryProviderCesium.ImageryProviderInternal Cesium ImageryProvider object
rectangleCesium.RectangleLayer coverage area
alphaNumberLayer opacity (0.0-1.0)
brightnessNumberLayer brightness
contrastNumberLayer contrast
hueNumberLayer hue
saturationNumberLayer saturation
gammaNumberLayer gamma
zIndexNumberLayer z-index
hasZIndexBooleanWhether layer supports z-index ordering

Methods

MethodParametersReturn ValueDescription
reload()voidReload the layer
setOpacity(value: number)voidSet layer opacity
flyTo(options?: object)voidFly to layer extent
bindHighlight(options: object)voidBind highlight functionality
unbindHighlight()voidUnbind highlight functionality
openHighlight(highlightStyle?: object)voidOpen highlight
closeHighlight()voidClose highlight

Usage Examples

Basic Usage

javascript
// Create basic Tianditu imagery layer
const imageryLayer = new ge3d.object.TdtLayer({
  id: 'tdtImagery',
  name: 'Tianditu Imagery',
  layer: 'img_d',
  show: true
});

// Add to map
core.addObject(imageryLayer);

Vector Layer with Theme

javascript
// Create vector layer with theme
const vectorLayer = new ge3d.object.TdtLayer({
  id: 'tdtVector',
  name: 'Tianditu Vector',
  layer: 'vec_d',
  show: true,
  theme: {
    bgColor: '#009ACD',
    alpha: 0.3,
    invert: true
  },
  contrast: 3,
  brightness: 1.0
});

core.addObject(vectorLayer);

Annotation Layer

javascript
// Create annotation layer
const annotationLayer = new ge3d.object.TdtLayer({
  id: 'tdtAnnotation',
  name: 'Tianditu Annotation',
  layer: 'img_z',
  show: true,
  opacity: 0.8
});

core.addObject(annotationLayer);

Terrain Layer

javascript
// Create terrain layer
const terrainLayer = new ge3d.object.TdtLayer({
  id: 'tdtTerrain',
  name: 'Tianditu Terrain',
  layer: 'ter_d',
  show: true,
  flyTo: true
});

core.addObject(terrainLayer);

Layer with Custom Configuration

javascript
// Create layer with custom settings
const customLayer = new ge3d.object.TdtLayer({
  id: 'tdtCustom',
  name: 'Custom Tianditu Layer',
  layer: 'vec_d',
  show: true,
  key: 'your-api-key',
  crs: 'EPSG:4326',
  rectangle: {
    xmin: 116.0,
    ymin: 39.0,
    xmax: 117.0,
    ymax: 40.0
  },
  opacity: 0.7,
  brightness: 1.2,
  contrast: 1.1,
  zIndex: 10,
  proxy: 'https://your-proxy.com/',
  headers: {
    'Authorization': 'Bearer your-token'
  }
});

core.addObject(customLayer);

Layer with Highlight

javascript
// Create layer with highlight functionality
const highlightLayer = new ge3d.object.TdtLayer({
  id: 'tdtHighlight',
  name: 'Tianditu with Highlight',
  layer: 'vec_d',
  show: true,
  highlight: {
    color: '#ff0000',
    width: 2
  }
});

core.addObject(highlightLayer);

// Listen to click events
highlightLayer.addEventListener(ge3d.EventType.click, (event) => {
  console.log('Layer clicked:', event);
});

Layer Management

javascript
// Control layer visibility
imageryLayer.show = false; // Hide layer
imageryLayer.show = true;  // Show layer

// Adjust layer properties
imageryLayer.opacity = 0.5;
imageryLayer.brightness = 1.2;
imageryLayer.contrast = 1.1;

// Layer ordering
imageryLayer.zIndex = 5;
vectorLayer.zIndex = 10; // This will be on top

// Fly to layer
imageryLayer.flyTo({
  duration: 2.0,
  maximumHeight: 10000
});

Notes

  1. TdtLayer extends BaseTileLayer and inherits all its properties and methods
  2. Requires valid Tianditu API key(s) for proper functionality
  3. Supports both Web Mercator (EPSG:3857) and WGS84 (EPSG:4326) coordinate systems
  4. Layer types determine the visual style and maximum zoom level
  5. Theme configuration allows for custom visual effects
  6. Highlight functionality enables interactive features
  7. All layer properties can be modified after creation
  8. Layer events provide detailed information about tile loading status
  9. Supports proxy configuration for cross-origin requests
  10. Z-index ordering only works within the same layer type