@cesium-extends/drawer

A drawing tool library based on Cesium, supporting commonly used shapes such as point, line, polygon, circle, etc. 中文 Readme

Installing

Using npm:

npm install @cesium-extends/drawer --save

Usage

import Drawer from "@cesium-extends/drawer";
import Cesium from "cesium";

// Initialize the viewer
const viewer = new Cesium.Viewer("cesiumContainer");

// Create a Drawer instance
const drawer = new Drawer(viewer);

// Start drawing
drawer.start({
  type: "POLYGON",
  finalOptions: {
    material: Cesium.Color.RED.withAlpha(0.5),
  },
});

DrawOption

Here are the configurable options of options:

Property	Type	Default	Description
terrain	boolean	false	Whether to enable terrain mode, which requires the browser to support terrain selection.
model	boolean	false	Whether to enable draw point on model.
operateType	{START?: EventType, MOVING?: EventType, CANCEL?: EventType, END?: EventType}	{START: LEFT_CLICK, MOVING: MOUSE_MOVE, CANCEL: RIGHT_CLICK, END: LEFT_DOUBLE_CLICK}	Operation types.
dynamicGraphicsOptions	{POINT: PointGraphics.ConstructorOptions; POLYLINE: PolylineGraphics.ConstructorOptions; POLYGON: PolygonGraphics.ConstructorOptions; CIRCLE: EllipseGraphics.ConstructorOptions; RECTANGLE: RectangleGraphics.ConstructorOptions;}	-	Dynamic graphics configuration when no shape has been confirmed yet.
action	(action: EventType, move: EventArgs) => void	-	Mouse event callback.
sameStyle	boolean	true	Whether to use the same style when drawing multiple shapes.
tips	{init?: string or Element, start?: string or Element, end?: string or Element}	{init: 'Click to draw', start: 'LeftClick to add a point, rightClick remove point, doubleClick end drawing', end: ''}	Custom mouse movement tips during editing.

StartOption

Here are the configurable options of config:

Property	Type	Default	Description
type	'POLYGON' | 'POLYLINE' | 'POINT' | 'CIRCLE' | 'RECTANGLE'	-	The type of shape to draw.
once	boolean	undefined	Whether to draw only once.
oneInstance	boolean	false	Whether to use singleton mode.
finalOptions	object	{}	Entity options for drawing.
dynamicOptions	object	{}	Dynamic graphics configuration when no shape has been confirmed yet.
onPointsChange	(points: Cartesian3[]) => void	-	Callback function for changes in points.
onEnd	(entity: Entity, positions: Cartesian3[]) => void	-	Callback function when drawing is completed.

Instance Methods

Method	Description
start(config: StartOption, overrideFunc?: OverrideEntityFunc)	Start drawing.
reset()	Reset the status.
pause()	Pause drawing.
destroy()	Destroy the Drawer instance.

Type Definitions

DrawOption

type DrawOption = {
  terrain: boolean;
  operateType: OperationType;
  dynamicGraphicsOptions: {
    POINT: PointGraphics.ConstructorOptions;
    POLYLINE: PolylineGraphics.ConstructorOptions;
    POLYGON: PolygonGraphics.ConstructorOptions;
    CIRCLE: EllipseGraphics.ConstructorOptions;
    RECTANGLE: RectangleGraphics.ConstructorOptions;
  };
  action?: ActionCallback;
  sameStyle: boolean;
  tips: {
    init?: string | Element;
    start?: string | Element;
    end?: string | Element;
  };
};

StartOption

type StartOption = {
  type: "POLYGON" | "POLYLINE" | "POINT" | "CIRCLE" | "RECTANGLE";
  once?: boolean;
  oneInstance?: boolean;
  finalOptions?: object;
  dynamicOptions?: object;
  onPointsChange?: BasicGraphicesOptions["onPointsChange"];
  onEnd?: (entity: Entity, positions: Cartesian3[]) => void;
};

Status

type Status = "INIT" | "START" | "PAUSE" | "DESTROY";

OperationType

type OperationType = {
  START?: EventType;
  MOVING?: EventType;
  CANCEL?: EventType;
  END?: EventType;
};

OverrideEntityFunc

type OverrideEntityFunc = (
  this: Drawer,
  action: EventType,
  entity: Entity,
) => Entity | void;

ActionCallback

type ActionCallback = (action: EventType, move: EventArgs) => void;