SuperMap iClient for JavaScript 次元统计数据动画电影的同时实现
作者:Hyacinth
甚么统计数据才能称作次元统计数据呢？浅显地讲，对象在不同的天数结点，空间位置发生改变的统计数据。大家都晓得，常见的渐变绘图形式有VML,SVG,Canvas，不晓得也说实话，上面我就来简单如是说呵呵这四种绘图形式，当中VML的全名是VectorMarkupLanguage(向量可记号词汇)，绘图可以任一弱化增大而不损失绘图的质量，这在制作世界地图上有很大商业用途,VML只是被IE全力支持；SVG，可翻转向量绘图（ScalableVectorGraphics）是如前所述可扩充记号词汇（XML），用于叙述三维向量绘图的一种绘图文件格式。SVG由W3C制定，是两个开放标准；而Canvas是HTML5的一部分，它可透过jsJAVA展开静态绘图位影像。 JavaScript应用程序采用了HTML5Canvas的帧(关于那个具体内容的原理实现，网上有很多的传授和标识符的同时实现，这儿我就不譬如了)，来展开静态地绘图向量统计数据。因此须要全力支持Canvas绘图的应用程序才有效用。IE9以上（含IE9），Chrome，Firefox，Opera等应用程序均全力支持Canvas。 iClient forJavaScript静态绘图统计数据，主要就会加进SuperMap.Layer.AnimatorVectorUSB，该动画电影渐变主要就对次元统计数据展开校订改等基本的统计数据管理操作形式。他当中两个关键的特性—animator，动画电影管理工作类，用来管理工作该动画电影渐变的播映，中止等操作形式。这儿如是说呵呵SuperMap.Animator那个USB，它只负责天数上的控制，具体内容动画电影效用须要使用者在初始化时的反弹表达式内部展开同时实现。可独立使用，不倚赖AnimatorVector。具体来说，他们可透过上面的图象，来看看Animator到底有些甚么特性和模块：上面，他们透过两个具体内容的范例来领略animator是如何来运行的，
/*具体来说调用动画电影管理工作类*/ animator =newSuperMap.Animator(callbackFunction,{ speed:1,//增设速度 startTime:0,//增设已经开始天数 endTime:100,//增设结束天数frameRate:34//增设帧率});}//反弹表达式，每帧具体内容同时实现的绘图标识符functioncallbackFunction(){vas.width,cxt.canvas.height);//去除Canvas(已显示的)，避免产生错误 cxt.save();//保存当前萨德基和状态，相关联的类似“push”操作形式 cxt.translate(10,0);//移动终点座标 cxt.lineWidth=2;//增设前面板的长度，单位为画素 cxt.fillStyle=#FF9900;//增设充填色 cxt.beginPath();//已经开始绘出新方向 cxt.rect(0,0,20,10);//绘出两个正方形 cxt.fill();//充填背景 cxt.closePath();//停用绘出的新方向} }//已经开始播映functionstartAnimator(){ animator.start();}
当中frameRate，表示每秒钟播映的动画电影的单次，预设为60(应用程序预设播映帧率为60)，即每秒钟播映60次。帧率增设的越高，每秒钟绘图的单次越多，动画电影连续性越好，性能越低；帧率增设的越低，每秒钟绘图的单次越少，动画电影连续性越差，性能越好。上面已经如是说了次元统计数据的概念，那具体内容怎样制作，他们一起来看看吧各行业在次元统计数据上使用的统计数据文件格式不统一，千奇百怪，如下图的有文本形式、excel表格形式、各种统计数据库形式、也有使用他们原有的supermap文件格式等，只要具有以下3个特性字段的统计数据，就可以使用他们的AnimatorVector展开静态绘图：
ID:即具有唯一标示的字段；
Time：即要素当前所在的天数结点字段；
Location:要素当前所在的空间位置字段。
接下来，就是他们最关键的部分啦，那就是次元统计数据动画电影的具体内容同时实现过程
构建和添加AnimatorVector渐变
//调用动画电影渐变animatorVector=newSuperMap.Layer.AnimatorVector(“VectorLayer”,{},{ speed:0.2, startTime:0, endTime:100});map.addLayers([animatorVector]);//添加渐变
上面是调用动画电影渐变的标识符，不难看出，模块包含3个部分，而具体内容的各个部分的参数是甚么，可透过上面的图象晓得：
第二部分可选模块，除去其父类SuperMap.Layer所拥有的特性以外，还有上面几个特性。当中featureIdName和timeName这两个字段相关联在上节所提到的统计数据的ID和Time字段，你可以使用预设的值FEATUREID,TIME,也可自定义其值，只要在向渐变添加向量要素时，赋予相应的值；rendererType是SuperMap.Renderer.AnimatorCanvas，底层绘图形式。基本动画电影绘图是指点线面渐变绘图。第三部分，前面已经做了如是说，这儿就不譬如了。
tor的向量要素只须要满足3点就行，那如何将这3点加入要素，比如下表给出了某一点在不同时刻的座标位置信息，根据其值创建向量要素，标识符如下：
//创建和添加向量要素 animatorVector.addFeatures([newSuperMap.Feature.Vector(newSuperMap.Geometry.Point(2325.144,-2619.2997),//添加第两个天数结点的位置{ //如果自定义了featureidName与timeName的值，这儿就须要填写相应的值 FEATUREID:”point”,//增设要素的id TIME:1//第两个天数结点} ),newSuperMap.Feature.Vector(newSuperMap.Geometry.Point(2295.2035,-2654.0703),//添加第二个天数结点的位置{ FEATUREID:”point”, TIME:2} )//然后按照天数结点依次添加要素] );
无论你的统计数据是甚么样的，只要你能够具有这三个特性，就可以创建向量要素。
AnimatorVector渐变所全力支持的事件 AnimatorVector除去父类Layer所全力支持的事件外，还全力支持上面两个事件
animatorVector.events.on({“drawfeaturestart”:drawfeaturestart}); animatorVector.animator.events.on({“firstframestart”:framestart});
drawfeaturestart事件：在每次绘出在当前天数结点内的feature时触发；同时动画电影管理工作类全力支持firstframestart事件：是在绘出第一帧时触发
实例这儿将最佳方向分析的结果作为统计数据，同时实现次元统计数据的动画电影展现主要就标识符如下：
//调用渐变 vectorLayer =newSuperMap.Layer.Vector(“VectorLayer”);animatorLayer=newSuperMap.Layer.AnimatorVector(“Animator”,{timeName:”Linetime”},{//增设速度为每帧播映0.05小时的统计数据 speed:0.05,//已经开始天数为0晨 startTime:0,//结束天数增设为最后运行结束的汽车结束天数 endTime:100});map.addLayers([animatorLayer]);//添加动画电影渐变
//最佳方向分析成功的反弹表达式functionprocessCompleted(findPathEventArgs){ //创建和添加向量要素for(vark =0, len = result.pathList[0].nodeFeatures.length; k < len; k++){ var car = newSuperMap.Feature.Vector(result.pathList[0].nodeFeatures[k].geometry,{FEATUREID:”1″, Linetime:k //根据结点生成天数}, carstyle //点要素的样式); cars.push(car);} animatorLayer.addFeatures(cars);//添加要素}
是不是觉得意犹未尽呀，他们的iClientforJavaScript可是自带了非常详细又美观的次元统计数据动画电影的范例标识符和实际效用，可进入上面的地址，再点击可视化——次元统计数据查看咯：http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/examples.html
看过以后，是不是觉得很简单呀，那就赶快行动起来，去试一试吧！
