Cesium 小组件库， 主要包括罗盘、比例尺、层级控

Cesium-Widget is mainly used to load common map widgets

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