Cesium实战功能教程之3dtiles操作（移动+旋转）

最新推荐文章于 2025-06-01 11:15:00 发布

原创

最新推荐文章于 2025-06-01 11:15:00 发布 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#3d #javascript

在平常的工作中，难免会用到倾斜摄影，当加载倾斜摄影的时候，最头疼的就是倾斜摄影的偏移问题，在代码中进行修改加载倾斜摄影的偏移参数，虽然简单但过于麻烦，也耽误开发的效率，因此我就本着能不能在三维场景中对倾斜摄影进行手动操作，无需再改代码并可将倾斜摄影放在较为正确的位置。为了实现这个功能，我就从网上找一些相关的资料，参照一些网上的大佬的代码进行修改，并补充相关知识，并不是那么及时的完成了这篇文章。希望大家多多收藏和点赞。

下文就是本文的实现思路和代码，并对文中的代码做出一定的注释，对于文章有不对的地方也希望大家进行指正，有大家的参与我才会有动力继续写下去，虽然产量微乎其微😄，但我希望对大家有帮助啊，取之开源用之开源啊。

接下来就开始直入主题啊，首先是绘制旋转标识器和平移标识器，毕竟有方向才好进行辨别啊。

移动指示器的绘制比较简单，通过Cesium.PolylineCollection()将指示器的三个方向方向添加到其中，并将绘制形成的指示器通过primitive的方式进行添加。
代码主要思路如下：

  /**
   * @description 绘制箭头
   * @param {object} originDegree 初始点坐标点
   * @param {object} targetDegree 目标点坐标点
   */
  initLineArrow(originDegree, targetDegree, length) {
   
   
    const arrows = new Cesium.PolylineCollection()
    //坐标系方向存放原始坐标和目的点坐标
    const xPos = [
    originDegree.lng,originDegree.lat,originDegree.alt,
    targetDegree.lng,originDegree.lat,originDegree.alt
    ]
    const xArrow = this.drawArrow(arrows,'model_edit_xArrow',xPos,Cesium.Color.GREEN)
    const yPos = [
      originDegree.lng,originDegree.lat,originDegree.alt,
      originDegree.lng,targetDegree.lat,originDegree.alt
    ]
    const yArrow = this.drawArrow(arrows,'model_edit_yArrow',yPos,Cesium.Color.BLUE)
    const zPos = [
      originDegree.lng,originDegree.lat,originDegree.alt,
      originDegree.lng,originDegree.lat,targetDegree.alt
    ]
    const zArrow = this.drawArrow(arrows,'model_edit_zArrow',zPos,Cesium.Color.RED)
    this._coordArrows = this._viewer.scene.primitives.add(arrows)
    this._coordArrows._name = 'CoordAxis'
  }
  /**
   * @description 绘制空间坐标轴（移动指示器）
   * @param {Cesium.Collection} arrows 坐标轴集合
   * @param {string} name xyz轴名称
   * @param {Array} positions 坐标系位置
   * @param {Cesium.Color} color 坐标系颜色
   */
  drawArrow(arrows, name, positions, color) {
   
   
    const arrow = arrows.add({
   
   
      positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
      width: this._defaultWidth,
      material: Cesium.Material.fromType(Cesium.Material.PolylineArrowType, {
   
   
        color: color
      })
    })
    arrow._name = name
  }

移动指示器的绘制原理也类似于移动指示器的绘制，通过Cesium.PolylineCollection()将指示器的三个旋转方向添加到其中，并将绘制形成的指示器通过primitive的方式进行添加。

/**
   * @description 绘制旋转转轴
   * @param {string} name 转轴的名字 
   * @param {Array} position 转轴的位置
   * @param {Cesium.Matrix4} matrix 东北坐标系矩阵
   * @param {Cesium.Color} color 转轴颜色
   * @returns 
   */
createAxisSphere(name, position, matrix, color) {
   
   
    let result = new Cesium.Primitive({
   
   
      geometryInstances: