1.3.6 • Published 10 months ago
@cesium-extends/drawer v1.3.6
@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 --saveUsage
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;