canvas画线API实现简单地图

做一个青海项目时,涉及到地图,简单显示青海省个地区的用了一个svg插件,要求显示热点数据的就用了百度的地图API。地图的确高大上。

回顾一、后台老大哥负责跟客户沟通的,突然有一天客户要求说登录页显示地区的地图要有3D效果。心里顿时有一万匹草泥马奔过~~

                百度许久,没找到可用的方案,最终这种需求被开发说了No!

回顾二、另一个系统的登录页,因为用户要选择自己所在的地区才可以登录。要求下拉框选中地区时,对应的地图区域自动高亮;选中区域时,下拉框自动选中对应区域。

                没办法,只有深入分析源码。源码还好没有uglify,不然要死去活来。没注释就只有代码即注释。但里面的函数调用有点反人类。花了半天时间还是解决问题了。

虽然岗位是前端,但对图形学还是感兴趣的。于是就打算写个简单的地图~谈不上造轮子,算是前期的技术储备吧。

关于为什么造轮子,这个值得一看:http://blog.csdn.net/foruok/article/details/51403890

下面进入正题。

涉及到的知识点:

  1. 点在多边形内算法:https://www.zhihu.com/question/26551754/answer/33185339
  2. 3次贝塞尔曲线算法

给定散点数组,绘制光滑的闭合曲线。虽然canvas有贝塞尔曲线的API,但这样就不好判断指定点是否在闭合曲线美了。

不用svg,那样岂不是显得自己很low?而且还要先计算好控制点。作为一名(I)程(am)序(front)员(end),重复的工作必须用编程解决!!!

找过不少拟合闭合曲线平滑的文章没什么收获,只能用贝塞尔曲线,但都被控制点的计算问题拦了下拉,毕竟工作之外的时间很宝贵,太复杂的算法太耗时间(我数学不好)。

     终于两天前意外发现了一篇文章,提出了简便解决控制点计算的问题。

    传送门:http://blog.csdn.net/hzsjun/article/details/24958773

    之前就已经实现了知识点1,一个晚上就大致完成了地图。今晚发现有bug,修改了下就打算写这篇文章。

   开始工作时有点忙,而且人有比较懒,都没怎么写博客。

  来两张图:(红点是数据点)

canvas画线API实现简单地图_第1张图片canvas画线API实现简单地图_第2张图片

水印竟然不是我的大名,要它干嘛?

最后附上下载地址:sorry,刚刚上传等有时间来更新~如果忘了,可以给我留言~

补上地址:http://download.csdn.net/detail/ruanjiayou123/9700407


你可能感兴趣的:(javascript)