Cesium-Widget

Cesium-Widget is mainly used to load common map widgets

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/@dvgis/cesium-widget"></script>
<link href="https://cdn.jsdelivr.net/npm/@dvgis/cesium-widget/dist/cesium.widget.min.css" rel="stylesheet">

NPM / YARN

yarn add @dvgis/cesium-widget
------------------------------
npm install @dvgis/cesium-widget

require('dvgis/cesium-widget')
import 'dvgis/cesium-widget/dist/cesium.widget.min.css'

Start

Introduce the Cesium framework before use

viewer.extend(Cesium.CesiumWidgetMixin)

Usage

Compass

viewer.compass.enabled = true

ContextMenu

viewer.contextMenu.enabled = true
// add menu item, params: label, callback, context
viewer.contextMenu.addMenu('测试',()=> { alert('测试') } ) 
// setting default menu,if setting the property, the lib default setting will be overwrite
viewer.contextMenu.DEFAULT_MENU = [{
   label:'',
   callback:(e)=>{},
   context:this
}] 

DistanceLegend

viewer.distanceLegend.enabled = true

HawkeyeMap

viewer.hawkeyeMap.enabled = true
// add imagery, params: ImageryProvider
viewer.hawkeyeMap.addImagery(new Cesium.BaiduImageryProvider())

LoadingMask

viewer.loadingMask.enabled = true

LocationBar

viewer.locationBar.enabled = true

MapSplit

viewer.mapSplit.enabled = true
// add imagery, params: ImageryProvider, ImagerySplitDirection
viewer.mapSplit.addImagery(new Cesium.BaiduImageryProvider(),Cesium.ImagerySplitDirection.RIGHT) 

Popup

// Popup default enabled is true,so no need to setting
// show popup, params: cartesian3, content
viewer.popup.showAt(Cesium.Cartesian3.fromDegrees(120.121,31.121),'test')
// hide popup
viewer.popup.hide()

Tooltip

viewer.tooltip.enabled =  true
// show tooltip, params: cartesian2, content
viewer.tooltip.showAt(new Cesium.Cartesian2(100,20),'test')
// hide tooltip
viewer.tooltip.hide()

ZoomController

viewer.zoomController.enabled = true

Tips

Layout using the default layout, according to the project can set their own css style

Thanks