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

最新推荐文章于 2024-04-11 17:03:40 发布

原创最新推荐文章于 2024-04-11 17:03:40 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

效果如下

初始方式：高德没有曲面这个绘制方式，初始使用绘制工具绘制密集一些的线段，再进行组合，生成一组贝瑟尔曲线能用的数组，不过生成出来的效果不理想。后来找经常画图的高人指点了下，说了下我当前绘制的思路，让我用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);