Plot 标绘

---

演练场

操作提示

鼠标左键标记点位，左键双击结束绘制。

鼠标右键撤销上一点位（仅标绘多边形2D、多边形3D、线时生效）。

引入

import { Plot } from "@m-tech/gis-core";

入参

参数	类型	必填	默认值	说明
viewer	Viewer	是	容器	容器
options	Object	否	{}	配置
options.editable	boolean	否	true	是否允许位置编辑
options.autoActive	boolean	否	true	是否绘制完自动激活位置编辑
options.pointLabel	Object	否	{}	点位名称配置
options.pointLabel.visible	boolean	否	false	是否展示点位名称
options.pointLabel.formatter	string | Function	否	'{index}'	格式化参数
options.pointLabel.style	LabelGraphics.ConstructorOptions	否	{}	Label样式

属性

属性	类型	读/写	描述
editable	boolean	读写	是否可编辑
autoActive	boolean	读写	自动激活编辑态
stretchable	boolean	读写	是否可以拉伸高度（仅绘制3D类型生效）
baseHeight	number	读写	离地高度
extrudedHeight	number	读写	拉伸高度

方法

• draw(type, options)

绘制。

绘制参数

参数	类型	必填	默认值	说明
type	PlotType	是	-	绘制类型
options	Object	否	{}	绘制配置
options.color	string | Color	否	rgb(0, 136, 204)	颜色
options.clampToGround	boolean	否	true	是否贴地

plotInstance.draw("Rectangle", {
  color: "rgb(0, 136, 204)",
  clampToGround: true,
});

• read(options: READ_OPT | READ_OPT[])

回显

回显参数

参数	类型	必填	默认值	说明
options	READ_OPT	是	{}	绘制配置
options.type	PlotType	是	-	绘制类型
options.position	Position	是	-	点位数据（仅当绘制类型为【点】）
options.positions	Position[]	是	-	点位数据
options.color	string | Color	否	rgb(0, 136, 204)	颜色
options.clampToGround	boolean	否	true	是否贴地

• activate(instance?: any)

激活编辑态

• deactivate(instance?: any)

取消编辑态

• clear()

清空。

• destroy()

销毁。

• on(type, callback)

绑定事件。

提示

工具实例和标绘实例均支持绑定事件，建议在标绘实例上绑定事件省去解绑的心智负担。

// 工具实例绑定事件
plotInstance.on("drawEnd", (e) => {
  console.log(`${e.type} - ${e._positions}`);
  // RECTANGLE - [{lng: -114.345703125, lat: 39.983642578125, alt: 0}, {lng: -114.345703125, lat: 40.010986328125, alt: 0}, {lng: -114.318359375, lat: 40.010986328125, alt: 0}, {lng: -114.318359375, lat: 39.983642578125, alt: 0}]
});

// 创建标绘实例
const drawInstance = plotInstance.draw(PlotType.POLYGON, {});
// 标绘实例绑定事件
plotInstance.on("drawEnd", (e) => {
  console.log(`${e.type} - ${e._positions}`);
});

事件参数

参数	说明
type	事件类型: drawEnd - 绘制结束 change - 绘制改变 changed - 绘制改变后 activated - 激活 deactivated - 失效 readEnd - 回显结束（仅工具实例支持）
callback	回调

• off(type, callback)

解除事件绑定。

示例

import { Plot, PlotType } from "@m-tech/gis-core";

// 创建标绘工具
const plotInstance = new Plot(viewer, {
  autoActive: false,
});

// 开始标绘
const drawInstance = plotInstance.draw(PlotType.POLYGON, {
  color: "rgb(0, 136, 204)",
  clampToGround: true,
});

// 在工具实例上 绑定标绘完成事件 （需手动off事件，且挂载在工具实例上，建议在标绘实例上注册事件）
plotInstance.on("drawEnd", handleCallback);
// 在标绘实例上 绑定标绘完成事件 （每个标绘实例事件隔离，且随着工具实例的clear方法自动清除）
drawInstance.on("drawEnd", handleCallback);

function handleCallback(e: any) {
  console.log(e);
}

// 解绑事件
drawInstance.off("drawEnd", handleCallback);

// 回显数据
plotInstance.read({
  type: PlotType.POLYGON,
  positions: [
    new Position(114.345703125, 39.983642578125),
    new Position(114.34570312, 39.9836425781),
    new Position(114.3457031, 39.9836425781),
  ],
});