@nsc-earth-v2/drawer NPM

@nsc-earth-v2/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 @nsc-earth-v2/drawer --save

Usage

import Drawer from "@nsc-earth-v2/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;

cesium drawer

@nsc-earth-v2/subscriber @nsc-earth-v2/tooltip

nsc-earth-v2 @nsc-earth-v2/measure

1.3.1

1 year ago