Compass (Compass Control)

Create and manage compass navigation controls.

Constructor

new ge3d.control.Compass(options?: CompassOptions): Compass

Parameters (CompassOptions)

Parameter	Type	Default	Description
defaultResetView	Cesium.Cartographic | Cesium.Rectangle	-	Used to set default view control when using reset navigation to reset map view. Accepts values of Cesium.Cartographic and Cesium.Rectangle
enableCompass	Boolean | Object	true	Used to enable or disable compass. true enables compass, false disables compass. Default value is true. If option is set to false, compass will not be added to map. Can also pass object for position settings
enableZoomControls	Boolean | Object	true	Used to enable or disable zoom controls. true enables, false disables. Default value is true. If option is set to false, zoom controls will not be added to map. Can also pass object for position settings
enableDistanceLegend	Boolean	true	Used to enable or disable distance legend. true enables, false disables. Default value is true. If option is set to false, distance legend will not be added to map
enableCompassOuterRing	Boolean	true	Used to enable or disable compass outer ring. true enables, false disables. Default value is true. If option is set to false, the ring will be visible but inactive
resetTooltip	String	-	Modify reset view tooltip
zoomInTooltip	String	-	Modify zoom in button tooltip
zoomOutTooltip	String	-	Modify zoom out button tooltip
compassOuterRingSvg	String	-	Custom compass outer ring SVG
compassRotationMarkerSvg	String	-	Custom compass rotation marker SVG
compassGyroSvg	String	-	Custom compass gyro SVG
resetSvg	String	-	Custom reset button SVG
zoomInSvg	String	-	Custom zoom in button SVG
zoomOutSvg	String	-	Custom zoom out button SVG

Properties

Property	Type	Description
_map	Core	Belonging map instance
show	Boolean	Show/hide state
type	String	Control type
container	HTMLElement	Current control's DOM object
parentContainer	HTMLElement	Parent container DOM object
parentContainerId	String	Parent container DOM object's ID
uuid	String	Built-in unique identifier ID
state	State	Current object's state
isAdded	Boolean	Whether added to map
id	String | Number	Object's id identifier
enabled	Boolean	Set object's enabled/disabled state

Methods

Method	Parameters	Return Value	Description
destroy	(noDel?: boolean)	void	Destroy control

Usage Example

// Create map core
const core = new ge3d.Core("cesiumContainer", {
  scene: {
    center: { lat: 31.839441, lng: 117.153132, alt: 857.4, heading: 5, pitch: -28.3 }
  },
  baseImages: [
    {
      id: 'tdtLayerId',
      name: "Tianditu Imagery",
      type: "tdt",
      layer: "img_d",
      show: true
    }
  ],
  terrain: {
    type: "ion",
    show: true
  }
});

// Set navigation compass configuration
let options = {
  // Enable compass
  enableCompass: {
    background: '#1614146b',
  },
  enableZoomControls: false,
};

// Custom SVG icons
options.compassOuterRingSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none"><g opacity="0.16"><circle cx="50" cy="50" r="50" fill="#1F1E1D"/><circle cx="50" cy="50" r="49.5" stroke="white" stroke-opacity="0.6"/></g><circle cx="8" cy="50" r="2" fill="#E0E0E0"/><circle cx="92" cy="50" r="2" fill="#E0E0E0"/><circle cx="50" cy="92" r="2" fill="#E0E0E0"/><circle cx="50" cy="8" r="2" fill="#B39647"/></svg>'

options.compassGyroSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none"><g id="compass-inner" fill-rule="nonzero"><circle cx="25" cy="25" r="25" fill="#292928" fill-opacity="0.95"/><path d="M25 9L30 25H20L25 9Z" fill="#B39647"/><path d="M25 41L30 25H20L25 41Z" fill="#CCCCCC"/><circle cx="25" cy="25" r="2" fill="#E0E0E0"/></g></svg>'

// Create and add compass control
const Compass = new ge3d.control.Compass(options)
core.addControl(Compass)

Notes

1. Need to import CesiumNavigation.umd.js file before using compass control
2. Can pass objects to set position for enableCompass and enableZoomControls
3. Supports customizing various SVG icons to customize control appearance
4. Compass control inherits from BaseControl, has all common properties and methods of base controls