javascript – Google Maps API:Bézier曲线折线包装

通过使用贝塞尔曲线折线绘制功能provided by nicoabie,我能够从地图上的一个点到另一个点绘制一条曲线.问题是这个函数没有考虑这样一个事实:当一个点超过最大坐标标记时,它不一定在地图的另一边,因为它包裹着.

例如,从西雅图到东京画一条曲线.常规折线将穿过太平洋,但曲线向东穿过整个地球.

geodesic:true在这种情况下不起作用,因为该行必须具有一致的曲率.

我的问题是:是否可以画出一致的曲线来考虑地图包装?

解决方法:

使用google.maps.LatLng class的第三个“nowrap”参数选项强制所有相关点具有相同的符号(将其设置为true,默认为false).

gmarkers[10].setPosition(new google.maps.LatLng(35.689488,139.69170)); // Tokyo
gmarkers[0].setPosition(new google.maps.LatLng(47.60621,(360-122.332071),true)); // Seattle
boundsCenter.setPosition(new google.maps.LatLng(36.096756,(360-178.986565),true)); // control point 1
gmarkers[6].setPosition(new google.maps.LatLng(48.511996,180)); // control point 2

var curvedLine = new GmapsCubicBezier(gmarkers[0].getPosition().lat(), gmarkers[0].getPosition().lng(), boundsCenter.getPosition().lat(), boundsCenter.getPosition().lng(), gmarkers[6].getPosition().lat(), gmarkers[6].getPosition().lng(), gmarkers[10].getPosition().lat(), gmarkers[10].getPosition().lng(), 0.01, map);

working fiddle

上一篇:java – PorterDuffXfermode DST_IN无法按预期工作


下一篇:使用XOR绘制JavaScript / HTML5以删除旧的精灵