`
huang_xiaok
  • 浏览: 92801 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
90a30fc4-e2b0-37bf-a450-86cdba0caacc
Fusioncharts中...
浏览量:16687
文章分类
社区版块
存档分类

JavaScript Maps更新至v3.17.0【附新增功能在线演示】

阅读更多

JavaScript Maps是amCharts旗下的地图控件,所以又可称为"amMap"。它可以轻松添加交互式地图到Web页面和基于JavaScript 的应用程序。可以用JavaScript Maps显示办公室的位置,旅行线路,创建自己的经销商线路等。可以将照片和插图做成地图的图层或背景,这样可以得到各种个性化的展示和电子学习工具等 等。

最新发布的3.17.0版本做出了如下更新:
  • 新增了许多功能。
  • 为方便抓握地图/阶段图像和线条,AmMap新增了stageXToLongitude(x)stageYToLatitude(y)方法。
  • MapArea,MapImage和MapLine新增了validate()方法。将重绘对象(例如,更改了某些属性后)而不重画全图。
  • MapImage和MapLine新增了fixToMap()fixToStage()方法。如果线被固定到一个阶段,fixToMap()将其固定到图(使线将与地图移动),反之亦然。
  • MapImage新增了updatePosition()方法。将在图像的左/右/上/下坐标的的经度/纬度发生变化后重新定位图像。
  • MapImage和MapLine新增了deleteObject()方法。将在不需要重建地图的情况下移除对象。
  • MapImage新增了lineId 属性-如果要使用创建线相关位置的沿线动图或定位图像,你需要为线增加ID并为图像设置该ID。
  • MapImage新增了positionOnLine属性,且属性值从0到1。如果为一些线设置了lineId,然后将 positionOnLine设置为0.5,那么图像将被放置在线的正中间。
  • MapImage新增了默认值为false的animateAlongLine属性。如果将它设置为true,并且设置了某些线的lineId,那么图像将沿着线移动。下面是控制这个动画的属性。
  • ImagesSettings新增了默认值为3的animationDuration属性。用来定义动画的持续时间,以秒为单位。也可以在MapImage直接设置自定义animationDuration。
  • ImagesSettings新增了默认值为false的adjustAnimationSpeed属性。若设置为true,图片将根据线之间的距离调整动画的速度。
  • ImagesSettings新增了默认值为500的baseAnimationDistance属性。这意味着,若adjustAnimationSpeed设置为true,图像将在animationDuration内以500像素的速度移动。若动画的开始和结束点小于baseAnimationDistance,图像将移动的更快,反之更慢。
  • ImagesSettings新增了默认值为0的pauseDuration属性。用来定义动画之间的停顿(如果一个线具有多个的段或动画被循环/翻转)。
  • MapImage新增了默认值为true的loop属性。用来指定动画是否需要循环。
  • MapImage新增了默认值为false的flipDirection属性。用来指定当动画达到线的终点时是否需要逆向。
  • ImagesSettings新增了默认值为AmCharts.easeInOutQuad的easingFunction属性。这个具体的功能是用于在开始和结束时放慢动画,在中间时加快动画。你也可以选择其它方法:AmCharts.bounce, AmCharts.easeInSine, AmCharts.easeOutSine, AmCharts.easeOutElastic。同样你也可以在MapImage上设置缓和功能。
  • MapImage新增了默认值为1的positionScale属性。若设置为2,图像将在动画中间位置缩放为2倍。
  • MapImage新增了animateAlong(lineId, duration, easingFunction)方法。使用这个方法你可以在任何时候触发动画。
  • MapImage新增了animateTo(longitude, latitude, duration, easingFunction)方法。你可以将图像移动到任何坐标(代替使用上/左/右/底部坐标的经度/纬度)。
  • MapImage新增了animationStartanimationEnd事件。动画开始/结束时事件被触发。事件对象是:{type: “animationStart”, chart: AmMap, image: MapImage, lineSegment: Number, direction: Number}
  • AmMap新增了mouseDownMapObject事件。

点击查看>>新增的沿线动图动能在线演示

 

1
1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics