在地图开发中,有时会用到画曲线,一般的地图API中,都会提供画曲线的方法,或者提供相应的图例。

下边简单的介绍一下,如何在地图上根据点的位置,画一条贝塞尔曲线。

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如PhotoShop等。–来自百科

在地图上画的时候,小范围画的时候,经纬度坐标或者平面坐标系的方式差不多,大范围的时候,尽量要将经纬度转换成长度单位(例如米制)来进行画,因为算法的时候,计算的都是根据相应的距离。

贝塞尔的算法,在github上可以搜索到很多,根据自己的开发语言选择其中的一类即可。

android 画贝塞尔控制点 怎么用贝塞尔工具画图_曲线


简单的js示例:https://github.com/Aaaaaaaty/bezierMaker.js在画曲线的时候,最少需要3个点才能进行勾画,传入3个以上点的坐标,即可生成曲线效果。

android 画贝塞尔控制点 怎么用贝塞尔工具画图_地图_02


本身这个算法开源的就很多,在地图上画的时候,只是涉及到经纬度,是弧度制的单位,画起来会有相应的顾虑,理解其中的原理,直接传入距离类型的坐标,就能画出以上这种曲线的效果。

注:在三维的球面地图上画曲线的时候,要把高度的值也作为一个因素传入进去,要不然画的效果达不到。