《学习笔记》VueCesium第三篇：VcNavigation

前两篇讲了基础组件vc-viewer，和图层组件vc-layerImagery,那这篇该讲导航组件vc-navigation了。 导航组件，包括罗盘、缩放、其他悬浮按钮，位置和距离比例尺工具栏控件。由 vc-compass、vc-zoom-control、vc-print、vc-mylocation、vc-status-bar、vc-distance-legend 组合而成。

组件库支持自定义样式，右侧为默认样式。

属性	类型	描述
position	string	组件位置描述:top-right/top-left/bottom-right/bottom-left/top/right/bottom/left
offset	[number, number]	指定导航组件基于位置的偏移量
compassOpts	VcCompassProps/false	指定罗盘控件参数，false 即不显示。
zoomOpts	VcZoomControlProps/false	指定缩放控件参数，false 即不显示。。
printOpts	VcPrintProps/false	指定打印控件参数，false 即不显示。
locationOpts	VcMyLocationProps/false	指定定位控件参数，false 即不显示。

更多属性请参考官网:组件 | vc-navigation ，基本类型：组件 | 基本类型

示例

本示例演示了导航组件的罗盘vc-compass、缩放控件vc-zoom-control、打印控件vc-print

<template>
  <el-row ref="viewerContainer" class="demo-viewer">
    <vc-viewer
      @ready="ready"
      :camera="{
        position: [102.8, 30.57, 6000],
        heading: 162,
        pitch: -18.25,
        roll: 0.05,
      }"
    >
      <vc-navigation ref="navigation" :offset="[35, 35]"></vc-navigation>
      <vc-terrain-provider-tianditu
        ref="provider"
        token="436ce7e50d27eede2f2929307e6b33c0"
      ></vc-terrain-provider-tianditu>
      <vc-layer-imagery>
        <vc-imagery-provider-tianditu
          map-style="img_c"
          token="436ce7e50d27eede2f2929307e6b33c0"
        ></vc-imagery-provider-tianditu>
      </vc-layer-imagery>
      <vc-layer-imagery>
        <vc-imagery-provider-tianditu
          map-style="cva_c"
          token="436ce7e50d27eede2f2929307e6b33c0"
        ></vc-imagery-provider-tianditu>
      </vc-layer-imagery>
    </vc-viewer>
    <div class="demo-toolbar">
      <el-row>
        <el-button type="danger" round @click="unload">销毁</el-button>
        <el-button type="danger" round @click="load">加载</el-button>
        <el-button type="danger" round @click="reload">重载</el-button>
      </el-row>
    </div>
  </el-row>
</template>

<script>
import { ref, getCurrentInstance } from "vue";
export default {
  setup() {
    // state
    const instance = getCurrentInstance();
    const provider = ref(null);
    let viewer = undefined;
    // methods
    const unload = () => {
      provider.value.unload();
    };
    const reload = () => {
      provider.value.reload();
    };
    const load = () => {
      provider.value.load();
    };
    const ready = ({ Cesium, viewer }) => {};
    return {
      ready,
      provider,
      unload,
      reload,
      load,
    };
  },
};
</script>

<style></style>