canvas瓦片图加载

Posted 2020-08-09

最近做了一个canvs瓦片图的项目，由于初次尝试，踩了不少坑。下面罗列一下

1.没有dom不好选取，移动端的点击和移动同时触发--放在touchend里面判断，start的时候记录鼠标位置，end的时候看这个位置有没有移动，如果有位移就是move，没有就是点击

2.点击穿透问题，加了一个400毫秒的timeout解决

3.safari浏览器遇到图片没有onload的时候，就等于报错，不执行，导致重绘出问题。而chorme不会。

4.坐标转换过来的时候是json格式，需要截取字符串转换日期

var beginTime = data[i].CmsEvents.BeginTime;　　　　//获取传过来的json时间戳

beginTime = beginTime.slice(6, 16);　　　　　　　　　//截取传过来的json时间戳

var endinTime = data[i].CmsEvents.EndTime;
endinTime = endinTime.slice(6, 16);
var bd = new Date(beginTime * 1000);　　　　　　//获取现在的时间
var ed = new Date(endinTime * 1000);
var bdtime = (bd.getFullYear()) + "." +　　　　　　　　//拼接成想要的格式，以“。”分隔
(bd.getMonth() + 1) + "." +
(bd.getDate());
var edtime = (ed.getFullYear()) + "." +
(ed.getMonth() + 1) + "." +
(ed.getDate());

用的比较low的办法

5.从后台获取的gps数据，需要绑定到前台，没有很好的办法，只能用canvas写，且建筑物在地图上的位置没有规律可循。所以就一个个写在获取gps成功的callback里。另外一定要记得引入百度地图的js。之前忘记了，一直获取不到坐标。