GIS开发:胖箭头的画法

之前分享过在两类地图上的箭头画法,效果是单线,顶部加了箭头的效果,这里分享一下在地图上胖箭头的画法。
胖箭头是在箭头的首尾两点上,横向进行了扩充,最后以面状图层的形式画出来。
在这里插入图片描述
胖箭头根据首尾两点生成面的方式:
–将首尾两点连接成直线,计算直线在地图中的北方向夹角,可以使用turf.js进行计算;
–计算和首尾直线垂直的6个点,分别是箭头尾部的两个点和箭头头部的4个样式点,turf.js中有方法计算这6个点,可以参见文章开始的简单箭头中的方法;
在这里插入图片描述
–将以上的6个点按照顺序连接起来,形成面状的效果,就能在地图上达到以下的胖箭头形状;
在这里插入图片描述
–在尾部的附近取一个点,重新进行面的连接,就能够实现箭头的燕尾效果,参见下图绿色线的效果;
在这里插入图片描述
地图上标绘效果,都能按照一定的算法进行计算,只不过按照经纬度的单位,需要进行一定的转换,使用一些开源的类库,能够解决不少问题。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值