外部模型

const layer = new ExternalLayer({
  id: "图层唯一标识",
  type: "图层类型",
  title: "图层的名称",
  url: "图层资源的访问url",
  // 位置
  position: {
    latitude:纬度,
    longitude:经度,
    z:视角高度
  },
  // 大小
  scale:[],
  // 角度旋转
  rotate:[],
  // 坐标系
  spatialReference: number
})

interface IExternalLayer {
  // 图层id
  id: string
  // 图层类型
  type?: string
  // url地址
  url?: string
  // 图层的title,显示用
  title?: string
  // 渲染节点属性
  props: IRenderNodeProps
}

interface IRenderNodeProps {
  // 唯一id
  id: string
  // 模型地址
  url: string
  // 坐标系, 102100 | 4326
  spatialReference: number,
  // 位置
  position: any,
  // 大小
  scale?: number[]
  // 角度旋转
  rotate?: number[]
}

interface IGltfAnimate {
  // 类型
  type: IGltfAnimateType
  // 路径
  route: number[] | IGltfAnimatePath[]
  // 持续时长
  duration?: number
  // 是否循环
  loop?: boolean
  // 动画函数，请参看https://easings.net/
  // 举例：'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeInQuart' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInOutCubic'
  easing?: string
  // 路径动画时，是否绘制路线
  isDrawLine?: boolean
}

// 路径  旋转
type IGltfAnimateType = 'path' | 'rotate'

interface IGltfAnimatePath { 
  // 纬度
  latitude: number
  // 经度
  longitude: number
  // 视角高度，单位为米
  z: number
}

  const layer = new ubm.ExternalLayer({
    id: 'demo',
    type: 'gltf',
    title: 'demo',
    url: 'https://cdn.hb6oss.xstore.ctyun.cn/assets/LittlestTokyo1.glb',
    position: {
        latitude: 39.89976366941874,
        longitude: 116.39183281819857,
        z: 200
      },
    // 缩放大小：[X轴,Y轴,Z轴]
    scale: [0.2, 0.2, 0.2],
    // 角度旋转:[X轴,Y轴,Z轴]
    rotate: [0, 90, 0],
    spatialReference: 102100
  })

  scene.layer.add(layer)

layer.startAnimate({
  type: 'path',
  route: [
    {
      latitude: 39.89976366941874,
      longitude: 116.39183281819857,
      z: 0
    },
    {
      latitude: 39.99976366941874,
      longitude: 116.39183281819857,
      z: 0
    },
    {
      latitude: 39.99976366941874,
      longitude: 116.36183281819857,
      z: 0
    },
  ],
  duration: 10000,
  loop: false,
  easing: 'easeInOutCubic',
  isDrawLine: false
}).then((status: string) => {
  // 动画执行完成状态status: 'finish'
  if (status === 'finish') {
    // 动画执行完成后需要进行的操作(自定义)
    ...
  }
  // 动画执行中断状态status: 'break' 
  if (status === 'break') {
    // 动画执行中断后需要进行的操作(自定义)
    ...
  }
})

layer.startAnimate({
  type: 'rotate',
  // 旋转角度:[X轴,Y轴,Z轴]
  route: [0, 0, 180],
  duration: 1000,
  loop: false,
  easing: 'easeInOutCubic',
}).then((status: string) => {
  // 同路径动画
  ...
})

layer.stopAnimate()