键盘控制相机交互

方法	描述	单位：米
moveForward	向前移动
moveBackward	向后移动
moveLeft	向左移动
moveRight	向右移动
moveUp	向上移动
moveDown	向下移动
----------	-----	------
lookLeft	向左旋转
lookRight	向右旋转
lookUp	向上旋转
lookDown	向下旋转
----------	-----	------
twistLeft	向左倾斜
twistRight	向右倾斜

展开代码

<template>
  <div ref="cesiumContainer" class="container"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
const cesiumContainer = ref(null);
let viewer = null;

// 天地图TOKEN
const token = "05be06461004055923091de7f3e51aa6";

onMounted(() => {
  // 初始化Viewer
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    geocoder: false, // 关闭地理编码搜索
    homeButton: false, // 关闭主页按钮
    sceneModePicker: false, // 关闭场景模式选择器
    baseLayerPicker: false, // 关闭底图选择器
    navigationHelpButton: false, // 关闭导航帮助
    animation: false, // 关闭动画控件
    timeline: false, // 关闭时间轴
    fullscreenButton: false, // 关闭全屏按钮
    baseLayer: false, // 关闭默认地图
  });
  // 清空logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  initMap();

  // 定位到北京
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.404, 39.915, 1000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0.0,
    },
  });

  // 键盘控制相机交互
  document.addEventListener("keydown", function (event) {
    const camera = viewer.camera;
    const distance = 100; // 每次移动的距离，单位：米
    switch (event.key) {
      case "ArrowUp": // 上按键
        camera.moveForward(distance); // 向前移动
        break;
      case "ArrowDown": // 下按键
        camera.moveBackward(distance); // 向后移动
        break;
      case "ArrowLeft": // 左按键
        camera.moveLeft(distance); // 向左移动
        break;
      case "ArrowRight": // 右按键
        camera.moveRight(distance); // 向右移动
        break;
      case "w": // w按键
        camera.lookUp(distance); // 向上旋转
        break;
      case "s": // s按键
        camera.lookDown(distance); // 向下旋转
        break;
      case "a": // a按键
        camera.lookLeft(distance); // 向左旋转
        break;
      case "d": // d按键
        camera.lookRight(distance); // 向右旋转
        break;
      case "q": // q按键
        camera.twistLeft(distance); // 向左倾斜
        break;
      case "e": // e按键
        camera.twistRight(distance); // 向右倾斜
        break;
      default:
        break;
    }
  });
});

// 加载天地图
const initMap = () => {
  // 以下为天地图及天地图标注加载
  const tiandituProvider = new Cesium.WebMapTileServiceImageryProvider({
    url:
      "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
      token,
    layer: "img",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "w",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名
    maximumLevel: 18,
    credit: new Cesium.Credit("天地图影像"),
  });
  // 天地图影像添加到viewer实例的影像图层集合中
  viewer.imageryLayers.addImageryProvider(tiandituProvider);
};
</script>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>