Google Maps API：贝塞尔曲线折线包装 [英] Google Maps API: Bézier curve polyline wrap

问题描述

通过使用贝尼尔曲线折线绘制功能由nicoabie提供我能够从地图上的一个点绘制出一条曲线到另一个点。问题是这个函数并没有考虑到这样一个事实，即当一个点超过最大坐标点时，它不一定在地图的另一边，因为它绕了一圈。

例如，绘制从西雅图到东京的曲线。一条正常的折线会横跨太平洋，但是曲线在全球范围内东移。

geodesic：true 在这种情况下不起作用，因为这条线必须具有一致的曲率。

我的问题是：是否可以绘制一条连续的曲线，到帐户映射包装？

解决方案

使用选项第三个nowrap参数 google.maps.LatLng class 强制所有相关点具有相同的符号（将其设置为

  gmarkers [10] .setPosition（new google.maps.LatLng（35.689488,139.69170） ）; //东京
 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））; //控制点1 
 gmarkers [6] .setPosition（new google.maps.LatLng（48.511996,180））; //控制点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）; 
  

工作小提琴

By using the Bezier curve polyline draw function provided by nicoabie I was able to draw a curved line from one point on the map to another. The problem is that this function does not take in to account the fact that when a point is past the maximum coordinate mark it is not necessarily on the other side of the map, since it wraps around.

For example, drawing a curved line from Seattle to Tokyo. A regular polyline would go across the Pacific ocean, but the the curved line draws east across the whole globe.

geodesic: true does not work in this case since the line must have a consistent curvature.

My question is: can a consistently curved line be drawn that takes in to account map wrapping?

解决方案

Use the option third "nowrap" argument of the google.maps.LatLng class to force all the relevant points to have the same sign (set it to true, it defaults to 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

这篇关于Google Maps API：贝塞尔曲线折线包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！