求解:echarts 中markpoint 怎样加动图,我想在地图上显示风车的动图

牧月冰光 发布于 2018/03/14 15:44
阅读 1K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:echarts 中markpoint 怎样加动图,我想在地图上显示风车的动图

加载中
0
tcxu
tcxu

牧月冰光 ,你的风车动画的具体要求是什么?可否在echarts的地图层面之上,用 HTML5 canvas + js 自己创建动画?这样可能更灵活、更随意、更自主。

牧月冰光
牧月冰光
回复@tcxu : 风车动画没什么复杂的要求,是一张gif格式的动图,风车不停的旋转,想让它标志在markpoint 上,可是放在symbol 里面动图就成了静态的图片。
0
tcxu
tcxu

为理解 在echarts 的作品之上直接添加动画的建议,特写出下列案例:

代码见:  http://runjs.cn/detail/bmytv8kr

网页见:  http://sandbox.runjs.cn/show/bmytv8kr

  1. 在 一个名为 (id) logo 的 画布(canvas)上 创建一个小动画,如一个风车(画布尺寸越小越好)。
  2. 为显示动画,画布logo 的层面(z-index:2) 在 echarts 的画布(id=’main’ 其 z-index:1)之上。
  3. 为便于修改,两批代码分别放置:将Echarts 的js代码放在<body></body>之中,将动画js的代码放在前面,在<head></head>之中。
  4. 动画的位置,由 <style></style> 中,#logo{..} 的属性,画布位置: position:absolute;left:300px;top:30px, 来定。
  5. 如果需要多个相同的动画(风车),小动画可以先画在一个隐藏(CSS 属性display:none;)的画布, 如 id=”windmill”, 然后再用它的数据 : var img = document.getElementById(‘windmill’); 画在 画布logo之上。
var img = document.getElementById(‘windmill’);

var g = document.getElementById(‘logo’).getContext("2d");;

g.drawImage(img, 300,400); // 画多个风车

g.drawImage(img,200,500);// 画多个风车

…

 

牧月冰光
牧月冰光
@tcxu 回复@tcxu :好的,谢谢
tcxu
tcxu
回复 @牧月冰光 : 我没有 使用echarts 地图百度地图扩展的经验,这个问题你应当再发一个帖子,指出网页/站例子,问大家。
牧月冰光
牧月冰光
谢谢老师,很详细的说明,我现在按这个方法添加了动图。另外,我有一个是echart 地图百度地图扩展的BMAPEXT,要在所有的地点上标志动图,还要怎么改好呢?
0
tcxu
tcxu

当然,动画gif 的作品,也可以放到echarts的作品之上。

细节代码

网页展示

似乎应当预先也定好echarts的宽度。

返回顶部
顶部