高德地图 + turf 完成曲面绘制

效果如下

初始方式:高德没有曲面这个绘制方式,初始使用绘制工具绘制密集一些的线段,再进行组合,生成一组贝瑟尔曲线能用的数组,不过生成出来的效果不理想。后来找经常画图的高人指点了下,说了下我当前绘制的思路,让我用turf,然后一点点去找方法,看得头疼。

Turf中文网

最后发现这里也有个贝塞尔曲线

npm install @turf/turf
import { lineString , bezierSpline } from '@turf/turf'
arrlist:是绘制线之后得到的一个个点,最后追加了一个初始点,让其闭合,再使用turf的lineString方法把这些点组成线,再用bezierSpline把线变成贝塞尔曲线多边形,最后用高德生成多边形的方法把生成的数据传进去。
var line = lineString(arrlist);

                    var curved = bezierSpline(line);

                    let json_list = new AMap.Polygon({
                                path: curved.geometry.coordinates,
                                fillOpacity: .5,
                                strokeColor: color,
                                strokeWeight: 1,
                                fillColor: color,
                                map: window.ZTAmap
                            });

                    window.ZTAmap.add(json_list);
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值