绘制工具

快速上手

import type { DrawerType } from "cesium2s"

//实例化绘制工具(需传入viewer实例)
drawer = new Drawer(fair.viewer)

//更改绘制类型(默认为point)
drawer.type = 'polygon'

//开始绘制
drawer.start()

💡 操作提示

开始绘制后，左键点击添加要素顶点，右键点击结束当前要素绘制

结束当前要素绘制后可以继续绘制下一个要素

撤销操作：支持 Ctrl + Z 撤销上一步绘制；若当前要素为空，则撤销上一个已绘制的要素

效果示例：

支持绘制的类型

export type DrawerType =
  | 'point'         // 点
  | 'polyline'      // 折线
  | 'polygon'       // 多边形
  | 'spline'        // 样条曲线
  | 'bezier'        // 贝塞尔曲线
  | 'rectangle'     // 矩形
  | 'arrow'         // 箭头

样式配置

实例化 Drawer 时可以传入样式配置，用于控制不同图形类型的绘制样式：

drawer = new Drawer(fair.viewer, {
          point: {
            //点颜色为红色，大小10
            color: Cesium.Color.RED, 
            pixelSize: 10,
          },
          polyline: {
            //线发光材质，颜色为青色，宽度15
            material: new Cesium.PolylineGlowMaterialProperty({ 
              color: Cesium.Color.CYAN, 
              glowPower: 0.2,
            }), 
            
            width: 15,
          },
          polygon: {
            //多边形颜色为黄色，透明度0.6
            material: Cesium.Color.YELLOW.withAlpha(0.6), 
          },
          rectangle: {
            //矩形使用图片材质
            material: new Cesium.ImageMaterialProperty({  
              image: "/imgs/fluid.jpg", 
            }),
          },
          arrow: {
            //箭头颜色为蓝色，透明度0.8
            material: Cesium.Color.BLUE.withAlpha(0.8), 
          },
        })

绘制结果展示：

获取绘制结果

通过给 onClose 绑定回调函数，可以在每次完成一个要素绘制时获取绘制结果：

drawer.onClose = (e: Cesium.Entity) => {
      console.log("绘制了一个要素", e)
}

结束绘制

调用 end 方法可主动结束绘制：

drawer.end()

单次绘制

通过在 onClose 回调中调用 end 方法可实现单次绘制

drawer.onClose = (e: Cesium.Entity) => {
    console.log("绘制了一个要素", e)
    drawer.end();
}

清空绘制的要素

调用 clear 方法可清空所有已绘制的要素：

drawer.clear()

销毁实例

通过 destroy 方法销毁 Drawer 实例：

drawer.destroy()