qe-set-navigation

这个组件主要用于切换罗盘的显示隐藏。

---

实例

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <button @click="showDistance()" style="height: 30px;">显示</button>
      <button @click="hideDistance()" style="height: 30px;">隐藏比例尺</button>
      <button @click="hideCompass()" style="height: 30px;">隐藏罗盘</button>
      <button @click="hideZoom()" style="height: 30px;">隐藏缩放</button>
    </div>
    <qe-viewer
      style="height: 90%;"
      :imagery-type="'TMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-set-navigation ref="sn" />
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeSetNavigation } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'

export default {
  components: {
    QeViewer, 
    QeSetNavigation
  },
  data () {
    return {
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      navigation: {
        enableCompass: true,
        enableZoomControls: true,
        enableDistanceLegend: true,
        enableCompassOuterRing: false
      }
    };
  },
  methods: {
    hideDistance() {
      this.$refs.sn.setNavigation({
        enableCompass: true,
        enableZoomControls: true,
        enableDistanceLegend: false,
        enableCompassOuterRing: true
      })
    },
    showDistance() {
      this.$refs.sn.setNavigation({
        enableCompass: true,
        enableZoomControls: true,
        enableDistanceLegend: true,
        enableCompassOuterRing: true
      })
    },
    hideCompass() {
      this.$refs.sn.setNavigation({
        enableCompass: false,
        enableZoomControls: true,
        enableDistanceLegend: true,
        enableCompassOuterRing: true
      })
    },
    hideZoom() {
      this.$refs.sn.setNavigation({
        enableCompass: true,
        enableZoomControls: false,
        enableDistanceLegend: true,
        enableCompassOuterRing: true
      })
    },
    readyHandler(e) {
      // e.removeDefaultLayers()
    },
    wheelHandler() {
      setTimeout(() => {
        // 组件版本没有放出viewer移动的监听，wheel监听的是鼠标滚轮事件的开始，所以需要延迟一点
        console.log(this.$refs.sn.getDistance())
      }, 1000)
    }
  }
}
</script>