cesium 动态调整模型位置和角度

最新推荐文章于 2024-09-25 14:14:29 发布

落笔映浮华H

最新推荐文章于 2024-09-25 14:14:29 发布

阅读量3k

点赞数

分类专栏： cesium 文章标签： elementui vue.js javascript 3d

本文链接：https://blog.csdn.net/weixin_39238200/article/details/125209131

版权

cesium 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

记录一下cesium动态调整模型的位置和角度的代码，有错误还请指出。

这里只记录主要代码，有问题可在评论区留言

<template>
<el-form
              :model="tileModelTool"
              label-width="60px"
              style="width: 100%"
            >
              <el-form-item label="经度">
                <el-input-number
                  v-model="tileModelTool.longitude"
                  @change="
                    (currentValue, oldValue) => {
                      updateMaxtrix(currentValue, oldValue, 4);
                    }
                  "
                  :step="0.00001"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="纬度">
                <el-input-number
                  v-model="tileModelTool.latitude"
                  @change="
                    (currentValue, oldValue) => {
                      updateMaxtrix(currentValue, oldValue, 5);
                    }
                  "
                  :step="0.00001"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="高度">
                <el-input-number
                  v-model="tileModelTool.height"
                  @change="
                    (currentValue, oldValue) => {
                      updateMaxtrix(currentValue, oldValue, 6);
                    }
                  "
                  :step="1"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="偏航角">
                <el-input-number
                  v-model="tileModelTool.rz"
                  @change="
                    (currentValue, oldValue) => {
                      updateMaxtrix(currentValue, oldValue, 1);
                    }
                  "
                  :min="-180"
                  :max="180"
                ></el-input-number>
              </el-form-item>

              <el-form-item label="俯仰角">
                <el-input-number
                  v-model="tileModelTool.ry"
                  @change="
                    (currentValue, oldValue) => {
                      updateMaxtrix(currentValue, oldValue, 2);
                    }
                  "
                  :min="-180"
                  :max="180"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="旋转角">
                <el-input-number
                  v-model="tileModelTool.rx"
                  @change="
                    (currentValue, oldValue) => {
                      updateMaxtrix(currentValue, oldValue, 3);
                    }
                  "
                  :min="-180"
                  :max="180"
                ></el-input-number>
              </el-form-item>
            </el-form>
</template>



<script>
import { ref} from "vue";
export default {
    setup() {
    const tileModelTool = ref({
      longitude: 118.576311,
      latitude: 32.595694,
      height: 220.08, //修改高度
      rx: 0,
      ry: 0,
      rz: 0, //修改旋转
    });

const updateMaxtrix = (currentValue, oldValue, type) => {
      let number = currentValue - oldValue;
      let paramesVal = tileModelTool.value;
      let m1;


       var position = Cesium.Cartesian3.fromDegrees(paramesVal.longitude,
          paramesVal.latitude,
          paramesVal.height);
        var heading = Cesium.Math.toRadians(paramesVal.rz);
        var pitch = Cesium.Math.toRadians(paramesVal.ry);
        var roll = Cesium.Math.toRadians(paramesVal.rx);
        var headingPitchRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll);
 
        var m = Cesium.Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4());
        console.log(m);
        _models.modelMatrix=m


    };

return {
    tileModelTool,
updateMaxtrix
}


}
}
</script>