基于Cesium的指南针插件


  • 因为cesium自身没有携带指南针插件,所以需要引用其他的插件
  • 这里我采用的是:CesiumNavigation.umd
  • 作者github库:CesiumNavigation.umd
  • 由于国内访问慢,我把库引到了gitee上,便于国内访问:CesiumNavigation.umd
  • 也可以直接在这里下载使用:CesiumNavigation.umd

使用方法

  • 在html文件中引用CesiumCesium必要样式表

  • 在html文件中引用CesiumNavigation.umd.jscesium-navigation.css


<link rel="stylesheet" href="./vendors/libs/Cesium/Widgets/widgets.css" />
<link rel="stylesheet" href="./vendors/libs/cesium-navigation/cesium-navigation.css" />
<script type="text/javascript" src="./vendors/plugins/screen-shoot/canvas2image.js">script>
<script type="text/javascript" src="./vendors/libs/Cesium/Cesium.js">script>

  • 初始化viewer 调用 CesiumNavigation.umd(viewer, options)

var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: false,
    baseLayerPicker: false,
    timeline: false,
    infoBox: false,
    navigationHelpButton: false,
    fullscreenButton: false,
    animation: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false
});

//初始化指北针
let options = {}

// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
options.defaultResetView = Cesium.Rectangle.fromDegrees(112.6923215, 37.926471, 20500)
// 用于启用或禁用罗盘。true是启用罗盘,false是禁用罗盘。默认值为true。如果将选项设置为false,则罗盘将不会添加到地图中。
options.enableCompass = true
// 用于启用或禁用缩放控件。true是启用,false是禁用。默认值为true。如果将选项设置为false,则缩放控件将不会添加到地图中。
options.enableZoomControls = true
// 用于启用或禁用距离图例。true是启用,false是禁用。默认值为true。如果将选项设置为false,距离图例将不会添加到地图中。
options.enableDistanceLegend = true
// 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
options.enableCompassOuterRing = true
CesiumNavigation.umd(viewer, options)


效果

基于Cesium的指南针插件_第1张图片


你可能感兴趣的:(Cesium地图)