Cesium图片移动轨迹

根据传入的模型或者图片以及点的坐标来绘制图片移动轨迹

引入

import DrawTrack from '@/components/CesiumViewer/kit/drawTrack.js'

初始化

let drawTrack = null

export default {
  ...
  getViewer(viewer) {
    drawTrack = new DrawTrack({
      viewer, // cesium实例化
      context: this, // 当前组件上下文
      interval: 400, // 两点之间的绘制时间，默认400ms
    })
  }
}

只绘制图片

const name = 'imgName' // 图片或者模型的名称
const points = [{id: 5, list: [{'x': 1, 'y': 1, 'z': 1}]}] // 点的数组
const offset = {x: 12, y: 15} // 偏移量
drawTrack.start({isLine: false, name, points: points[0].list, offset, interval: 400, isImg: true, id: 5 })

只绘制线

const points = [{id: 5, list: [{'x': 1, 'y': 1, 'z': 1}]}] // 点的数组
const color = '64,258,155,1'
drawTrack.start({points: points[0].list, color, lineSize: 6, interval: 400, id: 5})

线和图片一起绘制

const points = [{id: 5, list: [{'x': 1, 'y': 1, 'z': 1}]}] // 点的数组
const color = '64,258,155,1'
const name = 'test01'
drawTrack.start({isImg: true, isLine: true, name, width: 60, height: 70, points: points[0].list, color, lineSize: 6, interval: 400, id:5})

线先绘制好，再绘制图片

const points = [{id: 5, list: [{'x': 1, 'y': 1, 'z': 1}]}] // 点的数组
const color = '64,258,155,1'
const name = 'test01'
drawTrack.start({isImg: true, isLine: true, name, width: 60, height: 70, points: points[0].list, interval: 400, color, lineEarly: true, id: 5})

参数说明

属性

属性	描述	类型	可选值	默认值
points	轨迹的点	Array	—	—
interval	轨迹中点到点的绘画时间	Number	—	400
isLine	是否画线	Boolean	—	true
lineSize	画出的线（轨迹）的宽度	Number	—	5
color	画出的轨迹的颜色,此处写 '255, 255, 255, 1' 这样的格式	String	—	Cesium.Color.ORANGE
outlineWidth	轨迹的描边宽度	Number	—	2
isImg	是否画图片/模型	Boolean	—	false
name	图片的命名，存在于static/Cesium/imgs该文件下的图片; 如果是模型，此处模型的命名还需要加上文件后缀（图片不用加）。模型存在于static/Cesium/models	String	—	—
width	画出的图片宽度	Number	—	50
height	画出的图片高度	Number	—	50
modelScale	模型的大小比例，默认值1是模型的原始大小。按比例来调整模型大小滴	Number	—	1
isShowModel	用于模型和图片的区别,true代表是模型	Boolean	—	false
offset	画出的图片的偏移量,默认值{x: 0, y: 0} == x对应平面图的x轴，y对应y轴	Object	—	{x: 0, y: 0}
lineEarly	先画好轨迹再画图片，前提需要isLine和isImg为true	Boolean	—	false
isInterval	判断画的轨迹的点是否从后端实时获取，如果是那就true	Boolean	—	false
id	每组线段的id，必填	Number	—	-
textureLine	每条线段是否绘制纹理线	Boolean	—	true
textureLineColor	纹理线的颜色,此处写 '255, 255, 255, 1' 这样的格式	String	—	Cesium.Color.ORANGE

效果呈现

源码

源码 (opens new window)