Class: Plot

Plot

标绘构造类V1.0

const plotInstance = new Plot(this.$viewer, options)
//绘制
plotInstace.draw(type, options)
//编辑,设置当前激活状态图形样式
plotInstace.setAttrs({
    outlineWidth: 5,
    outlineColor: 'rgba(0,0,255,.6)',
    color: 'rgba(255,0,0,0.4)'
  })
//单个清除
1.判断当前激活对象,删除当前激活的标绘对象
 if (plotInstace.activeInstance) {
    plotInstace.remove(plotInstace.activeInstance)
  }
2.根据ID进行清除
plotInstace.removeById('3a0b2b91-6ac9-4272-83cb-7dcc665a054c')
Plot.clear('3a0b2b91-6ac9-4272-83cb-7dcc665a054c')//直接调用静态方法
//清除所有
plotInstace.clear()
Plot.clear()//直接调用静态方法
//绘制结束监听事件
plotInstance.on('drawEnd', (e) => {
    e.on('activated', (e) => {
      //激活回调
      // console.log(`${e.type} ${e.id} is activated!`)
    })
    e.on('deactivated', (e) => {
      //取消激活回调
      // console.log(`${e.type} ${e.id} is deactivated!`)
    })
    e.on('change', (e) => {
      //标绘改变回调
      console.log(`${e.type} ${e.id} is change!`)
      // console.log('当前激活标绘数据:', e.data.positions)
    })
    console.log('当前激活标绘类型', e.type)
  })
//销毁标绘
plotInstance.destroy()

new Plot(viewer, options)

app/plot/core/Plot.js, line 49
Name Type Description
viewer Viewer

容器

options Object

标绘构造属性

Name Type Default Description
autoActive Boolean true optional

是否自动激活

Classes

Plot

Members

activeInfoBasePlot

获取当前激活图形的data

activeInstanceBasePlot

获取当前激活的 instance

activeInstanceTypeBasePlot

获取当前激活图形的标绘类型

allInstancesArray.<BasePlot>

获取当前所有标绘实例

Methods

staticPlot.clear(plotId)

app/plot/core/Plot.js, line 118

清除指定 plot 构造实例,不传 id 则清除所有 plot 构造实例

Name Type Description
plotId String

add(plotInstance-实体对象)

app/plot/core/Plot.js, line 357

添加 plot 实例

Name Type Description
plotInstance-实体对象 Object

clear()

app/plot/core/Plot.js, line 237

清空所有标绘实例

destroy()

app/plot/core/Plot.js, line 245

销毁所有标绘实例

draw(type, options){Plot}

app/plot/core/Plot.js, line 323

绘制图形

Name Type Description
type String

标绘图形类型

  // 标绘类型 {String} type
  "Billboard" // 自定义图标
  "Rectangle2D"  // 贴地矩形
  "Polygon2D" // 贴地面
  "Polygon2DArrowP" // 平尾平面箭头
  "Polygon2DArrowS" // 燕尾平面箭头
  "Polygon2DArrowDouble" // 平面钳击箭头
  "Circle2D" // 贴地圆
  "POINT" // 点
  "PolygonSector2D" // 贴地扇形
  "PolygonCurve2D" // 贴地曲面(自由面)
  "Polyline" // 折线标绘
  "Curve" // 曲线
  "PolylineArrow" // 箭头线
  "CurveArrow" // 箭头曲线
  "Arrow" // 箭头
  "ArrowDouble" // 钳击(双箭头)
  "ArrowStraight" // 粗单尖直箭头
  "Beizer" // 贝塞尔曲线
  "Bspline" // B样条曲线
  "PolygonCurve2D" // 贴地曲面(自由面)
  "POLYGON3D" // 面立体
options Object

标绘图形属性

  // 图标属性设置
  const options = {
    billboard: {
        image: require('../../assets/dataImages/cars.png'),
        width: 20,
        height: 20,
    }
  }

  // 通用要素按需选取属性
  const options = {
      show:true,//是否显示
      fill: true,//是否用提供的材料填充多边形
      material: Cesium.Color.YELLOW.withAlpha(0.5),//材质
      outline: true,//是否显示边框
      outlineColor: Cesium.Color.YELLOW.withAlpha(0.7),//边框颜色
      outlineWidth: 10,//边框宽度
      color:Color.WHITE, //颜色
      clampToGround: true,//贴地
      extrudedHeight: 20, //拉升高度
      ........
  }
Returns:
Type Description
Plot 标绘构造实例

exportAllData()

app/plot/core/Plot.js, line 156

获取图上所有标绘实例const datas = plot.exportAllData()

off(type, callback){Plot}

app/plot/core/Plot.js, line 347

解除事件绑定

Name Type Description
type String

事件类型

callback function

回调方法

Returns:
Type Description
Plot 标绘构造实例

on(type, callback){Plot}

app/plot/core/Plot.js, line 335

绑定事件

Name Type Description
type String

事件类型

callback function

回调方法

Returns:
Type Description
Plot 标绘构造实例

read(plotOptions)

app/plot/core/Plot.js, line 142

通过 json 读取一个标绘实例

Name Type Description
plotOptions Object

标绘 json

remove(entity){Plot}

app/plot/core/Plot.js, line 380

移除 plot 实例

Name Type Description
entity *
Returns:
Type Description
Plot 标绘构造实例

removeById(instanceId){Plot}

app/plot/core/Plot.js, line 391

根据实例id删除实例

Name Type Description
instanceId String
Returns:
Type Description
Plot 标绘构造实例

set(id, options){this}

app/plot/core/Plot.js, line 257

为指定 id 的标绘设置属性

Name Type Description
id String

id

options Object

样式属性参数

Returns:
Type Description
this

setAttrs(style)

app/plot/core/Plot.js, line 370

设置当前激活状态图形的样式

Name Type Description
style Object

图形样式参数