MapGIS Client for JavaScript API

# new Graphic(options)

参数:

支持如下方法：

示例

初始化标绘图层

// ES5引入方式
const { GraphicsLayer, Graphic } = zondy.cesium
// ES6引入方式
import { GraphicsLayer, Graphic } from "@mapgis/webclient-cesium-plugin"

//初始化一个标绘图层
const graphicsLayer = new GraphicsLayer(viewer, {});
viewer.scene.layers.appendGraphicsLayer(graphicsLayer);
//添加一个Marker基础标绘对象
const marker = new 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;

添加一个多边形图元

// ES5引入方式
const { GraphicsLayer, Graphic } = zondy.cesium
// ES6引入方式
import { GraphicsLayer, Graphic } from "@mapgis/webclient-cesium-plugin"

//初始化一个标绘图层
const graphicsLayer = new GraphicsLayer(viewer, {});
viewer.scene.layers.appendGraphicsLayer(graphicsLayer);

// 添加一个多边形图元
const polygonGraphic = new 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;
//通过经纬度计算笛卡尔平移向量
const position1 = new Cesium.Cartographic(114.103, 30.25, 100);
const 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);
const 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的标绘对象

// ES5引入方式
const { GraphicsLayer, Graphic } = zondy.cesium
// ES6引入方式
import { GraphicsLayer, Graphic } from "@mapgis/webclient-cesium-plugin"

//新增一个类型为div的标绘对象
//创建一个html字符串或者一个html标签对象
const html = "<div style='width: 100px;height: 100px;background-color: #00A7AA;'>";
//创建一个标绘对象
const graphic = new 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;