dc-sdk/docs/zh/layer

---

sidebar: auto

业务图层 🌎

将具有相同业务逻辑或属性的覆盖元素进行分类，以便于同一管理

Layer

图层的基类，其子类是实例化后需添加到三维场景中方可展示各类三维数据

:::warning 该基本类无法实例化 :::

properties

• {String} id：唯一标识 readonly
• {Boolean} show：是否显示
• {Object} attr：业务属性
• {String} state：图层状态 readonly
• {String} type：图层类型 readonly

methods

• addOverlay(overlay)

添加覆盖物

• 参数
  • {Overlay} overlay：覆盖物

• 返回值 this

• addOverlays(overlays)

添加覆盖物数组

• 参数
  • {Array<Overlay>} overlays：覆盖物数组

• 返回值 this

• removeOverlay(overlay)

删除覆盖物

• 参数
  • {Overlay} overlay：覆盖物

• 返回值 this

• getOverlay(overlayId)

根据 Id 获取覆盖物(不推荐用)

• 参数
  • {String} overlayId：覆盖物唯一标识(默认产生)

• 返回值 overlay

• getOverlayById(Id)

根据业务 Id 获取覆盖物(推荐用)

• 参数
  • {String} Id：覆盖物业务唯一标识

• 返回值 overlay

• getOverlaysByAttr(attrName, attrVal)

根据覆盖物属性获取覆盖物

• 参数
  • {String} attrName：属性名称
  • {Object} attrVal：属性值
• 返回值 array

  overlay.attr.name = 'test' //设置覆盖物的属性
  let arr = layer.getOverlaysByAttr('name', 'test') //根据属性获取覆盖物

• getOverlays()

获取所有覆盖物

• 返回值 array

• eachOverlay(method, context)

遍历覆盖物

• 参数
  • {Function} method：回调函数，参数为每一个覆盖物
  • {Object} context：上下文
• 返回值 this

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

• clear()

清空图层

• 返回值 this

• remove()

删除图层

• 返回值 this

• addTo(viewer)

添加图层到场景

• 参数
  • {Viewer|World} viewer：场景

• 返回值 this

• on(type, callback, context)

事件订阅

• 参数
  • {Object} type ：订阅类型
  • {Function} callback ：订阅回调
  • {Object} context ：上下文

• 返回值 this

• off(type, callback, context)

取消事件订阅

• 参数
  • {Object} type ：订阅类型
  • {Function} callback ：订阅回调
  • {Object} context ：上下文

• 返回值 this

• fire(type,params)

触发事件

• 参数
  • {Object} type ：订阅类型
  • {Object} params ：参数
• 返回值 this

static methods

• registerType(type)

注册图层类型

• 参数

  • {String} type：图层类型

• getLayerType()

获取图层类型

• 返回值 string

DC.LayerGroup

图层组，将图层按一定的逻辑分组，方便统一管理

example

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

creation

• constructor(id)

构造函数

• 参数
  • {String} id：图层组唯一标识
• 返回值 layerGroup

properties

• {String} id：唯一标识 readonly
• {Boolean} show：是否显示
• {String} type：图层类型 readonly

methods

• addLayer(layer)

添加图层

• 参数
  • {Layer} layer：图层

• 返回值 this

• removeLayer(layer)

删除图层

• 参数
  • {Layer} layer：图层

• 返回值 this

• getLayer(id)

获取图层

• 参数
  • {String} id：图层 ID

• 返回值 layer

• getLayers()

获取所有图层，不包括地图

• 返回值 layer

• remove()

删除图层组

• 返回值 this

• addTo(viewer)

添加图层到场景

• 参数
  • {Viewer|World} viewer：场景
• 返回值 this

DC.VectorLayer

矢量图层，用于添加各类矢量数据（点、线、面等），将矢量数据按一定的逻辑分组，方便统一管理，继承于Layer

example

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

creation

• constructor(id)

构造函数

• 参数
  • {String} id：图层唯一标识
• 返回值 vectorLayer

DC.DynamicLayer

动态图层，用于添加各类动态矢量数据（图标、模型等），将矢量数据按一定的逻辑分组，方便统一管理，继承于Layer

example

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

creation

• constructor(id)

构造函数

• 参数
  • {String} id：图层唯一标识
• 返回值 dynamicLayer

DC.PrimitiveLayer

图元图层，用于添加各类图元数据，将图元数据按一定的逻辑分组，方便统一管理，继承于Layer

example

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

creation

• constructor(id)

构造函数

• 参数
  • {String} id：图层唯一标识
• 返回值 primitiveLayer

DC.GroundPrimitiveLayer

贴地图元图层，用于添加各类贴地图元数据，将贴地图元数据按一定的逻辑分组，方便统一管理，继承于Layer

example

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

creation

• constructor(id)

构造函数

• 参数
  • {String} id：图层唯一标识
• 返回值 groundPrimitiveLayer

DC.TilesetLayer

3dTiles 图层，用于添加 3dTiles 模型数据， 继承于Layer

example

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

creation

• constructor(id)

构造函数

• 参数
  • {String} id：图层唯一标识
• 返回值 tilesetLayer

DC.GeoJsonLayer

GeoJson 图层，用于加载 GeoJson 格式数据，继承于Layer，

example

let layer = new DC.GeoJsonLayer('id', '**/**.geojson')
layer.eachOverlay((item) => {
  // item 为一个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])

构造函数

• 参数
  • {String} id：图层唯一标识
  • {String} url：数据地址
  • {Object} options：属性配置，详情参考：GeoJsonDataSource
• 返回值 geoJsonLayer

methods

• toVectorLayer()

转换为矢量图层

• 返回值 vectorLayer

• toModelLayer(modelUrl)

转换为模型图层

• 参数
  • {String} modelUrl：模型地址
• 返回值 vectorLayer

DC.TopoJsonLayer

TopoJson 图层，用于加载 TopoJson 格式数据，继承于Layer，

example

let layer = new DC.GeoJsonLayer('id', '**/**.geojson')
layer.eachOverlay((item) => {
  // item 为一个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])

构造函数

• 参数
  • {String} id：图层唯一标识
  • {String} url：数据地址
  • {Object} options：属性配置，详情参考：GeoJsonDataSource
• 返回值 topoJsonLayer

methods

• toVectorLayer()

转换为矢量图层

• 返回值 vectorLayer

• toModelLayer(modelUrl)

转换为模型图层

• 参数
  • {String} modelUrl：模型地址
• 返回值 vectorLayer

DC.HtmlLayer

Html 图层，用于加载 DivIcon 节点，继承于Layer，

example

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

creation

• constructor(id)

构造函数

• 参数
  • {String} id：图层唯一标识
• 返回值 htmlLayer

DC.CzmlLayer

Czml 图层，用于加载 Czml 数据，继承于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])

构造函数

• 参数
  • {String} id：图层唯一标识
  • {String} url：数据地址
  • {Object} options：属性配置，详情参考：CzmlDataSource
• 返回值 czmlLayer

DC.KmlLayer

Kml 图层，用于加载 Kml 数据，继承于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])

构造函数

• 参数
  • {String} id：图层唯一标识
  • {String} url：数据地址
  • {Object} options：属性配置，详情参考：KmlDataSource
• 返回值 kmlLayer

DC.GpxLayer

GPX 图层，用于加载 gpx 数据，继承于Layer

example

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

creation

• constructor(id,url,[options])

构造函数

• 参数
  • {String} id：图层唯一标识
  • {String} url：数据地址
  • {Object} options：属性配置，详情参考：GpxDataSource
• 返回值 gpxLayer

DC.ClusterLayer

聚合图层，继承于Layer

example

let layer = new DC.ClusterLayer('id',{image:''})
viewer.addLayer(layer)

creation

• constructor(id,[options])

构造函数

• 参数
  • {String} id：图层唯一标识
  • {Object} options：属性配置
• 返回值 clusterLayer

// 属性参数(可选)
{
  "radius": 40,//像素范围
  "maxZoom": 25,
  "image": "<单个点图片地址>",
  "style": "circle", // circle 、 clustering 、custom
  "gradientColors": {
    "0.0001": DC.Color.DEEPSKYBLUE,
    "0.001": DC.Color.GREEN,
    "0.01": DC.Color.ORANGE,
    "0.1": DC.Color.RED
  },//幅度颜色设置
  "gradientImages": {},//幅度图片设置，仅当style为custom有效
  "clusterSize":16//集合图标尺寸
  "fontSize": 12,
  // 字体大小
  "fontColor": DC.Color.BLACK //字体颜色
  "getCountOffset": (count)=>{return {x:0,y:0}} //字体偏移函数
}

methods

• setPoints(points)

设置点位

• 参数
  • {Array<Object>} points：点位信息
• 返回值 clusterLayer

DC.HeatMapLayer

热区图层，继承于Layer

example

let layer = new DC.HeatMapLayer('layer')
viewer.addLayer(layer)

creation

• constructor(id,bounds,[options])

构造函数

• 参数
  • {String} id：图层唯一标识
  • {Object} options：属性配置
• 返回值 heatMapLayer

//属性参数(可选)
{
  "gradient": {
    "0.5": "green",
    "0.6": "orange",
    "0.95": "red"
  }, //颜色设置
  "height": 0, // 高度
  "radius": 30, // 半径
  "useGround": false, //是否使用贴地模式
  "classificationType": 2 //分类 是否影响地形，3D切片或同时影响这两者。0:地形、1:3D切片、2：两者。贴地模式下生效
}

methods

• setPoints(points)

设置点位

• 参数
  • {Array<Object>} points：点位信息
• 返回值 heatMapLayer

//点位信息参数
{
  "lng": "", //经度
  "lat": "", //纬度
  "value": 10 //强度
}

DC.WindLayer

风向图层，继承于Layer

example

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

creation

• constructor(id,[options])

构造函数

• 参数
  • {String} id：图层唯一标识
  • {Object} options：属性配置
• 返回值 windLayer

//属性参数(可选)
{
  "globalAlpha": 0.9, //透明度
  "lineWidth": 1, // 线宽
  "colorScale": "#fff", //颜色
  "velocityScale": 1 / 25,
  "maxAge": 90,
  "paths": 800, // 路径数
  "frameRate": 20,
  "useCoordsDraw": true,
  "gpet": true
}

methods

• setData(data,[options])

设置风向数据

• 参数
  • {Object} data：风向数据
  • {Object} options：配置信息，参考构造函数的配置信息

• 返回值 windLayer

• setOptions(options)

设置风向数据

• 参数
  • {Object} options：配置信息，参考构造函数的配置信息
• 返回值 windLayer

DC.ChartLayer

图表图层，继承于Layer

example

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

:::warning 图表图层依赖于 echarts 库，使用前请确保全局变量中能够获取到 echarts :::

creation

• constructor([id],[option])

构造函数

• 参数
  • {String} id：唯一标识
  • {Object} option：echarts 配置，详情参考：echarts
• 返回值 chartLayer

// options，其他的参数参考 echarts
{
  "animation": false, // 必须要加
  "GLMap": {}, //地图
  "series": [
    {
      "coordinateSystem": "GLMap" // 坐标系统
    }
  ]
}

methods

• setOption(option)

设置点位

• 参数
  • {Object} option：echarts 配置，详情参考：echarts
• 返回值 this