问题说明:
1.在Mars3d的示例中找到了【积云】的效果,查看【积云】的api的时候,发现了支持属性机制的property属性。
相关api链接:
CloudPrimitive - V3.7.0 - Mars3D API文档
2.但是不知道该属性机制如何使用,于是翻看了Mars3d的开发教程,关于属性机制的说明。
相关开发教程链接:
Mars3D 三维可视化平台 | 火星科技 | 地图开发
找到了一个适合积云移动效果的api:
于是在Mars3d的官网的属性机制演示示例中,找到了该演示效果:
相关示例链接:
功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技
实现代码:
// 使积云进行移动
export function demoSampledPositionProperty() {
graphicLayer.clear()
// 创建积云
const graphic = new mars3d.graphic.CloudPrimitive({
position: [116.353072, 30.859836, 2000],
style: {
scale: new Cesium.Cartesian2(5500, 1000),
maximumSize: new Cesium.Cartesian3(50, 15, 13),
slice: 0.3,
label: {
text: "我是一团来自火星的云",
font_size: 18,
color: "#ffffff",
pixelOffsetY: -10,
distanceDisplayCondition: true,
distanceDisplayCondition_far: 90000,
distanceDisplayCondition_near: 0
}
},
attr: { remark: "示例1" }
})
graphicLayer.addGraphic(graphic)
// 指定固定时间 ,方便写演示代码。
map.clock.currentTime = Cesium.JulianDate.fromDate(new Date("2017-08-25 08:00:00"))
// 演示属性机制
const property = new Cesium.SampledPositionProperty()
property.addSample(Cesium.JulianDate.fromDate(new Date("2017-08-25 08:00:00")), Cesium.Cartesian3.fromDegrees(117.198461, 31.834956, 40.2))
property.addSample(Cesium.JulianDate.fromDate(new Date("2017-08-25 08:00:20")), Cesium.Cartesian3.fromDegrees(117.231979, 31.833411, 35.6))
graphic.position = property
}
实现效果: