# 导航罗盘

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

# 示例

# 加载导航罗盘部件

# 预览

收起

<template>
  <div class="viewer">
    <vc-viewer :timeline="timeline" @ready="ready">
      <vc-compass style="left: 10px; top: 60px; position: absolute; width: 100px; height: 80px"></vc-compass>
      <vc-compass ref="compass" style="right: 50px; top: 20px; position: absolute; width: 100px; height: 80px">
        <template v-slot:compass="{ heading }">
          <div :style="{ width: '100%', height: '100%', transform: 'rotate(-' + heading + 'rad)' }">
            <svg style="width: 100%; height: 100%; display: block" viewBox="0 0 162 162">
              <desc>Created with Sketch.</desc>
              <defs></defs>
              <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
                <g id="compass-outer" fill-rule="nonzero">
                  <path
                    d="M80.8410544,161.682109 C36.1937731,161.682109 0,125.488336 0,80.8410544 C0,36.1937731 36.1937731,0 80.8410544,0 C125.488336,0 161.682109,36.1937731 161.682109,80.8410544 C161.682109,125.488336 125.488336,161.682109 80.8410544,161.682109 Z M81.1836011,134.620909 C110.696211,134.620909 134.620909,110.696211 134.620909,81.1836011 C134.620909,51.6709916 110.696211,27.7462941 81.1836011,27.7462941 C51.6709916,27.7462941 27.7462941,51.6709916 27.7462941,81.1836011 C27.7462941,110.696211 51.6709916,134.620909 81.1836011,134.620909 Z"
                    id="Oval-108"
                  ></path>
                  <circle id="Oval-74" fill="#FFFFFF" cx="129.493683" cy="127.952092" r="1.54159147"></circle>
                  <circle id="Oval-74-Copy-3" fill="#FFFFFF" cx="129.493683" cy="35.4566038" r="1.54159147"></circle>
                  <circle id="Oval-74-Copy-5" fill="#FFFFFF" cx="30.8318294" cy="127.952092" r="1.54159147"></circle>
                  <circle id="Oval-74-Copy-4" fill="#FFFFFF" cx="30.8318294" cy="35.4566038" r="1.54159147"></circle>
                  <polygon
                    id="N"
                    fill="#FFFFFF"
                    points="84.9318072 23.1238721 84.9318072 13.1321362 82.5623385 13.1321362 82.5623385 19.2984646 77.951866 13.1321362 75.7108625 13.1321362 75.7108625 23.1238721 78.0946053 23.1238721 78.0946053 16.9718176 82.6908037 23.1238721"
                  ></polygon>
                  <polygon
                    id="Line"
                    fill="#FFFFFF"
                    points="143.368007 82.1093476 152.617555 82.1093476 152.617555 81.2993476 143.368007 81.2993476"
                  ></polygon>
                  <polygon
                    id="Line-Copy-8"
                    fill="#FFFFFF"
                    points="9.24954884 82.1093476 18.4990976 82.1093476 18.4990976 81.2993476 9.24954884 81.2993476"
                  ></polygon>
                  <polygon
                    id="Line"
                    fill="#FFFFFF"
                    points="81.2993476 143.368007 81.2993476 152.617555 82.1093476 152.617555 82.1093476 143.368007"
                  ></polygon>
                </g>
              </g>
            </svg>
          </div>
        </template>
      </vc-compass>
      <!-- <vc-location-bar style='right:10px;bottom:70px;position:absolute;z-index:1'></vc-location-bar> -->
      <vc-control :options="controlOptions" style="right: 156px; top: 95px; position: absolute"></vc-control>
      <vc-zoomControl style="right: 66px; top: 100px; position: absolute; z-index: 1">
        <template v-slot:zoomIn>
          <span style="color: #fff"> 大</span>
        </template>
        <template v-slot:zoomOut>
          <span style="color: #fff"> 小</span>
        </template>
        <template v-slot:refresh>
          <span style="color: #fff"> 刷</span>
        </template>
      </vc-zoomControl>
      <vc-view-print style="right: 64px; top: 168px; position: absolute; z-index: 1">
        <span>分</span>
      </vc-view-print>
      <vc-my-location style="right: 64px; top: 205px; position: absolute; z-index: 1">
        <span>定</span>
      </vc-my-location>
      <vc-zoomControl style="right: 126px; top: 100px; position: absolute; z-index: 1"></vc-zoomControl>
      <vc-view-print style="right: 124px; top: 168px; position: absolute; z-index: 1"></vc-view-print>
      <vc-my-location style="right: 124px; top: 205px; position: absolute; z-index: 1"></vc-my-location>
      <vc-legend-control style="right: 10px; bottom: 70px; position: absolute; z-index: 1">
        <template v-slot:location="{ locationInfo }">
          {{ locationInfo.cameraHeight }}
          {{ locationInfo.mouseCoords.longitude }}
          {{ locationInfo.mouseCoords.latitude }}
        </template>
        <template v-slot:legend="{ legnedData }">
          {{ legnedData.distanceLabel }}
          {{ legnedData.barWidth }}
          {{ legnedData.distance }}
        </template>
      </vc-legend-control>
      <vc-navigation :options="options"></vc-navigation>
      <vc-layer-imagery>
        <vc-provider-imagery-openstreetmap></vc-provider-imagery-openstreetmap>
      </vc-layer-imagery>
    </vc-viewer>
    <div class="demo-tool auto-width">
      <span>罗盘部件
      <el-switch v-model="options.enableCompass"></el-switch></span>
      <span>缩放部件
      <el-switch v-model="options.enableZoomControl"></el-switch></span>
      <span>打印部件
      <el-switch v-model="options.enablePrintView"></el-switch></span>
      <span>罗盘外环是否可用
      <el-switch v-model="options.enableCompassOuterRing"></el-switch></span><br/>
      <span>比例尺部件
      <el-switch v-model="options.enableDistanceLegend"></el-switch></span>
      <span>位置信息部件
      <el-switch v-model="options.enableLocationBar"></el-switch></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeline: true,
      controlOptions: {
        enableZoomControl: true,
        enablePrintView: true,
        enableMyLocation: true
      },
      options: {
        enableCompass: true,
        enableZoomControl: true,
        enableDistanceLegend: true,
        enableLocationBar: true,
        enableCompassOuterRing: true,
        enablePrintView: true,
        enableMyLocation: {
          amap: {
            key: '42d22e6ed83f077bc28b7864718726de'
          }
        }
      }
    }
  },
  computed: {},
  methods: {
    ready(cesiumInstance) {
      this.cesiumInstance = cesiumInstance
      const { Cesium, viewer } = this.cesiumInstance
      var scene = viewer.scene
      scene.debugShowFramesPerSecond = true
    },
    legendChanged(e) {
      console.log(e)
    },
    changeHeading(heading) {
      this.heading = heading
    }
  }
}
</script>

# 属性

属性名	类型	默认值	描述
enableCompass	Boolean	`true`	`optional` 指定是否启用罗盘部件。
enableZoomControl	Boolean\|Object	`true`	`optional` 指定是否启用缩放部件。
enableZoomControl.zoomAmount	Number	`2`	`optional` 缩放控件缩放系数。
enableZoomControl.defaultResetView	Object		`optional` 重置相机参数。
enableZoomControl.overrideCamera	Boolean	`false`	`optional` 缩放控件默认相机位置参数是否覆盖 vc-viewer 上的相机参数。
enableDistanceLegend	Boolean	`true`	`optional` 指定是否启用距离比例尺部件。
enableCompassOuterRing	Boolean	`true`	`optional` 指定罗盘部件是否可用。
enableLocationBar	Boolean\|Object	`true`	`optional` 指定位置信息部件是否可用。
enablePrintView	Boolean\|Object	`true`	`optional` 指定打印部件是否可用。

# 事件

事件名	参数	描述
ready	{Cesium, viewer}	该组件渲染完毕时触发，返回 Cesium 类, viewer 实例。
legendChanged	number	比例尺改变时触发，返回比例尺数值，单位米。
geolocation	Object	定位成功时触发，返回定位结果。

← 导航-supermap 影像图层 →