dc-sdk/docs/layer

---

sidebar: auto

Layers 🌎

Categorize overlay elements with the same business logic or attributes for the same management

Layer

The base class of the layer, its subclasses are instantiated and need to be added to the 3D scene in order to display all kinds of 3D data

:::warning This basic class cannot be instantiated :::

properties

• {String} id readonly
• {Boolean} show
• {Object} attr：Business Properties
• {String} state readonly
• {String} type readonly

methods

• addOverlay(overlay)

  • parameters
  • {Overlay} overlay
  • returns this

• addOverlays(overlays)

  • parameters
  • {Array<Overlay>} overlays
  • returns this

• removeOverlay(overlay)

  • parameters
  • {Overlay} overlay
  • returns this

• getOverlay(overlayId)

  • parameters
  • {String} overlayId
  • returns overlay

• getOverlayById(Id)

  • parameters
  • {String} Id
  • returns overlay

• getOverlaysByAttr(attrName, attrVal)

  • parameters
  • {String} attrName
  • {Object} attrVal
  • returns array

  overlay.attr.name = 'test'
  let arr = layer.getOverlaysByAttr('name', 'test')

• getOverlays()

  • returns array

• eachOverlay(method, context)

  • parameters
  • {Function} method：Callback function with parameters for overlay
  • {Object} context
  • returns this

  layer.eachOverlay((item) => {})

• clear()

  • returns this

• remove()

  • returns this

• addTo(viewer)

  • parameters
  • {Viewer|World} viewer：场景
  • returns this

• on(type, callback, context)

Event Subscription

• parameters
  • {Object} type
  • {Function} callback
  • {Object} context

• returns this

• off(type, callback, context)

Event Unsubscribe

• parameters
  • {Object} type
  • {Function} callback
  • {Object} context

• returns this

• fire(type,params)

  • parameters
  • {Object} type
  • {Object} params
  • returns this

static methods

• registerType(type)

  • parameters
  • {String} type

• getLayerType()

  • returns string

DC.LayerGroup

Layer groups, grouping layers according to a certain logic to facilitate unified management

example

let layerGroup = new DC.LayerGroup('id')
viewer.addLayerGroup(layerGroup)
let layer = new DC.VectorLayer('layer')
layerGroup.addLayer(layer)

creation

• constructor(id)

  • parameters
  • {String} id
  • returns layerGroup

properties

• {String} id readonly
• {Boolean} show
• {String} type readonly

methods

• addLayer(layer)

  • parameters
  • {Layer} layer
  • returns this

• removeLayer(layer)

  • parameters
  • {Layer} layer
  • returns this

• getLayer(id)

  • parameters
  • {String} id
  • returns layer

• getLayers()

  • returns layer

• remove()

  • returns this

• addTo(viewer)

  • parameters
  • {Viewer|World} viewer：场景
  • returns this

DC.VectorLayer

Vector layer, used to add all kinds of vector data (points, lines, surfaces, etc.), grouping vector data according to a certain logic to facilitate unified management, inherited from Layer

example

let layer = new DC.VectorLayer('id')
viewer.addLayer(layer)

creation

• constructor(id)

  • parameters
  • {String} id
  • returns vectorLayer

DC.DynamicLayer

Dynamic layer, used to add all kinds of dynamic data (billboard、model etc.), grouping vector data according to a certain logic to facilitate unified management, inherited from Layer

example

let layer = new DC.DynamicLayer('id')
viewer.addLayer(layer)

creation

• constructor(id)

  • parameters
  • {String} id
  • returns vectorLayer

DC.PrimitiveLayer

The primitive layer, which is used to add all kinds of primitive data, group the primitive data in a certain logic to facilitate unified management, inherited from Layer

example

let layer = new DC.PrimitiveLayer('id')
viewer.addLayer(layer)

creation

• constructor(id)

  • parameters
  • {String} id
  • returns primitiveLayer

DC.GroundPrimitiveLayer

The ground primitive layer, which is used to add all kinds of ground primitive data, group the ground primitive data in a certain logic to facilitate unified management, inherited from Layer

example

let layer = new DC.GroundPrimitiveLayer('id')
viewer.addLayer(layer)

creation

• constructor(id)

  • parameters
  • {String} id
  • returns groundPrimitiveLayer

DC.TilesetLayer

3dTiles layer, used to add 3dTiles model data, inherits fromLayer

example

let layer = new DC.TilesetLayer('id')
viewer.addLayer(layer)

creation

• constructor(id)

  • parameters
  • {String} id
  • returns tilesetLayer

DC.GeoJsonLayer

GeoJson layer, used to load GeoJson data, inherited from Layer，

example

let layer = new DC.GeoJsonLayer('id', '**/**.geojson')
layer.eachOverlay((item) => {
  // item is an entity,
  if (item.polyline) {
    //todo
    let polyline = DC.Polyline.fromEntity(item)
  }
  if (item.polygon) {
    //todo
    let polygon = DC.Polygon.fromEntity(item)
  }
  if (item.billboard) {
    //todo
    let point = DC.Point.fromEntity(item)
    let divIcon = DC.DivIcon.fromEntity(item)
    let billboard = DC.Billboard.fromEntity(item)
  }
})

creation

• constructor(id,url,[options])

  • parameters
  • {String} id
  • {String} url
  • {Object} options GeoJsonDataSource
  • returns geoJsonLayer

methods

• toVectorLayer()

  • returns vectorLayer

• toModelLayer(modelUrl)

  • parameters
  • {String} modelUrl
  • returns vectorLayer

DC.TopoJsonLayer

TopoJson layer, used to load TopoJson data, inherited from Layer，

example

let layer = new DC.GeoJsonLayer('id', '**/**.geojson')
layer.eachOverlay((item) => {
  // item is an entity,
  if (item.polyline) {
    //todo
    let polyline = DC.Polyline.fromEntity(item)
  }
  if (item.polygon) {
    //todo
    let polygon = DC.Polygon.fromEntity(item)
  }
  if (item.billboard) {
    //todo
    let point = DC.Point.fromEntity(item)
    let divIcon = DC.DivIcon.fromEntity(item)
    let billboard = DC.Billboard.fromEntity(item)
  }
})

creation

• constructor(id,url,[options])

  • parameters
  • {String} id
  • {String} url
  • {Object} options GeoJsonDataSource
  • returns topoJsonLayer

methods

• toVectorLayer()

  • returns vectorLayer

• toModelLayer(modelUrl)

  • parameters
  • {String} modelUrl
  • returns vectorLayer

DC.HtmlLayer

Html layer for loading DivIcon nodes, inherited from Layer，

example

let layer = new DC.HtmlLayer('dom')
viewer.addLayer(layer)

creation

• constructor(id)

DC.HtmlLayer 构造函数

• parameters
  • {String} id：图层唯一标识
• returns htmlLayer

DC.CzmlLayer

Czml layer for loading Czml data, inherited from Layer

example

let layer = new DC.CzmlLayer('id', '**/**.czml')
layer.eachOverlay((item) => {
  if (item.polyline) {
    //todo
  }
  if (item.polygon) {
    //todo
  }
  if (item.billboard) {
    //todo
  }
})

creation

• constructor(id,url,[options])

  • parameters
  • {String} id
  • {String} url
  • {Object} options CzmlDataSource
  • returns czmlLayer

DC.KmlLayer

Kml layer for loading Kml data, inherited from Layer

example

let layer = new DC.KmlLayer('id', '**/**.kml')
layer.eachOverlay((item) => {
  if (item.polyline) {
    //todo
  }
  if (item.polygon) {
    //todo
  }
  if (item.billboard) {
    //todo
  }
})

creation

• constructor(id,url,[options])

  • parameters
  • {String} id
  • {String} url
  • {Object} options KmlDataSource
  • returns kmlLayer

DC.GpxLayer

Gpx layer for loading gpx data, inherited from Layer

example

let layer = new DC.GpxLayer('id', '**/**.gpx')

creation

• constructor(id,url,[options])

  • parameters
  • {String} id
  • {String} url
  • {Object} options GpxDataSource
  • returns gpxLayer

DC.ClusterLayer

Inherited from Layer

example

let layer = new DC.ClusterLayer('id')
viewer.addLayer(layer)

creation

• constructor(id,[options])

  • parameters
  • {String} id
  • {Object} options
  • returns clusterLayer

{
  "size": 48,
  "pixelRange": 40,
  "gradient": {
    "0.0001": DC.Color.DEEPSKYBLUE,
    "0.001": DC.Color.GREEN,
    "0.01": DC.Color.ORANGE,
    "0.1": DC.Color.RED
  },
  "style": "circle", // circle or clustering
  "fontSize": 12,
  "fontColor": DC.Color.BLACK
}

DC.HeatLayer

Inherited from Layer

example

let layer = new DC.HeatLayer('id')
viewer.addLayer(layer)

creation

• constructor(id,[options])

  • parameters
  • {String} id
  • {Object} options
  • returns heatLayer

//options(optional)
{
  "gradient": {
    "0.5": "green",
    "0.6": "orange",
    "0.95": "red"
  },
  "height": 0,
  "radius": 30,
  "useGround": false,
  "classificationType": 2 // only use for "useGround" is true
}

methods

• setPositions(positions)

  • parameters
  • {Array<Object>} positions
  • returns heatLayer

{
  "lng": "",
  "lat": "",
  "value": 1
}

• addPosition(position)

  • parameters
  • {Object} position
  • returns heatLayer

{
  "lng": "",
  "lat": "",
  "value": 1
}

DC.WindLayer

Inherited from Layer

example

let layer = new DC.WindLayer('id')
viewer.addLayer(layer)

creation

• constructor(id,[options])

  • parameters
  • {String} id
  • {Object} options
  • returns windLayer

//options(optional)
{
  "globalAlpha": 0.9,
  "lineWidth": 1,
  "colorScale": "#fff",
  "velocityScale": 1 / 25,
  "maxAge": 90,
  "paths": 800,
  "frameRate": 20,
  "useCoordsDraw": true,
  "gpet": true
}

methods

• setData(data,[options])

  • parameters
  • {Object} data
  • {Object} options
  • returns windLayer

• setOptions(options)

  • parameters
  • {Object} options
  • returns windLayer

DC.ChartLayer

Inherited from Layer

example

let chartLayer = new DC.ChartLayer('layer')
viewer.addLayer(chartLayer)

:::warning The chart layer depends on the echarts library, please make sure that echarts is available in the global variables before using it. :::

creation

• constructor([id],[option])

  • parameters
  • {String} id
  • {Object} option echarts
  • returns chartLayer

// options
{
  "animation": false, //required
  "GLMap": {},
  "series": [
    {
      "coordinateSystem": "GLMap"
    }
  ]
}

methods

• setOption(option)

  • parameters
  • {Object} option echarts
  • returns this