uav-flight-control/src/views/components/map/marsMap.vue

<template>
  <mars-map :options="options" @onload="mapLoad"></mars-map>
</template>

<script setup>
import marsMap from "@/components/marsMap";
import PointJson from "./point.json";
import { onMounted,nextTick } from "vue";
const { proxy } = getCurrentInstance();
let options = {
  scene: {
    center: {
      lat: 31.035216,
      lng: 120.656763,
      alt: 652.5,
      heading: 6.3,
      pitch: -23,
    },
    showSun: false,
    showMoon: false,
    showSkyBox: true,
    showSkyAtmosphere: true,
    fog: false,
    clock: {
      currentTime: "2023-11-01 12:00:00", // 固定光照时间
    },
    cameraController: {
      zoomFactor: 1.5,
      minimumZoomDistance: 0.1,
      maximumZoomDistance: 200000,
      enableCollisionDetection: false, // 允许进入地下
    },
  },
  terrain: {
    show: false,
  },
  basemaps: [
    {
      id: 2021,
      pid: 10,
      name: "天地图影像",
      icon: "https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png",
      type: "group",
      layers: [
        {
          name: "底图",
          type: "tdt",
          layer: "img_d",
        },
        {
          name: "注记",
          type: "tdt",
          layer: "img_z",
        },
      ],
      show: true,
    },
  ],
};
const params = reactive({
  lat: 31.162232,
  lng: 120.734077,
  altitude: 100,
  heading: 0, //当前朝向
  pitch: 0, //保当前俯仰角
  roll: 0, //当前翻滚角
  correction: 1,
  speed: 500,
});

// 使用 import.meta.glob 动态导入本地图片
const imageModules = import.meta.glob('@/assets/images/*.png', { eager: true });

// 获取图片路径
const imageUrls = Object.values(imageModules).map((module) => module.default);

let isGamepad  = false;
let map = null;
let list = [];
let uav = null;
const mapLayer = {};
const mapLoad = (mapInstance) => {
  map = mapInstance;
  //创建marker图层
  mapLayer.markerLayer = new mars3d.layer.GraphicLayer({
    allowDrillPick: true, // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
  });
  map.addLayer(mapLayer.markerLayer);
  //创建无人机图层
  mapLayer.uav = new mars3d.layer.GraphicLayer()
  map.addLayer(mapLayer.uav);

  map.on(mars3d.EventType.load, function (event) {
    boostrapUav();
  })

  

  
};

onMounted(()=>{
  onAddGamepadboardListener();
})

/**
 * 监听游戏手柄
 */
const onAddGamepadboardListener = () => {
  window.addEventListener("gamepadconnected", function (e) {
    // var gp = navigator.getGamepads()[e.gamepad.index];
    proxy.$modal.msgSuccess("手柄控制已启动");
    // 获取无人机固定航线最后的信息
    const uavItem =  mapLayer.uav.getGraphicById('uav1');
    const {heading,pitch,roll,position } = uavItem
    const cartographic = mars3d.LngLatPoint.fromCartesian(position)
    params.lat =cartographic._lat
    params.lng=cartographic._lng
    params.heading=heading
    params.pitch=pitch
    params.roll=roll
   
    // 开始手柄操作
     const renderer = () => {
      startgamepad();
      onAdjustAttitude();
      requestAnimationFrame(renderer);
    };
    renderer();

   
  });
  // 监听游戏手柄拔出
  window.addEventListener("gamepaddisconnected", function (e) {
    clearInterval(interval);
  });
};

const boostrapUav = () => {
  // 绘制停机场矩形
  initRectangle();
  //渲染所有图标点
  initMarker();
  //渲染无人机
  initUav();
};

const startgamepad = () => {
  var gamepad = navigator.getGamepads()[0];
  if (gamepad) {
    //手柄方向按键
    pressKey(gamepad.buttons);
    // 手柄方向遥感
    rocker(gamepad.axes);
  }
};
// 手柄左方向遥感
const rocker = (axes) => {
  const deadZone = 0.5;
  const x = axes[0];
  const y = axes[1];
  // //机体左转
  if (x < -deadZone) {
    //机体左转
    params.heading -= 0.115;
    if (params.roll > -10) {
      params.roll -= 0.115;
    }
  } else if (x > deadZone) {
    //机体右转
    params.heading += 0.115;
    if (params.roll < 10) {
      params.roll += 0.115;
    }
  }
  // 检测垂直方向机体爬升
  if (y < -deadZone && params.pitch <= 0.3) {
    params.pitch += 0.015;
    if (params.pitch > 0) {
      const { speed, pitch } = params;
      const temp = (params.speed / 60 / 60 / 60) * 110;
      //1经纬度约等于110km
      params.altitude += temp * Math.sin(pitch);
    }
  } else if (y > deadZone && params.pitch >= -0.3) {
    //机体俯冲
    params.pitch -= 0.016;
    if (params.pitch < 0) {
      const { speed, pitch } = params;
      //1经纬度约等于110km
      const temp = (params.speed / 60 / 60 / 60) * 110;
      params.altitude += temp * Math.sin(pitch);
    }
  }
  reset();
};
//左侧方向按键上下键
const pressKey = (buttons) => {
  // 加速
  if (buttons[12] && buttons[12].pressed) {
    params.speed += 100;
  }
  // 减速
  if (buttons[13] && buttons[13].pressed) {
    if (params.speed >= 500) {
      params.speed -= 100;
    }
  }
  reset()
};

const reset = () => {
  const { heading, pitch, roll } = params;
  const { abs, cos } = Math;
  params.correction = abs(cos(heading) * cos(pitch));
  if (abs(heading) < 0.001) params.heading = 0;
  if (abs(roll) < 0.001) params.roll = 0;
  if (abs(pitch) < 0.001) params.pitch = 0;
  //方向自动回正
  // if (params.heading > 0) params.heading -= 0.0025
  // if (params.heading < 0) params.heading += 0.0025
  if (params.roll > 0) params.roll -= 0.003;
  if (params.roll < 0) params.roll += 0.003;
  if (params.pitch < 0) params.pitch += 0.005;
  if (params.pitch > 0) params.pitch -= 0.003;
};

// 开启飞行姿态调整/
const onAdjustAttitude = () => {
  const temp = params.speed / 60 / 60 / 60 / 110;
  params.lng += temp * Math.cos(Cesium.Math.toRadians(params.heading));
  params.lat -= temp * Math.sin(Cesium.Math.toRadians(params.heading));
  const { lng, lat, altitude, heading, pitch, roll } = params;
  params.altitude += temp * Math.sin(pitch) * 110 * 1000 * 10;
  const position = Cesium.Cartesian3.fromDegrees(lng, lat, altitude);
  uav.model.setStyle({
    heading,
    pitch,
    roll,
  });
  uav.addTimePosition(position);
};

const initUav = () => {
  if (list.length == 0 && !isGamepad ) {
    list =  PointJson.map((item) => item.wz);
  }
  uav = new mars3d.graphic.FixedRoute({
    id: "uav1",
    name: "无人机模型",
    position: {
      type: "time", // 时序动态坐标
      speed: 100,
      list: list,
    },
    clockLoop: true,      //是否循环播放
    model: {
      url: "https://data.mars3d.cn/gltf/mars/wrj.glb",
      scale: 0.1,
      minimumPixelSize: 0.1,
      runAnimations: true,
      // mergeOrientation: true,
    },
    polyline:{
      materialType: mars3d.MaterialType.PolylineDash,//虚线
      materialOptions:{
        color: 'rgba(34, 232, 174, 1)',
        dashLength: 8.0
      }
    },
    camera: {
      type: "gs",
    },
  });
  mapLayer.uav.addGraphic(uav);
  uav.start()
};

const initRectangle = () => {
  const graphic = new mars3d.graphic.RectanglePrimitive({
    positions: [
      [120.657821, 31.048952],
      [120.657318, 31.047691],
      [120.658122, 31.047505],
      [120.658591, 31.04872],
    ],
    style: {
      color: "#22E8AE",
      opacity: 0.4,
      outline: true,
      outlineColor: "#22E8AE",
    },
  });
  mapLayer.markerLayer.addGraphic(graphic);
};

/**
 * 渲染所有点位
 */
const initMarker = () => {
  console.log(imageModules)
  PointJson.map((item, index) => {
  
    //绘制名字图标
    lablePoint(item, index);
    // 绘制水波浪圆
    circlePoint(item, index);
  });
};

/**
 *文字图标
 */
const lablePoint = (item, index) => {
  const markerDiv = new mars3d.graphic.DivGraphic({
    position: item.wz,
    id: `marker${index}`,
    name: item.name,
    style: {
      html: `
        <div class="div-marker">
          <div class="marker-name ${item.type == 'school' ? 'color-school' : item.type == 'park' ? 'color-park' :'color-uav' } ">${item.name}</div>
          <img class="marker-icon" src="${item.type == 'school' ? imageUrls[5] : item.type == 'park' ?  imageUrls[4] :imageUrls[6] }" />
        </div>
        `,
      offsetY: -73,
      clampToGround:true,
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      distanceDisplayCondition: true, // 按视距距离显示
    },
  });
  mapLayer.markerLayer.addGraphic(markerDiv);
};
/**
 * 点位底部圆特效
 * @param item
 * @param index
 */
const circlePoint = (item, index) => {
  const graphic = new mars3d.graphic.CircleEntity({
    position: item.wz,
    style: {
      radius: 50,
      height: 0,
      materialType: mars3d.MaterialType.CircleWave,
      materialOptions: {
        color: item.type == 'school' ? '#59F9FF' : item.type == 'park' ?  '#33E064' : '#22E8AE',
        count: 2,
        speed: 6,
      },
      distanceDisplayCondition: true, // 按视距距离显示
    },
  });
  mapLayer.markerLayer.addGraphic(graphic);
};
</script>

<style scoped>
.mars3d-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
</style>