API

Installation Clone the project from github and use following command

npm install

after all dependencies installation user needs to build the project using following command

npm run build-bundle        // Development Mode
npm run build-bundle-prod   // Production Mode

this will create a dist folder where user will get the droneView.js file

Documentation Build documentation using following commands

npm run build-doc

Usage Using Script

<script src="dist/droneView.js"></script>
<script>
const viewer = DroneView.default;
</script>

Load Viewer To load viewer you need token, Which you can get from Cesium Ion. You can simply sign in and create new token.

new viewer({mapOptions})

2D Mode Uer can use this API for switch to 2D mode

switch2DMode()

3D Mode User can use this API for switch to 3D Mode

switch3DMode()

Add 2D data Imaginary data

addImaginary(url: string)

• User can use this API to render 2D imaginary data
• User should call API with Url ( endpoint of WMS Server that server image data)
• API will return ImageryLayer

Remove 2D data Imaginary data

removeImaginaryLayer(imageLayer: ImageryLayer)

• User can use this API to remove Imagery layer by call with ImageryLayer received when added that ImageryLayer

Draw

To enable draw mode

enableDrawing(config: MeasurementConfig)

To disable draw mode

disableDrawing()

To enable edit mode

editDrawing()

• After enabling edit mode user can click on geometry which user want to edit.
• Once geometry is selected point on vertices will be added
• User can select these point to move or to delete using DELETE button
• When user will move the vertices two point will be added between neighbor points
• User can use these points to edit the the shape also
• User can hit ENTER to finish editing

To enable delete mode

deleteDrawing()

• After enabling delete mode user can click on geometry Once geometry selected points on vertices will be added
• User can select multiple points and can delete using DELETE button

To get added geometry details

onDraw(callback)

• User can use this call back function to get data when a drawing of geometry complete User will get the id, positions array & type of drawing

• If user want to add some data to geometry for future, Use this function

| DrawingConfig Parameter | Type | Description | | :-------- | :--------- | :------------------------- | | type | "LineString" | "Polygon" | "Point" | Required | | fillColor | string | Optional. Css hex color code example "#ff0000" Default : White | | lineColor | string | Optional. Css hex color code example "#ff0000" Default: white | | strokeColor | string | Optional. Css hex color code example "#ff0000" Default : Black | | opacity | number | Optional. Float Number between 0-1 Deafult : 1 | DrawingConfig Example

DrawingConfig = {
       type:"Polygon",
       fillColor:"#ff0000", 
       opacity: 0.5, 
       lineWidth:6,
       strokeColor:"#aaaa00",
       lineColor:"#00ffaa"
}

Annotation/Label

addLabel(config: LabelConfigByLatLng)

• User can add annotation using this API
• To automate user can user mouse event API and can use the result like position to add label
• API will return an ID

| LabelConfigByLatLng Parameter | Type | Description | | :-------- | :--------- | :------------------------- | | id | string | Optional Only ise when user specially want to assign ID or when user want to update previously added annotation | | fillColor | string | Optional. font color example "#ff0000" Default : White | | text | string | Required Text | | position | GlobalPosition {latitude: number,longitude: number, altitude: number} | Required | | fillColor | string | Optional. font color example "#ff0000" Default : White | | size | number | Optional. Default : 20 | | isBackground | Boolean | Optional. if user wants background color Default : true | | backgroundColor | string | Optional. Css hex color code example "#ff0000" Default : Black | | opacity | number | Optional. Float Number between 0-1 Deafult : 1 |

DrawingConfig Example

LabelConfigByLatLng = {
   id: string // User can pass previous Id if he want to update
   name: string
   fillColor: "#ff0000"
   size?: 40
   isBackground?: true
   backgroundColor?: "#00ff00" // If user set isBackground true
   opacity?: 0.8
   text: "TEXT-OF-ANNOTATION";
   position: GlobalPosition;
}