Graphic

new Cesium.Graphic(options)
MapGIS/Entity/Graphic.js 187

图元
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 2870

图元类型
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)squareStyle.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
dynamicRiver String <optional>
 'dynamicRiver' 河流,类型（type）为dynamicRiver时样式参数参照Style.RiverStyle

allowPicking : Boolean
MapGIS/Entity/Graphic.js 454

图形对象是否可以选中

asynchronous : Boolean
MapGIS/Entity/Graphic.js 461

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

readonly attributes : Object
MapGIS/Entity/Graphic.js 396

图形对象属性键值对

readonly boundingSphere : BoundingSphere
MapGIS/Entity/Graphic.js 371

图元对象包围盒

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

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

editing : Boolean
MapGIS/Entity/Graphic.js 439

图形对象是否在编辑状态

enableVFC : Boolean
MapGIS/Entity/Graphic.js 533

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

heading : Number
MapGIS/Entity/Graphic.js 468

图形对象偏航角，弧度。

readonly id : String
MapGIS/Entity/Graphic.js 334

图形ID

isPoint : Boolean
MapGIS/Entity/Graphic.js 421

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

readonly modelMatrix : Matrix4
MapGIS/Entity/Graphic.js 363

图元对象旋转平移矩阵

name : Number
MapGIS/Entity/Graphic.js 407

图形对象名称

readonly parentLayer : GraphicsLayer
MapGIS/Entity/Graphic.js 321

图元父图层

pitch : Number
MapGIS/Entity/Graphic.js 475

图形对象俯仰角，弧度。

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

图形实体位置数组

readonly primitive : Primitive
MapGIS/Entity/Graphic.js 510

图形对象primitive

roll : Number
MapGIS/Entity/Graphic.js 482

图形对象翻滚角，弧度。

show : Boolean
MapGIS/Entity/Graphic.js 432

图形是否显示

readonly style : Style
MapGIS/Entity/Graphic.js 381

图元对象样式信息
Example:
var graphic = new Graphic({type:label,style:{text:'mapgis'}});
graphic.style.text = 'mapgispro';

transformX : Number
MapGIS/Entity/Graphic.js 489

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

transformY : Number
MapGIS/Entity/Graphic.js 496

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

transformZ : Number
MapGIS/Entity/Graphic.js 503

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

readonly type : String
MapGIS/Entity/Graphic.js 309

图元类型 参照Graphic.graphicType

updated : function
MapGIS/Entity/Graphic.js 520

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

Methods

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

给图元添加属性字段
Name Type Description
key String 关键字
value String | Object 值

addTo(layer)
MapGIS/Entity/Graphic.js 2524

添加到图层上，同 layer.addGraphic
Name Type Description
layer GraphicsLayer 图层对象

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

计算顶点坐标之间的距离
Returns:
返回坐标之间的距离数组

remove()
MapGIS/Entity/Graphic.js 2549

从图层中移除图元

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

更新整个标绘对象，包括位置、矩阵、样式等
Name Type Description
style 标绘对象的style
name 标绘对象的样式名
value 标绘对象的样式值(新)
oldValue 标绘对象的样式值(旧)