cesium-mixins

A collection of various Cesium mixins

selection

The selection mixin allows you to call a function and then click two points on the globe, interactively drawing a rectangle, and will return an array of all of the entities that were found to be within the boundaries of the drawn rectangle.

This currently only works with entities that have a defined singular location, so, no wall, rectangle, polygon, polyline volume, etc that have multiple points to define their shape, unless you also defined a center location on that entity using the top level position property.

Example

import {selection} from '@jdfwarrior/cesium-utils'
import {Viewer} from 'cesium'

const viewer = new Viewer('cesium')
viewer.extend(selection)

...

const selectedEntities = await viewer.select() // list of entities that were within the draw rectangle

pick location

The pickLocation mixin allows you to call a function and have a promise that will resolve the current CartographicDegrees position that the user clicked on the globe.

If the user presses Escape, the promise will resolve to undefined.

Example

import {pickLocation} from '@jdfwarrior/cesium-utils'
import {Viewer} from 'cesium'

const viewer = new Viewer('cesium')
viewer.extend(pickLocation)

...

const position = await viewer.pickLocation() // resolves to the cartographic location that the user clicks on the globe

pick entity

The pickEntity mixin allows you to call a function and have a promise that will resolve the entities that exist at the position that the user clicked on the globe.

If the user presses Escape, the promise will resolve to undefined.

Example

import {pickEntity} from '@jdfwarrior/cesium-utils'
import {Viewer} from 'cesium'

const viewer = new Viewer('cesium')
viewer.extend(pickEntity)

...

const position = await viewer.pickEntity() // resolves to the entity at the location that the user clicks on the globe
const position = await viewer.pickEntity(true) // resolves multiple entities at the location that the user clicks on the globe

cursor location

The cursor mixin creates a helper ui tool in the top left of the canvas that will show the current cursor location in cartographic degrees. You can also click on the tool and switch the units between MGRS and UTM

Example

import {cursor} from '@jdfwarrior/cesium-utils'
import {Viewer} from 'cesium'

const viewer = new Viewer('cesium')
viewer.extend(cursor)

tooltip

The tooltip mixin watches the mouse cursor position and when the user mouses over an entity, will display a small tooltip beside the entity, with its name. When the user move the mouse away from the entity, the tooltip disappears

Example

import {tooltip} from '@jdfwarrior/cesium-utils'
import {Viewer} from 'cesium'

const viewer = new Viewer('cesium')
viewer.extend(tooltip)

animation controls

The animation controls (beta) mixin switches out the dated animation controller for something that looks a little better.

Example

import {controls} from '@jdfwarrior/cesium-utils'
import {Viewer} from 'cesium'

const viewer = new Viewer('cesium')
viewer.extend(controls)

measure

The measure mixin allows the user to click and measure the distance between two points on the globe. The function call will return a Promise that resolves to an object with the CartographicDegrees location of each click and the measured distance in meters, miles, and kilometers

Example

import {measure} from '@jdfwarrior/cesium-utils'
import {Viewer} from 'cesium'

const viewer = new Viewer('cesium')
viewer.extend(measure)

viewer.measure()

draw circle

The drawcircle mixin allows the user to click to set an initial point and then move the mouse cursor and draw a circle. The radius of the circle will be shown in a ui helper at the top of the screen. The function call will return a Promise that resolves to an object with the initial center point in CartographicDegrees and the radius of the drawn circle

Example

import {drawcircle} from '@jdfwarrior/cesium-utils'
import {Viewer} from 'cesium'

const viewer = new Viewer('cesium')
viewer.extend(drawcircle)

viewer.drawcircle()

draw polygon

The drawpolygon mixin allows the user to click a group of points that define a polygon on the globe. The function call will return a Promise that resolves to an array of CartographicDegrees used to define the corners.

Example

import {drawpolygon} from '@jdfwarrior/cesium-utils'
import {Viewer} from 'cesium'

const viewer = new Viewer('cesium')
viewer.extend(drawpolygon)

viewer.drawpolygon()