Cesium加载3dtileset并修改位置/偏移位置
发表于:2024-02-23 | 分类: 前端
字数统计: 326 | 阅读时长: 1分钟 | 阅读量:
  • 在使用cesium进行开发时,有时需要加载一些外部的3dtile模型,由于模型制作者对模型的世界坐标可能只是随意赋值的,这时我们加载了后还需要对模型进行一定的偏移包括经纬度和高度),以下是代码实现:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    const tileset = new Cesium.Cesium3DTileset({
    url: '', // 托管tilesetjson根文件的 url 以及一些参数。。。
    });
    tileset.readyPromise.then(() => {
    //计算tileset的绑定范围
    let boundingSphere = tileset.boundingSphere;
    //计算中心点位置
    let cartographic = Cesium.Cartographic.fromCartesian(
    boundingSphere.center
    );
    //计算中心点位置的地表坐标
    let surface = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude,
    0.0
    );
    console.log("tileset自身center : ", [
    Cesium.Math.toDegrees(cartographic.longitude),
    Cesium.Math.toDegrees(cartographic.latitude),
    ]);
    // 偏移tileset到指定位置
    const heightOffset = 100; // 高度偏移 正上负下
    const xOffset = 100; // 经度偏移量 正负
    const yOffset = 100; // 纬度偏移量 正负
    let x = Cesium.Math.toDegrees(cartographic.longitude);
    let y = Cesium.Math.toDegrees(cartographic.latitude);
    let offset = Cesium.Cartesian3.fromRadians(
    xOffset
    ? Cesium.Math.toRadians(x + xOffset)
    : cartographic.longitude,
    yOffset
    ? Cesium.Math.toRadians(y + yOffset)
    : cartographic.latitude,
    heightOffset
    ); // 进行经纬度和高度偏移
    let translation = Cesium.Cartesian3.subtract(
    offset,
    surface,
    new Cesium.Cartesian3()
    );
    //tileset.modelMatrix转换
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    });
    viewer.scene.primitives.add(tileset); // 加载...
  • 如果要根据指定经纬度偏移,对进行经纬度和高度偏移部分代码进行适当修改即可~~~

上一篇:
vue2/3使用highcharts时3d类图表3d效果不生效问题
下一篇:
使用protobuf进行前后端数据交互