Enables the user to draw on the map.

// example of Giro3D instantiation
const instance = new Instance(viewerDiv, options)
const map = new Map('myMap', { extent });
instance.add(map);

// Add our tool
const drawTool = new DrawTool(instance);

// Start and wait for result
drawTool.startAsAPromise()
.then((polygon) => {
// Use generated polygon as GeoJSON
})
// Or use events
drawTool.addEventListener('end', (polygon) => {
// Use generated polygon as GeoJSON
})
drawTool.start();

Hierarchy

Constructors

  • Constructs a DrawTool

    Parameters

    Returns DrawTool

Properties

_canAddNewPoint: boolean
_canSplice: boolean
_coordinates: [number, number, number][]
_draggedPointIndex: number
_drawObject: Drawing
_drawObjectOptions: DrawingOptions
_edges: Group<Object3DEventMap>
_enableAddPointsOnEdit: boolean
_enableDragging: boolean
_enableSplicing: boolean
_endDrawingOnRightClick: boolean
_eventHandlers: EventListenersMap
_geometryType: DrawingGeometryType
_instance: Instance
_internalState: DrawToolInternalState
_maxPoints: number
_minPoints: number
_nextPoint3D: CSS2DObject
_nextPointCoordinates: [number, number, number]
_oldState: DrawToolInternalState
_point2DFactory: DrawingPoint2DFactory
_pointsGroup: Group<Object3DEventMap>
_realMaxPoints: number
_realMinPoints: number
_reject: ((reason?) => void)

Type declaration

    • (reason?): void
    • Parameters

      • Optional reason: any

      Returns void

_resolve: ((value) => void)

Type declaration

    • (value): void
    • Parameters

      • value: Geometry

      Returns void

_splicingHitTolerance: number
_splicingPoint3D: CSS2DObject
_splicingPointCoordinates: Vector3
_splicingPointEdge: number

Accessors

  • get drawObject(): Drawing
  • Object currently being drawn

    Returns Drawing

  • get mode(): DrawToolMode
  • Mode of the tool (null if inactive)

    Returns DrawToolMode

Methods

  • Cleans state so we can safely call start/edit again on this object.

    Returns void

  • Removes event handlers This is used when pausing or ending drawing.

    Returns void

  • Creates event handlers for the interactions. This is used when starting or resuming drawing.

    Returns void

  • Default picking callback.

    Parameters

    • evt: MouseEvent

      Mouse event

    Returns GetPointAtResult

    Object

  • Default Point2D factory for creating labels for editing edges.

    Parameters

    • text: string

      Label to display

    Returns HTMLElement

    DOM Element to attach to the CSS2DObject

  • Triggers end after the event loop has been processed. When deferring ending, any click events on the canvas will be handled before ending.

    Let's take an example where the app:

    • listens to the end event and creates a GeometryObject based on the geometry,
    • listens to click events on the canvas to check for GeometryObject and edit them.

    Without deferring, the following would happen:

    1. this.end(), triggering end event
    2. end event is processed by app, creating the shape
    3. click event on canvas is processed by the app (because we're still processing that event!)
    4. the app edits the newly created geometry 💩

    With deferring:

    1. this.end() is queued in event loop
    2. click event on canvas is processed by the app
    3. this.end() is called, triggering end event
    4. end event is processed by app, creating the shape

    Returns void

  • Sends edit event and cleans up stuff required after dragging a point.

    Returns boolean

    true if point was really dragged or false if it was a noop.

  • Hides the next point, so it's simply not visible

    Returns void

  • Removes the point for splicing (if exists)

    Returns void

  • Initializes common stuff when starting drawing for both editing & creating.

    Parameters

    • mode: DrawToolMode

      Mode to start

    • Optional geometryType: DrawingGeometryType

      Geometry type to create (if null, geometry must be provided)

    • Optional geometry: Geometry | Drawing

      Geometry to edit

    Returns void

  • Generic mousedown handler

    Parameters

    • evt: MouseEvent

      Mouse event

    Returns void

  • Generic mousemove handler

    Parameters

    • evt: MouseEvent

      Mouse event

    Returns void

  • Generic mouseup handler

    Parameters

    • evt: MouseEvent

      Mouse event

    Returns void

  • Restores from a temporary state. If the state has changed since _pushState, will be ignored.

    Parameters

    • state: DrawToolInternalState

      State

    Returns void

  • Pushes a new temporary state

    Parameters

    • state: DrawToolInternalState

      State

    Returns void

  • Removes drawings: drawn shape & labels

    Returns void

  • Restores default state depending on mode & geometry

    Returns void

  • Enables or disables pointer events for all CSS2D points. This is useful to disable for performance while dragging for instance.

    Parameters

    • enable: boolean

      Enable or disable

    Returns void

  • Updates internal state and handles display of points and their events

    Parameters

    • state: DrawToolInternalState

      New state

    Returns void

  • Splices at the current position and starts dragging the new point

    Returns void

  • Sets up stuff required for dragging a point. Could be on mousedown (if enableDragging) or click (if !enableDragging)!

    Parameters

    • idx: number

      Index of the point

    Returns void

  • Tries to add a new point at the cursor, at the end of the geometry

    Parameters

    • evt: MouseEvent

      Mouse event

    Returns boolean

    true if a point is added, or false if no point available under the mouse

  • Tries to end the drawing

    Parameters

    • evt: MouseEvent

      Mouse event

    Returns boolean

    true if the drawing was ended, or false otherwise (e.g. not enough points for polygon)

  • Tries to move a selected point

    Parameters

    • evt: MouseEvent

      Mouse event

    Returns boolean

    true if a point is updated, false otherwise

  • Tries to show the next point at the cursor

    Parameters

    • evt: MouseEvent

      Mouse event

    Returns boolean

    true if there is a point, or false otherwise

  • Tries to show a point for splicing an edge

    Parameters

    • evt: MouseEvent

      Mouse event

    Returns boolean

    true if there is a point, or false otherwise

  • Updates edges for splicing.

    Returns void

  • Updates canSplice & canAddNewPoint based on mode, geometry and number of points.

    Returns void

  • Displays the next point to add

    Parameters

    • coords: Vector3

      Position

    Returns void

  • Updates rendering of 3D points. This is useful if we change the number of points, so we keep a simple logic for managing ordering & event handlers.

    Instead of having to deal with reordering all the other points & deal with event handlers, let's clean & recreate everything. As long as we don't have 10000 points in our geometry, we should be OK.

    Returns void

  • Display a point for splicing along an edge

    Parameters

    • edgeIndex: number

      Edge index

    • coords: Vector3

      Position of the point

    Returns void

  • Adds a listener to an event type.

    Type Parameters

    Parameters

    • type: T

      The type of event to listen to.

    • listener: EventListener<DrawToolEventMap[T], T, DrawTool>

      The function that gets called when the event is fired.

    Returns void

  • Type Parameters

    • T extends string

    Parameters

    • type: T
    • listener: EventListener<{}, T, DrawTool>

    Returns void

  • Adds a new point at the end of the geometry. If max point is reached, ends the drawing.

    Fires add event. Fires drawing event. Fires end event if maxPoints reached.

    Parameters

    • coords: Vector3

      Position of the new point

    Returns void

  • Continues a paused drawing.

    Returns void

  • Deletes a point.

    Fires delete event. Fires drawing event.

    Parameters

    • pointIdx: number

      Point index to delete

    Returns void

  • Fire an event type.

    Type Parameters

    Parameters

    Returns void

  • Disposes of the object

    Returns void

  • Edits a GeoJSON geometry.

    Fires start event at start.

    Parameters

    • geometry: Geometry | Drawing

      GeoJSON geometry or Drawing instance to edit. If passing a Drawing, this tool takes full ownership over it, and will destroy it when done.

    Returns void

  • Edits a GeoJSON geometry and returns a promise.

    Fires start event at start.

    Parameters

    • geometry: Geometry | Drawing

      GeoJSON geometry or Drawing instance to edit. If passing a Drawing, this tool takes full ownership over it, and will destroy it when done.

    Returns Promise<Geometry>

    Promise resolving to the GeoJSON geometry drawn

  • Ends the current drawing (active or paused).

    Fires end event.

    Returns Geometry

    GeoJSON geometry drawn

  • Checks if listener is added to an event type.

    Type Parameters

    Parameters

    • type: T

      The type of event to listen to.

    • listener: EventListener<DrawToolEventMap[T], T, DrawTool>

      The function that gets called when the event is fired.

    Returns boolean

  • Type Parameters

    • T extends string

    Parameters

    • type: T
    • listener: EventListener<{}, T, DrawTool>

    Returns boolean

  • Inserts a new point at an index. Note: it does not end the drawing if max point is reached.

    Fires add event. Fires drawing event.

    Parameters

    • pointIdx: number

      Point index

    • coords: Vector3

      Position for the new point

    Returns void

  • Pauses current drawing so click events are not captured. This is useful when the user is currently interacting with the camera.

    Returns void

  • Removes a listener from an event type.

    Type Parameters

    Parameters

    • type: T

      The type of the listener that gets removed.

    • listener: EventListener<DrawToolEventMap[T], T, DrawTool>

      The listener function that gets removed.

    Returns void

  • Type Parameters

    • T extends string

    Parameters

    • type: T
    • listener: EventListener<{}, T, DrawTool>

    Returns void

  • Aborts current drawing (active or paused).

    Fires abort event.

    Returns void

  • Utility function to set options.

    Parameters

    Returns DrawTool

  • Starts a new drawing.

    Fires start event at start.

    Parameters

    Returns void

  • Starts a new drawing and returns a promise.

    Fires start event at start.

    Parameters

    Returns Promise<Geometry>

    Promise resolving to the GeoJSON geometry drawn

  • Gets the current coordinates of the shape being drawn. In case of polygons, ensures the shape is closed.

    Returns null if the state is READY or if the shape is empty.

    Returns [number, number, number][]

    Array of 3D coordinates

  • Gets the current GeoJSON geometry corresponding to the shape being drawn. In case of polygons, ensures the shape is closed.

    Returns null if the state is READY or if the shape is empty.

    Returns Geometry

    GeoJSON geometry object

  • Updates rendering

    Returns void

  • Updates position of a point.

    Fires edit event. Fires drawing event.

    Parameters

    • pointIdx: number

      Point index to update

    • coords: Vector3

      New position of the point

    Returns void

Generated using TypeDoc