vue3 + cesium基础学习

个人学习笔记,本文采用的cesium版本为1.108.

导入gltf模型

注意, 模型资源要放在public下面.

新手踩的坑: 资源导入可以直接写{ uri: "/static/model/1.glb"}, 不需要写import xx from 'xxx' 相对路径

<template>
  <div ref="cesiumContainer">
  </div>
</template>
<script setup>
//  本次作业: 在地球上导入3D模型
//引入cesium
import  * as Cesium from "cesium";
import "cesium/Build/CesiumUnminified/Widgets/widgets.css"; // 这是样式文件, 但是.vue文件里如果不引用该文件的话 cesium会报错
import { onMounted } from "vue";

//定义viewer
let viewers = null;

let position = Cartesian3.fromDegrees(107.47371, 31.196359, 0);

//初始化viewer
function initViewer() {
  viewers = new Viewer("cesiumContainer") // 此处放的是div的id;
  const entity = viewers.entities.add({
    name: "demo",
    position: position, // 模型导入的位置
    model: {
      uri: "/static/model/1.glb", // 模型在项目里的位置, 会直接读取public下面的文件夹
    },
  });
  viewers.trackedEntity = entity;
}

//初始化viewer
onMounted(() => {
  initViewer();
});
</script>

导入3d lites 模型

1.107之前导入 3dlites 可以通过readyPromise. 但是1.108中是废弃的, 找了好久找到的108写法, 通过 async await 写法导入后操作.

  async function addThreeDTiles(url, option) {
    viewer.scene.globe.depthTestAgainstTerrain = true;
    let tileset = {};
    tileset = await Cesium.Cesium3DTileset.fromUrl(url, option);
    viewer.scene.primitives.add(tileset);
    return tileset; // 返回模型对象
  }

  const modelPromise = addThreeDTiles("/static/model/3dtiles/tileset.json"); // 模型切瓦后的瓦片索引文件URL

注意 3d lites模型自带经纬度. 如果想要修改模型位置, 可通过tileset.modelMatrix 修改

  modelPromise.then((tileset) => {
    // 把模型调整到达钢
    // 获取tileset的中心点坐标
    var boundingSphere = tileset.boundingSphere;
    var center = boundingSphere.center;
    // 将中心点坐标转换为WGS84坐标系下的经纬度
    // 模型精确到了小数点后14位
    var cartographic = Cesium.Cartographic.fromCartesian(center);
    var longitude = Cesium.Math.toDegrees(cartographic.longitude);
    var latitude = Cesium.Math.toDegrees(cartographic.latitude);
    // 35.60023558303877

    // 调整经纬度
    var translation = Cesium.Cartesian3.fromDegrees(
      modelLongitude,
      modelLatitude
    );
    var centerNew = Cesium.Cartesian3.fromDegrees(longitude, latitude);

    var translationVector = Cesium.Cartesian3.subtract(
      translation,
      centerNew,
      new Cesium.Cartesian3()
    );

    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translationVector);
  });

camera设置视角, setView 和flyTo的区别

setView会卡顿, flyTo有动画效果.