导航罗盘

vc-navigation-sm 组件用于加载导航罗盘部件——超图样式。注意： 使用此组件需要引入 import 'vue-cesium/lib/vc-navigation-sm.css'，需要css-loader。

示例

加载导航罗盘部件

预览

罗盘部件

缩放部件

罗盘外环是否可用

收起

<template>
  <div class="viewer">
    <vc-viewer @ready="ready">
      <vc-navigation-sm ref="navigation" :options="options"></vc-navigation-sm>
    </vc-viewer>
    <div class="demo-tool auto-width">
      <span>罗盘部件</span>
      <el-switch v-model="options.enableCompass"></el-switch>
      <span>缩放部件</span>
      <el-switch v-model="options.enableZoomControls"></el-switch>
      <span>罗盘外环是否可用</span>
      <el-switch v-model="options.enableCompassOuterRing"></el-switch>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: {
          // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
          enableCompass: true,
          // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
          enableZoomControls: true,
          // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
          enableCompassOuterRing: true
        }
      }
    },
    methods: {
      ready(cesiumInstance) {
        this.cesiumInstance = cesiumInstance
        const { Cesium, viewer } = this.cesiumInstance
      }
    }
  }
</script>

属性

属性名	类型	默认值	描述
defaultResetView	Object	中国	optional 指定重置按钮的位置。结构：{lng: number, lat: number, height: number} or {west: number,south: number,east: number,north: number}
enableCompass	Boolean	true	optional 指定是否启用罗盘部件。
enableZoomControls	Boolean	true	optional 指定是否启用缩放部件。
enableDistanceLegend	Boolean	true	optional 指定是否启用距离比例尺部件。
enableCompassOuterRing	Boolean	true	optional 指定罗盘部件是否可用。

---

事件

事件名	参数	描述
ready	{Cesium, viewer}	该组件渲染完毕时触发，返回 Cesium 类, viewer 实例。