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";

let options = {
  scene: {
    center: {
      lat: 31.035216,
      lng: 120.656763,
      alt: 652.5,
      heading: 6.3,
      pitch: -23,
    },
    showSun: false,
    showMoon: false,
    showSkyBox: false,
    showSkyAtmosphere: false,
    fog: false,
    // backgroundColor: "#363635", // 天空背景色
    globe: {
      baseColor: "#363635", // 地球地面背景色
      showGroundAtmosphere: false,
      enableLighting: 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,
    },
  ],
};

let map = null;
const mapLayer = {};
const mapLoad = (mapInstance) => {
  map = mapInstance;
  //创建marker图层
  mapLayer.markerLayer = new mars3d.layer.GraphicLayer({
    allowDrillPick: true, // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
  });
  map.addLayer(mapLayer.markerLayer);
  //创建无人机固定巡航
  initUav()
  // 绘制停机场矩形
  initRectangle();
  initMarker();
};

const initUav = ()=>{
  let list = []
  PointJson.map(item=>{
    list.push(item.wz.split(",").map(Number))
  })
  const uav = new mars3d.graphic.Route({
    id: "uav",
    name: "无人机模型",
    position: {
        type: "time", // 时序动态坐标
        speed: 100,
        list: list
      },
    model: {
      url: "https://data.mars3d.cn/gltf/mars/wrj.glb",
      scale: 0.1,
      minimumPixelSize: 0.1,
      runAnimations: true,
      mergeOrientation: true,
    },
    camera: {
      type: "gs",
    }
  })
  mapLayer.markerLayer.addGraphic(uav);
}

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 = () => {
  PointJson.map((item, index) => {
    item.point = item.wz.split(",").map(Number);
    // 绘制水波浪圆
    circlePoint(item, index);

    //绘制名字图标
    lablePoint(item, index);
  });
};

/**
 *文字图标
 */
const lablePoint = (item, index) => {
  const markerDiv = new mars3d.graphic.DivGraphic({
    position: item.wz.split(",").map(Number),
    id: `marker${index}`,
    name: item.name,
    style: {
      html: `
        <div class="div-marker">
          <div class="marker-name">${item.name}</div>
          <div class="marker-icon"></div>  
        </div>
        `,
      offsetY: -73,
      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.point,
    style: {
      radius: 50,
      height: 0,
      materialType: mars3d.MaterialType.CircleWave,
      materialOptions: {
        color: "#59F9FF",
        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>