dc-sdk/docs/zh/api/overlay-primitive.md

# 图元要素 🌎

## DC.PointPrimitive

> 点位图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let position = new DC.Position(120, 20)
let point = new DC.PointPrimitive(position)
point.setStyle({
  pixelSize: 10,
})
```

### creation

- **_constructor(position)_**

  构造函数

  - 参数
    - `{Position|Number|String|Object} position`：坐标
  - 返回值 `point`

### properties

- `{Position|Number|String|Object} position`：坐标

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式，详情参考：[PointGraphics](http://resource.dvgis.cn/cesium-docs/PointGraphics.html)
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "pixelSize": 1, //像素大小
  "heightReference": 0, //高度参照，0：位置无参照，位置是绝对的，1：位置固定在地形上 2：位置高度是指地形上方的高度。
  "color": DC.Color.WHITE, //颜色
  "outlineColor": DC.Color.WHITE, //边框颜色
  "outlineWidth": 0, //边框大小，
  "scaleByDistance": {
    "near": 0, //最近距离
    "nearValue": 0, //最近距离值
    "far": 1, //最远距离值
    "farValue": 0 //最远距离值
  }, //根据距离设置比例
  "translucencyByDistance": {
    "near": 0, //最近距离
    "nearValue": 0, //最近距离值
    "far": 1, //最远距离值
    "farValue": 0 //最远距离值
  }, //根据距离设置透明度
  "distanceDisplayCondition": {
    "near": 0, //最近距离
    "far": Number.MAX_VALUE //最远距离
  }, //根据距离设置可见
  "disableDepthTestDistance": 0 // 深度检测距离，用于防止剪切地形，设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，永远不会应用深度测试。
}
```

## DC.BillboardPrimitive

> 图标图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let position = new DC.Position(120, 20)
let billboard = new DC.BillboardPrimitive(position, '***/**.png')
billboard.size = [20, 20]
```

### creation

- **_constructor(position,icon)_**

  构造函数

  - 参数
    - `{Position|Number|String|Object} position`：坐标
    - `{String} icon`：图标地址
  - 返回值 `billboard`

### properties

- `{Position} position`：坐标
- `{String} icon`：图标地址
- `{Array<Number>} size`：图标大小

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式，详情参考：[Billboard](http://resource.dvgis.cn/cesium-docs/Billboard.html)
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "heightReference": 0, //高度参照，0：位置无参照，位置是绝对的，1：位置固定在地形上 2：位置高度是指地形上方的高度。
  "scale": 1, //比例
  "pixelOffset": { "x": 0, "y": 0 }, //偏移像素
  "rotation": 0, //旋转角度
  "translucencyByDistance": {
    "near": 0, //最近距离
    "nearValue": 0, //最近距离值
    "far": 1, //最远距离值
    "farValue": 0 //最远距离值
  }, //根据距离设置透明度
  "scaleByDistance": {
    "near": 0, //最近距离
    "nearValue": 0, //最近距离值
    "far": 1, //最远距离值
    "farValue": 0 //最远距离值
  }, //根据距离设置比例
  "distanceDisplayCondition": {
    "near": 0, //最近距离
    "far": Number.MAX_VALUE //最远距离
  }, //根据距离设置可见
  "disableDepthTestDistance": 0 // 深度检测距离，用于防止剪切地形，设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，永远不会应用深度测试。
}
```

## DC.BounceBillboardPrimitive

> 跳动图标图元，继承于[BillboardPrimitive](#dc-billboardprimitive)

### example

```js
let position = new DC.Position(120, 20)
let billboard = new DC.BounceBillboardPrimitive(position, '***/**.png')
billboard.size = [20, 20]
```

### creation

- **_constructor(position,icon)_**

  构造函数

  - 参数
    - `{Position|Number|String|Object} position`：坐标
    - `{String} icon`：图标地址
  - 返回值 `billboard`

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式，详情参考：[Billboard](http://resource.dvgis.cn/cesium-docs/Billboard.html)
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "maxOffsetY": 10, //垂直方向最大平移量
  "offsetAmount": 0.1 //垂直方向每帧平移量
  // 其他样式参考 BillboardPrimitive 样式
}
```

## DC.LabelPrimitive

> 标签图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let position = new DC.Position(120, 20)
let Label = new DC.LabelPrimitive(position, 'test')
```

### creation

- **_constructor(position,text)_**

  构造函数

  - 参数
    - `{Position|Number|String|Object} position`：坐标
    - `{String} text`：文本
  - 返回值 `label`

### properties

- `{Position|Number|String|Object} position`：坐标
- `{String} text`：文本

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式，详情参考：[Label](http://resource.dvgis.cn/cesium-docs/Label.html)
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "font": "30px sans-serif", // CSS 字体设置
  "scale": 1, //比例
  "pixelOffset": { "x": 0, "y": 0 }, //偏移像素
  "heightReference": 0, //高度参照，0：位置无参照，位置是绝对的，1：位置固定在地形上 2：位置高度是指地形上方的高度。
  "showBackground": false, //是否显示背景
  "backgroundColor": DC.Color.BLACK, //背景颜色
  "backgroundPadding": { "x": 0, "y": 0 }, //背景间隙
  "fillColor": DC.Color.BLACK, //文字颜色
  "outlineColor": DC.Color.WHITE, //边框颜色
  "outlineWidth": 0, //边框大小，
  "scaleByDistance": {
    "near": 0, //最近距离
    "nearValue": 0, //最近距离值
    "far": 1, //最远距离值
    "farValue": 0 //最远距离值
  }, //根据距离设置比例
  "translucencyByDistance": {
    "near": 0, //最近距离
    "nearValue": 0, //最近距离值
    "far": 1, //最远距离值
    "farValue": 0 //最远距离值
  }, //根据距离设置透明度
  "distanceDisplayCondition": {
    "near": 0, //最近距离
    "far": Number.MAX_VALUE //最远距离
  }, //根据距离设置可见
  "disableDepthTestDistance": 0 // 深度检测距离，用于防止剪切地形，设置为零时，将始终应用深度测试。设置为Number.POSITIVE_INFINITY时，永远不会应用深度测试。
}
```

## DC.BounceLabelPrimitive

> 跳动文本图元，继承于[LabelPrimitive](#dc-labelprimitive)

### example

```js
let position = new DC.Position(120, 20)
let label = new DC.BounceLabelPrimitive(position, 'test')
```

### creation

- **_constructor(position,text)_**

  构造函数

  - 参数
    - `{Position|Number|String|Object} position`：坐标
    - `{String} text`：文本
  - 返回值 `label`

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式，详情参考：[Label](http://resource.dvgis.cn/cesium-docs/Label.html)
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "maxOffsetY": 10, //垂直方向最大平移量
  "offsetAmount": 0.1 //垂直方向每帧平移量
  // 其他样式参考 LabelPrimitive 样式
}
```

## DC.PolylinePrimitive

> 线图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let polyline = new DC.PolylinePrimitive('120,20;120,30')
polyline.setStyle({
  width: 10,
})
```

### creation

- **_constructor(positions)_**

  构造函数

  - 参数
    - `{String|Array<Position|Number|String|Object>} positions`：坐标串
  - 返回值 `polyline`

### properties

- `{String|Array<Position|Number|String|Object>} positions`：坐标串
- `{Position} center`：中心点 **_`readonly`_**
- `{Number} distance`：距离,单位：米 **_`readonly`_**

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式，详情参考：[Polyline](http://resource.dvgis.cn/cesium-docs/Polyline.html)
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "width": 1, //线宽
  "material": DC.Color.WHITE, //材质
  "clampToGround": false, //是否贴地
  "shadows": 0, //阴影类型，0：禁用、1：启用 、2：投射、3：接受
  "distanceDisplayCondition": {
    "near": 0, //最近距离
    "far": Number.MAX_VALUE //最远距离
  }, //根据距离设置可见
  "classificationType": 2, //分类 是否影响地形，3D切片或同时影响这两者。0:地形、1:3D切片、2：两者
  "zIndex": 0 //层级
}
```

## DC.TrailLinePrimitive

> 轨迹线图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let trailLinePrimitive = new DC.TrailLinePrimitive('120,20;120,30;122,30')
```

### creation

- **_constructor(positions,[asynchronous])_**

  构造函数

  - 参数
    - `{String|Array<Position|Number|String|Object>} positions`：坐标串
  - 返回值 `trailLine`

### properties

- `{String|Array<Position|Number|String|Object>} positions`：坐标串

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "speed": 5, //速度
  "color": DC.Color.WHITE //颜色
}
```

## DC.FlowLinePrimitive

> 流动线图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let flowLinePrimitive = new DC.FlowLinePrimitive('120,20;120,30;122,30')
```

### creation

- **_constructor(positions,[asynchronous])_**

  构造函数

  - 参数
    - `{String|Array<Position|Number|String|Object>} positions`：坐标串
  - 返回值 `flowLine`

### properties

- `{String|Array<Position|Number|String|Object>} positions`：坐标串

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "speed": 5, //速度
  "color": DC.Color.WHITE, //颜色
  "percent": 0.3, // 比例
  "gradient": 0.1 // 透明程度
}
```

## DC.ModelPrimitive

> 模型图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let position = new DC.Position(120, 20)
let model = new DC.ModelPrimitive(position, '**/**.glb')
```

### creation

- **_constructor(position, modelUrl)_**

  构造函数

  - 参数
    - `{Position|Number|String|Object} position`：坐标
    - `{String} modelUrl`：模型地址
  - 返回值 `model`

### properties

- `{Position|Number|String|Object} position`：坐标
- `{String} modelUrl`：模型地址
- `{Promise} readyPromise`：加载完成后的异步函数 **_`readonly`_**

### methods

- **_getMaterial(name)_**

  设置材质

  - 参数
    - `{String} name`：节点名称
  - 返回值 `modelMaterial`

- **_getMesh(name)_**

  获取三角网

  - 参数
    - `{String} name`：节点名称
  - 返回值 `modelMesh`

- **_getNode(name)_**

  获取节点

  - 参数
    - `{String} name`：节点名称
  - 返回值 `modelNode`

- **_getNodes()_**

  获取所有节点

  - 返回值 `array<ModelNode>`

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式，详情参考：[Model](http://resource.dvgis.cn/cesium-docs/Model.html)
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "scale": 1, //比例
  "minimumPixelSize": 0, //指定模型的最小像素大小，而不考虑缩放
  "maximumScale": 0, //指定模型的最大比例
  "heightReference": 0, //高度参照，0：位置无参照，位置是绝对的，1：位置固定在地形上 2：位置高度是指地形上方的高度。
  "shadows": 0, //阴影类型，0：禁用、1：启用 、2：投射、3：接受
  "silhouetteColor": DC.Color.RED, //轮廓颜色
  "silhouetteSize": 0, //轮廓宽度
  "lightColor": DC.Color.RED, //模型着色时指定灯光颜色
  "distanceDisplayCondition": {
    "near": 0, //最近距离
    "far": Number.MAX_VALUE //最远距离
  } //根据距离设置可见
}
```

## DC.DiffuseWallPrimitive

> 扩散墙图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let position = new DC.Position(120, 20)
let wall = new DC.DiffuseWallPrimitive(position, 2000, 1000)
```

### creation

- **_constructor(center, radius, height)_**

  构造函数

  - 参数
    - `{Position|Number|String|Object} center`：圆心
    - `{Number} radius`：半径
    - `{Number} height`：高度
  - 返回值 `wall`

### properties

- `{Position|Number|String|Object} center`：圆心
- `{Number} radius`：半径
- `{Number} height`：高度

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "minRadius": 10, // 动画最小半径
  "minHeight": 30, // 动画最小高度
  "color": DC.Color.RED, // 墙体颜色
  "slices": 128, //边数
  "speed": 10 //速度
}
```

## DC.ElecEllipsoidPrimitive

> 电弧球图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let elecEllipsoid = new DC.ElecEllipsoidPrimitive('120,20', {
  x: 2000,
  y: 2000,
  z: 2000
})
```

### creation

- **_constructor(center,radius)_**

  构造函数

  - 参数
    - `{Position|Number|String|Object} center`：球心
    - `{Object} radius`:球半径
  - 返回值 `elecEllipsoid`

### properties

- `{Position|Number|String|Object} center`：球心
- `{Object} radius`:球半径

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "speed": 5, //速度
  "color": DC.Color.WHITE //颜色
}
```

## DC.LightCylinderPrimitive

> 光柱要素，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let position = new DC.Position(120, 20)
let cylinder = new DC.LightCylinderPrimitive(position, 1000, 1, 100)
```

### creation

- **_constructor(position, length, topRadius, bottomRadius)_**

  构造函数

  - 参数
    - `{Position|Number|String|Object} position`：坐标
    - `{Number} length`：长度
    - `{Number} topRadius`：上半径
    - `{Number} bottomRadius`：下半径
  - 返回值 `cylinder`

### properties

- `{Position} position`：坐标
- `{Number} length`：长度
- `{Number} topRadius`：上半径
- `{Number} bottomRadius`：下半径

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "color": DC.Color.BLACK //颜色
}
```

## DC.ScanCirclePrimitive

> 扫描圆图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let scanCirclePrimitive = new DC.ScanCirclePrimitive('120,20', 1000)
```

### creation

- **_constructor(position,radius)_**

  构造函数

  - 参数
    - `{String|Position|Array|Object} position`：圆心
    - `{Number} radius`：半径
  - 返回值 `scanCircle`

### properties

- `{String|Position|Array|Object} position`：圆心
- `{Number} radius`：半径

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "speed": 5, //速度
  "color": DC.Color.WHITE //颜色
}
```

## DC.WaterPrimitive

> 水面图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let water = new DC.WaterPrimitive('120,20;120,30;122,30')
water.setStyle({
  baseWaterColor: DC.Color.AQUA.withAlpha(0.3),
  normalMap: 'examples/images/icon/waterNormalsSmall.jpg',
  frequency: 1000.0,
  animationSpeed: 0.01,
  amplitude: 10,
  specularIntensity: 10,
})
```

### creation

- **_constructor(positions,[holes])_**

  构造函数

  - 参数
    - `{String|Array<Position|Number|String|Object>} positions`：坐标串
    - `{Array<Position|Number|String|Object>} holes`：洞面坐标
  - 返回值 `water`

### properties

- `{String|Array<Position|Number|String|Object>} positions`：坐标串

### methods

- **_setStyle(style)_**

  设置样式

  - 参数
    - `{Object} style`：样式，详情参考：[PolygonGraphics](http://resource.dvgis.cn/cesium-docs/PolygonGraphics.html)
  - 返回值 `this`

```js
// style（属性可选）
const style = {
  "height": 1, //高度
  "extrudedHeight": 0, //拉升高度
  "stRotation": 0, //旋转角度
  "outline": false, //是否显示边框
  "closeTop": true, //顶面是否闭合
  "closeBottom": true, //底面是否闭合
  "classificationType": 2, //分类 是否影响地形，3D切片或同时影响这两者。0:地形、1:3D切片、2：两者
  "baseWaterColor": DC.Color.WHITE, // 水体颜色
  "blendColor": DC.Color.WHITE, // 混合颜色
  "specularMap": "", // 镜面图
  "normalMap": "", // 法线图
  "frequency": 1000, //波纹数量
  "animationSpeed": 0.03, // 动画速度
  "amplitude": 10, //水波振幅
  "specularIntensity": 10 //镜面反射强度
}
```

## DC.VideoPrimitive

> 视频图元，继承于[Overlay](./overlay-vector#dc-overlay)

### example

```js
let videoEl = new document.getElementById('video')
let videoPrimitive = new DC.VideoPrimitive('120,20;120,30;122,30', videoEl)
```

### creation

- **_constructor(positions,video)_**

  构造函数

  - 参数
    - `{String|Array<Position|Number|String|Object>} positions`：坐标串
    - `{Element} video`：视频节点
  - 返回值 `videoPrimitive`

### properties

- `{String|Array<Position|Number|String|Object>} positions`：坐标串
- `{Element} video`：视频节点