cesium-navigation-es6

cesium-navigation-es6 是一个 Cesium 插件，可向地图添加指南针、导航器（放大/缩小）和距离刻度等图形用户界面。

安装

pnpm i cesium-navigation-es6

基本使用

<template>
	<div id="cesiumContainer"></div>
</template>

<script setup lang="ts">
  import { onMounted } from "vue"
  import * as Cesium from "cesium"
  import "cesium/Build/Cesium/Widgets/widgets.css"
  import CesiumNavigation from "cesium-navigation-es6"
  import type { NavigationOptions } from "cesium-navigation-es6"

  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMGM1ODNmMi01NjgxLTRiNjYtYjEzYS0xMWZhODZlNDIyOWIiLCJpZCI6MTE2MzEzLCJpYXQiOjE3MzY2NjMwNjN9.tTeB32oDNJyNSn7iecCvMb2O5ETRw56CmX_OCSsMu34"

  onMounted(() => {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      infoBox: false
    })

    const options: NavigationOptions = {
      defaultResetView: Cesium.Cartographic.fromDegrees(116.39, 39.91, 2000),
      // defaultResetView: Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0), // 源码底层 Rectangle 类型判断有误
      enableCompass: true,
      enableZoomControls: true,
      enableDistanceLegend: true,
      enableCompassOuterRing: true,
      resetTooltip: "重置视图",
      zoomInTooltip: "放大",
      zoomOutTooltip: "缩小",
      duration: 5,
      orientation: {
        heading: Cesium.Math.toRadians(-3),
        pitch: Cesium.Math.toRadians(-90),
        roll: Cesium.Math.toRadians(0)
      }
    }

    new CesiumNavigation(viewer, options)
  })
</script>

NavigationOptions参数介绍：

参数	默认值	描述
defaultResetView	无	点击重置视图时的视角设置
enableCompass	true	启用或禁用罗盘
enableZoomControls	true	启用或禁用缩放控件
enableDistanceLegend	true	启用或禁用距离图例（放大到一定等级，左下角会显示）
enableCompassOuterRing	true	启用或禁用指南针外环
resetTooltip	重置视图	重置视图的文字提示
zoomInTooltip	放大	放大按钮的文字提示
zoomOutTooltip	缩小	缩小按钮的文字提示
duration	3秒	重置视角的动画时间
orientation	(0, -90, 0)	默认的相机视角
compassOuterRingSvg	无	罗盘外环Svg图形，只支持 Svg 字符串
compassRotationMarkerSvg	无	罗盘旋转注记Svg图形，只支持 Svg 字符串
compassGyroSvg	无	罗盘陀螺Svg图形，只支持 Svg 字符串
resetSvg	无	重置按钮Svg图形，只支持 Svg 字符串
zoomInSvg	无	放大按钮Svg图形，只支持 Svg 字符串
zoomOutSvg	无	缩小按钮Svg图形，只支持 Svg 字符串