A drawing tool library based on Cesium, supporting commonly used shapes such as point, line, polygon, circle, etc. 中文 Readme
Using npm:
npm install @nsc-earth-2/drawer --save
import Drawer from "@nsc-earth-2/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),
},
});
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. |
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. |
Method | Description |
---|---|
start(config: StartOption, overrideFunc?: OverrideEntityFunc) |
Start drawing. |
reset() |
Reset the status. |
pause() |
Pause drawing. |
destroy() |
Destroy the Drawer instance. |
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;
};
};
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;
};
type Status = "INIT" | "START" | "PAUSE" | "DESTROY";
type OperationType = {
START?: EventType;
MOVING?: EventType;
CANCEL?: EventType;
END?: EventType;
};
type OverrideEntityFunc = (
this: Drawer,
action: EventType,
entity: Entity
) => Entity | void;
type ActionCallback = (action: EventType, move: EventArgs) => void;