(五)基于Vue3+vite的cesium项目创建

原创已于 2024-09-20 19:22:54 修改 · 618 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

小芳滴

关注

标签

#vue #前端

分类前端开发

于 2024-09-15 18:50:21 首次发布

1.添加无人机

1.1模型下载

无人机模型可以去github上下载，以下是链接地址：模型下载地址
如图所示：
在这里插入图片描述

1.2获取无人机摆放位置

首先获取无人机摆放的位置，可以根据第二节进行获取坐标，并且设定朝向，代码如下：

var carposition = Cesium.Cartesian3.fromDegrees(114.395685,30.520922,40);
  const hpr = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(90),
    0.0,
    0.0
  );
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    carposition,
    hpr
  );

1.3添加无人机并追踪

// 添加无人机
  const drone = viewer.entities.add({
    position: carposition,
    orientation: orientation,
    model: {
      uri: "../public/model/CesiumDrone.glb",
      minimumPixelSize: 65,
      maximumScale: 60,
    },
  });
  //追踪到无人机
  viewer.trackedEntity = drone;

2.添加实体人

2.1模型下载

和无人机模型下载一样（模型下载）

2.2获取实体人摆放位置

//设定人摆放的位置
  const manposition = Cesium.Cartesian3.fromDegrees(
    114.397663,30.520784
  );

2.3添加实体人并追踪

// 添加实体人
  const man = viewer.entities.add({
    position: manposition,
    model: {
      uri: "../public/model/Cesium_Man.glb",
      minimumPixelSize: 65,
      maximumScale: 60,
    },
  });
  //追踪到实体人
  viewer.trackedEntity = man;
});

整体如图所示：
在这里插入图片描述
整个代码：

<template>
  <div id="app">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
// 设置cesium token
Cesium.Ion.defaultAccessToken = 'your cesium token';
// 设置cesium默认视角，定位到中国区域
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西边的经度
  89.5,
  // 南边的纬度
  20.4,
  // 东边的经度
  110.4,
  //北边的纬度
  61.2
)

onMounted(async ()=>{
  var viewer = new Cesium.Viewer("cesiumContainer",{
    // animation:false,//动画小部件
    // baseLayerPicker:false,//地图图层组件
    // fullscreenButton:false,//全屏组件
    // geocoder:false,//地理编码搜索组件
    // homeButton:false,//首页组件
    // infoBox:false,//信息框
    // sceneModePicker:false,//场景模式
    // selectionIndicator:false,//选取指示器组件
    // timeline:false,//时间轴
    // navigationHelpButton:false,//帮助按钮
    // navigationInstructionsInitiallyVisible:false,
    // 加载地形函数，提供高分辨率的全球 3D 地形数据
    terrainProvider:await Cesium.createWorldTerrainAsync({
      // 提高地形表面的光照和阴影效果的精度
      requestVertexNormals:true,
      // 水体呈现流动效果
      requestWaterMask:true
    }),
  });
  // 设置沙箱允许使用js(通常情况下会报错)
  var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
  iframe.setAttribute(
    "sandbox",
    "allow-same-origin allow-scripts allow-popups allow-forms"
  );
  iframe.setAttribute("src", "");
  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 添加3D建筑
  const buildingsTileset = await Cesium.createOsmBuildingsAsync();
  viewer.scene.primitives.add(buildingsTileset);

  // 获取任意点的坐标（从笛卡尔坐标转换为经纬度坐标）
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (movement) {
      const pickedPosition = viewer.scene.pickPosition(movement.position);
      console.log(pickedPosition);
      if (Cesium.defined(pickedPosition)) {
        var cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
        var height = cartographic.height.toFixed(6);
        console.log(`Longitude: ${longitude}, Latitude: ${latitude}, Height: ${height}`);
      } else {
        console.log("No position picked");
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  // 得到地大坐标
  var university = Cesium.Cartesian3.fromDegrees(114.396251,30.521263,60);
  // 飞往地大
  viewer.camera.flyTo({
    destination:university,
    orientation:{
      //指定相机的朝向
      heading:Cesium.Math.toRadians(180),
      //指定相机的俯仰角
      pitch:Cesium.Math.toRadians(-20),
      //指定相机的滚转角
      roll:0,
    },
  });
  // 添加地质大学的标志
  var Label = viewer.entities.add({
    position:university,
    label:{
      text:"中国地质大学(武汉)",
      font:"16px sans-serif",
      fillColor:Cesium.Color.WHITE,
      outlineColor:Cesium.Color.BLACK,
      outlineWidth:4,
      // FILL填充文字，outline勾勒标签，fill_and_outline填充文字和勾勒标签
      style:Cesium.LabelStyle.FILL_AND_OUTLINE,
      // 设置文字的偏移量
      pixelOffset:new Cesium.Cartesian2(0,-12),
      //设置文字的显示位置，在水平方向上的对齐方式
      horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
      //设置文字的显示位置,垂直方向上的对齐方式
      verticalOrigin:Cesium.VerticalOrigin.BOTTOM,
    },
    billboard:{
      image:'../public/image/大学.png',
      width:50,
      height:50,
      verticalOrigin:Cesium.VerticalOrigin.TOP,
      HorizontalOrigin:Cesium.HorizontalOrigin.CENTER,
    },
  });
  // 设定颜色，为3d建筑
  buildingsTileset.style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        [
          "${feature['building']} === 'yes'",
          "color('rgba(255, 178, 102, 0.9)')",
        ],
        [
          "${feature['building']} === 'university'",
          "color('rgba(38, 188, 213, 0.7)')",
        ],
        [
          "${feature['building']} === 'residential'",
          "color('rgba(244, 13, 100, 0.8)')",
        ],
        [
          "${feature['building']} === '	apartments'",
          "color('rgba(255, 204, 204, 0.9)')",
        ],
        [
          "${feature['building']} === 'dormitory'",
          "color('rgba(202, 0, 204, 0.9)')",
        ],
        [
          "${feature['building']} === 'commercial'",
          "color('rgba(102, 255, 255, 0.9)')",
        ],
        ["true", "color('white')"],
      ],
    },
    show: true,
  });
  //设定无人机摆放的位置
  var carposition = Cesium.Cartesian3.fromDegrees(114.395685,30.520922,40);
  const hpr = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(90),
    0.0,
    0.0
  );
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    carposition,
    hpr
  );
  // 添加无人机
  const drone = viewer.entities.add({
    position: carposition,
    orientation: orientation,
    model: {
      uri: "../public/model/CesiumDrone.glb",
      minimumPixelSize: 65,
      maximumScale: 60,
    },
  });
  //追踪到无人机
  viewer.trackedEntity = drone;
  //设定人摆放的位置
  const manposition = Cesium.Cartesian3.fromDegrees(
    114.397663,30.520784
  );
  // 添加实体人
  const man = viewer.entities.add({
    position: manposition,
    model: {
      uri: "../public/model/Cesium_Man.glb",
      minimumPixelSize: 65,
      maximumScale: 60,
    },
  });
  //追踪到实体人
  viewer.trackedEntity = man;
});

</script>

<style scoped>
body {
  /* 绝对定位 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  height: 100vh;
  width: 100vw;
}
</style>