PlotAnimation

mapgis-3d-plot-animation
态势推演组件 点此跳转到示例

缩略图

属性

名称	类型	默认值	描述	是否监听
data	String or Object or Array	随机数	动画数据，可以为动画数据的url，单个动画配置对象，或者多个动画配置组成的数组	是
vueIndex	String or Number	随机数	plotLayer 的唯一标识，随机生成的数字或字符串，不传则自动生成	否
vueKey	String	'default'	cesium 球体的唯一标识，默认值 default，当分屏时使用此对象标识多个球体	否

data

//单个动画配置对象
let data = {
    //脚本名称
    "timeLineName": "脚本测试",
    //动画配置
    "animations": [
        {
            //闪烁动画
            //动画类型，attribute-animation：属性动画，grow-animation：生长动画
            //visible-animation：显隐动画，blink-animation：闪烁动画，
            //scale-animation：比例动画，path-animation：路径动画
            "animationType": "blink-animation",
            //持续时间
            "duration": 1000,
            //要执行动画的标绘图元ID，多个ID以逗号分隔
            "featureIds": "d1a27f94-51b6-44e9-9bbf-02e607d963e9",
            //动画名称
            "animationName": "某xx进攻路线_闪烁动画",
            //描述时间的不均匀变化，Linear：平滑，Sine：正弦，Circ：圆，Bounce：反弹
            "easing": "Linear",
            //动画开始时间延迟，单位毫秒
            "delay": 10,
            //动画结束时间延迟，单位毫秒
            "endDelay": 0,
            //动画循环播放次数
            "loop": 500,
            //动画整体延迟，单位毫秒
            "timelineOffset": 0,
            //闪烁时的颜色，颜色数组数量任意
            "blinkColors": ["#000000", "#ff0000"],
            //闪烁时颜色是否会进行渐变，例如，闪烁颜色设置为红蓝，isBlinkGrad设为否，
            //则颜色仅会进行红蓝亮色变化，设为true则是红色到蓝色的渐变
            "isBlinkGrad": true,
            //闪烁完成后事显示还是隐藏，true为显示，false为隐藏
            "endStatus": true
        },
        {
            //路径动画
            //参数同上，仅允许点类型添加
           ...,
            //绑在路径上的点符号ID，多个点符号以逗号分隔
            "symbolBindId": "25843cca-bd01-4585-8209-1da41166c83a",
            //路径点
            "animationCoords": [],
            //是否显示路径
            "showPath": true,
            //路径样式，参考SVG样式
            "pathStyle": { "fill": "none", "strokeStyle": "#00ff00", "lineWidth": 5 },
            //开始比例，即路径开始位置，[0~1],默认0
            "startPathRate": 0,
            //结束比例，即路径结束位置，[0~1],默认1
            "endPathRate": 1,
            //路径类型，目前仅有一个值spline：贝塞尔曲线，可不填
            "pathType": "spline"
        },
        {
            //生长动画，参数同上
            ...,
            //开始比例，即生长动画开始比例，[0~1],默认0
            "startRate": 0.15,
            //结束比例，即生长动画结束比例，[0~1],默认0
            "endRate": 1,
            //生长模式，spline：线性生长，center：中心生长
            "growMode": "spline"
        },
        {
            //比例动画，参数同上
            ...,
            //比例动画放大缩小系数，即开始为1倍放大到两倍，缩小至1倍，最后放大到15倍
            //时间不是平均分配的，例如总时长16秒，则1~2为1秒，2~1为1秒，1~15为14秒
            "scaleRateArr": [1, 2, 1, 15]
        },
        {
            //属性动画，参数同上
            ...,
            //以某个样式属性进行动画
            //这里以线颜色为例，attrName指定了在属性strokeStyle的基础上进行属性动画
            //ids指定了要给哪一个标绘图元进行属性动画，可附加多个图元ID，以逗号分隔
            //value表明了颜色会从#ff0000渐变为#cccccc，最后渐变为#ff0000
            //每个渐变同样不是平均分配的，会将颜色转换为数字，在根据间隔值，计算渐变时间
            "attrsItem":{
                "attrName":"strokeStyle",
                "ids":"path2578",
                "value":["#ff0000","#cccccc","#ff0000"]
            }
        },
        {
            //显隐动画，参数同上
            ...,
            //显隐动画完成后事显示还是隐藏，true为显示，false为隐藏
            "endStatus": false
        }
    ]
}

动画时间示意图

示例

<template>
  <mapgis-web-scene style="height:95vh">
    <mapgis-3d-plot-layer @loaded="handleLoaded" :dataSource="dataSource" :symbolUrl="symbolUrl"></mapgis-3d-plot-layer>
    <mapgis-3d-plot- :data="data" :vueIndex="vueIndex" :vueKey="vueKey" v-if="vueKey && vueKey"/>
  </mapgis-web-scene>
</template>
<script>
export default {
  data() {
    return {
      //行业标绘图层数据源
      dataSource: "",
      //vueIndex，用来获取标绘图层
      vueIndex: undefined,
      //vueKey，用来获取标绘图层
      vueKey: undefined,
      //符号配置的URL
      symbolUrl: "",
      //态势推演配置文件
      data: data
    };
  },
  methods: {
    //图层加载完毕事件
    handleLoaded(e) {
      //返回vueIndex以及vueKey
      this.vueIndex = e.vueIndex;
      this.vueKey = e.vueKey;
    }
  }
};
</script>
<style lang="css"></style>