Polyline Drawing service for creating and editing Polylines.

Usage:

You must provide PolylineEditorService yourself:

@Component({
  selector: 'my-map',
  templateUrl: './my-map.component.html',
  providers: [PolylineEditorService],
})
export class MyMapComponent {}

<ac-map id="my-map"></ac-map>

PolylinesEditorService works together with <polylines-editor> component. Therefor you need to create <polylines-editor>for each PolylineEditorServiceAnd of course somewhere under <ac-map>

<ac-map id="my-map">
   <polylines-editor></polylines-editor>
</ac-map>
​

Thats it! just Inject the service and use the create() and edit() methods:

@Component({...})
export class MyMapComponent {
    editing$: PolylineEditorObservable;
    
    constructor(private polylineEditor: PolylinesEditorService) {}
    
    startDraw() {
         this.editing$ = this.polylineEditor.create();
         
         // Or Edit from existing points  
         const initialPos = [
              Cesium.Cartesian3.fromDegrees(20, 40),
              Cesium.Cartesian3.fromDegrees(45, 40),
              Cesium.Cartesian3.fromDegrees(30, 20)
          ];
         this.editing$ = this.polylineEditor.edit(initialPos);
    });
    }
}

Api

• create(options?: PolylineEditOptions, eventPriority?: number)

Start a creating a Polyline over the map, Returns: PolylineEditorObservable

 // Start creating polyline
 const editing$ = polylinesEditorService.create();
 this.editing$.subscribe(editResult => {
 			console.log(editResult.positions);
 	});

• edit(positions: Cartesian3[], options?: PolylineEditOptions, priority?: number)

Start editing a Polyline over the map from a given positions, Returns: PolylineEditorObservable

const editing$ = this.polylinesEditor.edit(initialPositions);

• The editor is fully customisable with PolylineEditOptions :

  • addPointEvent - Set Cesium event for adding last point, default: LEFT_CLICK

  • addPointModifier - Set Cesium event modifier for adding point, default: none

  • addLastPointEvent - Set Cesium event for adding the final point, default: DOUBLE_CLICK

  • addLastPointModifier - Set Cesium event modifier for adding last point, default: none

  • removePointEvent - Set Cesium event for removing a point, default: RIGHT_CLICK

    • In edit mode only

  • removePointModifier - Set Cesium event modifier for removing a point, default: none

    • In edit mode only

  • dragPointModifier - Set Cesium event modifier for draging a point, default: LEFT_DRAG

    • In edit mode only

  • dragPointModifier - Set Cesium event modifier for removing a point, default: none

    • In edit mode only

  • pointProps - Point customisation properties

  • polylineProps - Polyline customisation properties

  • allowDrag - allow shape drag, default: false

    • In edit mode only

  • pickConfiguration - configure pick behaviour with: pick height and width and drill pick limit

  • maximumNumberOfPoints - after maximum point reached change to edit mode

  • clampHeightTo3D - if the polyline should clamp to 3D entities according to clampHeightTo3DOptions

  • clampHeightTo3DOptions - Configuration for clamping to 3D

    • clampToTerrain - if to clamp to terrain. default: false - clamps to 3dTiles

    • clampMostDetailed - after editing the shape the positions height will be fixed with clampToHeight() for 3dTiles and sampleTerrain() for terrain, default: true

    • clampToHeightPickWidth - clampToHeight() width in meters.

  • setLabelsRenderFn - receives a callback that is called every time the shape is redrawn (except when the shape is being dragged). The callback is called with the last shape state and with an array of the current labels.

    • The callback should return LabelProps[]

Example

​

​