# Graphic

#### new Cesium.Graphic(options)
MapGIS/Entity/Graphic.js 181

图元

Name | Type | Description
--- | --- | ---

`options`

Object

Name | Type | Default | Description
--- | --- | --- | ---
`type` | String |  | optional 图元类型`Graphic.graphicType` // * @param {String} [options.id] 图元ID
`positions` | Array.<Cartesian3> | Array.<Number> |  | optional 图元坐标信息,笛卡尔世界坐标为cartesian3,经纬度数组为例如[-115.0, 37.0, 100000.0, -107.0, 33.0, 150000.0]
`style` | Object |  | optional 图元样式信息 详情参见`Style`
`editPointStyle` | Object |  | optional 编辑点样式信息 详情参见`Style.EditPointStyle`
`attributes` | Object |  | optional 图元属性
`name` | String |  | optional 图元名称
`show` | Boolean | `true` | optional 图元是否显示
`asynchronous` | Boolean | `false` | optional 默认为阻塞式更新，true为异步更新，false为阻塞式更新。
`heading` | Number | `0.0` | optional 偏航角，弧度。
`pitch` | Number | `0.0` | optional 俯仰角，弧度。
`roll` | Number | `0.0` | optional 翻滚角，弧度。
`transformX` | Number | `0.0` | optional 局部坐标系X方向平移量，单位米，X方向为纬线方向
`transformY` | Number | `0.0` | optional 局部坐标系Y方向平移量，单位米，Y方向为经线方向
`transformZ` | Number | `0.0` | optional 局部坐标系Z方向平移量，单位米，Z方向为垂直地表方向
`enableVFC` | Number | `false` | optional 是否开启模型内部的视锥体检测，即标绘在模型内部是否隐藏，仅当类型为div时生效
`disappearByDistance` | Number | `20000000` | optional 根据div对象和主相机的距离，显示或隐藏div对象

##### Example:

    //初始化一个标绘图层
    var graphicsLayer = new Cesium.GraphicsLayer(viewer, {});
    viewer.scene.layers.appendGraphicsLayer(graphicsLayer);
    //添加一个Marker基础标绘对象
    var marker = new Cesium.Graphic({
      //类型
      type: 'marker',
      //位置点
      positions: [new Cesium.Cartesian3(-1160028.4895404815, 5443801.569087819, 3103982.2120705717)],
      //样式
      style: {
          labelStyle: {
              //字体
             font: '30px sans-serif',
             //文字内容
             text: '这是Marker',
             //文字颜色
             fillColor: Cesium.Color.RED
          },
          billboardStyle: {
              //billboard图片链接
              image: 'http://webclient.smaryun.com:8200/NoneSpatialData/image/icon.png'
          },
          //文字相对于图片方位
          labelPlaceType: 'topCenter',
          //文字相对于图片间距
          labelPadding: 20,
          //离地高度
          offsetHeight: 100,
          //marker的屏幕像素偏移
          pixelOffset: new Cesium.Cartesian2(0, 0)
      },
    });
    //添加Marker
    graphicsLayer.addGraphic(marker);
    //修改样式
    marker.style.labelPlaceType = "leftCenter";
    marker.style.labelStyle.fillColor = Cesium.Color.BLUE;
    marker.style.billboardStyle.width = 100;
    -----------------------------------------------------------------------------
    //添加一个多边形图元
    var polygonGraphic = new Cesium.Graphic({
      type: 'polygon',
      positions: [
          Cesium.Cartesian3.fromDegrees(113.9514, 30.0129, 0),
          Cesium.Cartesian3.fromDegrees(113.964, 30.0219, 0),
          Cesium.Cartesian3.fromDegrees(113.9753, 30.015, 0),
          Cesium.Cartesian3.fromDegrees(113.9624, 30.0075, 0),
          Cesium.Cartesian3.fromDegrees(113.9514, 30.0129, 0)
      ],
      style: {
          color: Cesium.Color.AQUA
      }
    });
    //将标绘点添加入标绘图层
    graphicsLayer.addGraphic(polygonGraphic);
    //平移多边形，修改transformX、transformY、transformZ，三个值组成一个平移向量，朝这个方向平移，笛卡尔坐标
    polygonGraphic.transformX += 100;
    polygonGraphic.transformY += 2000;
    polygonGraphic.transformZ += 300;
    //通过经纬度计算笛卡尔平移向量
    var position1 = new Cesium.Cartographic(114.103, 30.25, 100);
    var position2 = new Cesium.Cartographic(114.211, 30.46, 100);
    position1 = Cesium.Cartesian3.fromDegrees(position1.longitude, position1.latitude, position1.height);
    position2 = Cesium.Cartesian3.fromDegrees(position2.longitude, position2.latitude, position2.height);
    var translate = Cesium.Cartesian3.subtract(position2, position1);
    polygonGraphic.transformX += translate.x;
    polygonGraphic.transformY += translate.y;
    polygonGraphic.transformZ += translate.z;
    //旋转多边形，修改heading、pitch、roll来实现三个轴向旋转，弧度值
    polygonGraphic.heading += 0.1;
    polygonGraphic.pitch += 0.1;
    polygonGraphic.roll += 0.1;
    --------------------------------------------------------------------------------------
    //新增一个类型为div的标绘对象
    //创建一个html字符串或者一个html标签对象
    var html = "<div style='width: 100px;height: 100px;background-color: #00A7AA;'>";
    //创建一个标绘对象
    var graphic = new Cesium.Graphic({
       //标绘类型
       type: 'div',
       //标绘位置
       positions: [Cesium.Cartesian3.fromDegrees(114.285992, 30.585234, 0)],
       //标绘样式
       style: {
           //html字符串或标签对象
           html: html,
           //html相对原始位置的屏幕像素偏移
           pixelOffset: new Cesium.Cartesian2(0, 0),
           //额外抬升高度
           offsetHeight: 0
       },
       //开启时，当对象在模型内部时，会隐藏，开启此功能会有性能损耗
       enableVFC: false,
       //当div对象和主相机的距离超过20000000米时，隐藏div对象
       disappearByDistance: 20000000
    });
    //将标绘添加入标绘图层
    graphicsLayer.addGraphic(graphic);
    //创建完成后，实时修改
    graphic.style.html = "新的html";
    graphic.style.pixelOffset = new Cesium.Cartesian2(0, 156);
    graphic.style.offsetHeight = 2000;

### Members

#### static Cesium.Graphic.graphicType
MapGIS/Entity/Graphic.js 2470

图元类型

##### Properties:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`point` | String | <optional> | 'point' | 点，类型（type）为point时样式参数参照`Style.PointStyle`
`marker` | String | <optional> | 'marker' | marker，类型（type）为marker时样式参数参照`Style.MarkerStyle`
`label` | String | <optional> | 'label' | 文本,类型（type）为label时样式参数参照`Style.LabelStyle`
`billboard` | String | <optional> | 'billboard' | 广告牌，类型(type)为billboard时样式参数参照`Style.BillboardStyle`
`polyline` | String | <optional> | 'polyline' | 线，类型(type)为polyline时样式参数参照`Style.PolylineStyle`
`polylineVolume` | String | <optional> | 'polylineVolume' | 圆管线，类型(type)为polylineVolume时样式参数参照`Style.PolylineVolumeStyle`
`polygon` | String | <optional> | 'polygon' | 面（区），类型(type)为polygon时样式参数参照`Style.PolygonStyle`
`rectangle` | String | <optional> | 'rectangle' | 矩形，类型(type)为rectangle时样式参数参照`Style.RectangleStyle`
`square` | String | <optional> | 'square' | 正方形，类型(type)square`Style.SquareStyle`
`circle` | String | <optional> | 'circle' | 圆，类型(type)为circle时样式参数参照`Style.CircleStyle`
`corridor` | String | <optional> | 'corridor' | 方管线，类型(type)为corridor时样式参数参照`Style.CorridorStyle`
`cylinder` | String | <optional> | 'cylinder' | 圆台（圆锥），类型(type)为cylinder时样式参数参照`Style.CylinderStyle`
`ellipsoid` | String | <optional> | 'ellipsoid' | 椭球，类型(type)为ellipsoid时样式参数参照`Style.EllipsoidStyle`
`sphere` | String | <optional> | 'sphere' | 圆球，类型(type)为sphere时样式参数参照`Style.SphereStyle`
`wall` | String | <optional> | 'wall' | 墙，类型(type)为wall时样式参数参照`Style.WallStyle`
`box` | String | <optional> | 'box' | 盒子,类型（type）为box时样式参数参照`Style.BoxStyle`
`model` | String | <optional> | 'model' | gltf模型,类型（type）为model时样式参数参照`Style.ModelStyle`

#### allowPicking : Boolean
MapGIS/Entity/Graphic.js 447

图形对象是否可以选中

#### asynchronous : Boolean
MapGIS/Entity/Graphic.js 454

图形对象是否阻塞更新，一般设置为false避免更新时闪烁

#### readonly attributes : Object
MapGIS/Entity/Graphic.js 389

图形对象属性键值对

#### readonly boundingSphere : BoundingSphere
MapGIS/Entity/Graphic.js 364

图元对象包围盒

#### coordinate : Array.<Cartesian3>
MapGIS/Entity/Graphic.js 347

图形实体位置数组(经纬度+高程，度)

#### editing : Boolean
MapGIS/Entity/Graphic.js 432

图形对象是否在编辑状态

#### enableVFC : Boolean
MapGIS/Entity/Graphic.js 526

是否开启视锥体检测，仅当类型为div时生效

#### heading : Number
MapGIS/Entity/Graphic.js 461

图形对象偏航角，弧度。

#### readonly id : String
MapGIS/Entity/Graphic.js 327

图形ID

#### isPoint : Boolean
MapGIS/Entity/Graphic.js 414

图形是否为点，文本或者广告牌

#### readonly modelMatrix : Matrix4
MapGIS/Entity/Graphic.js 356

图元对象旋转平移矩阵

#### name : Number
MapGIS/Entity/Graphic.js 400

图形对象名称

#### readonly parentLayer : GraphicsLayer
MapGIS/Entity/Graphic.js 314

图元父图层

#### pitch : Number
MapGIS/Entity/Graphic.js 468

图形对象俯仰角，弧度。

#### positions : Array.<Cartesian3>
MapGIS/Entity/Graphic.js 338

图形实体位置数组

#### readonly primitive : Primitive
MapGIS/Entity/Graphic.js 503

图形对象primitive

#### roll : Number
MapGIS/Entity/Graphic.js 475

图形对象翻滚角，弧度。

#### show : Boolean
MapGIS/Entity/Graphic.js 425

图形是否显示

#### readonly style : Style
MapGIS/Entity/Graphic.js 374

图元对象样式信息

##### Example:

    var graphic = new Graphic({type:label,style:{text:'mapgis'}});
    graphic.style.text = 'mapgispro';

#### transformX : Number
MapGIS/Entity/Graphic.js 482

图形对象局部坐标系X方向平移量，单位米，X方向为纬线方向

#### transformY : Number
MapGIS/Entity/Graphic.js 489

图形对象局部坐标系y方向平移量，单位米，y方向为经线方向

#### transformZ : Number
MapGIS/Entity/Graphic.js 496

图形对象局部坐标系z方向平移量，单位米，z方向为垂直地表方向

#### readonly type : String
MapGIS/Entity/Graphic.js 302

图元类型 参照`Graphic.graphicType`

#### updated : function
MapGIS/Entity/Graphic.js 513

图形更新后的回调，请在这个回调里面获取图形参数，不要在vue上绑定图形对象

### Methods

#### addAttributes(key, value)
MapGIS/Entity/Graphic.js 2079

给图元添加属性字段

Name | Type | Description
--- | --- | ---
`key` | String | 关键字
`value` | String | Object | 值

#### addTo(layer)
MapGIS/Entity/Graphic.js 2138

添加到图层上，同 layer.addGraphic

Name | Type | Description
--- | --- | ---
`layer` | GraphicsLayer | 图层对象

#### getDistances() → Array.<Number>
MapGIS/Entity/Graphic.js 2147

计算顶点坐标之间的距离

##### Returns:

返回坐标之间的距离数组

#### remove()
MapGIS/Entity/Graphic.js 2163

从图层中移除图元

#### updateGraphic(style, name, value, oldValue)
MapGIS/Entity/Graphic.js 708

更新整个标绘对象，包括位置、矩阵、样式等

Name | Type | Description
--- | --- | ---
`style` |  | 标绘对象的style
`name` |  | 标绘对象的样式名
`value` |  | 标绘对象的样式值(新)
`oldValue` |  | 标绘对象的样式值(旧)