Google maps 在谷歌地图上的WebGL中渲染时的投影漂移

我正试图在谷歌地图（api3）上实现一个基于WebGL的渲染，因为我想渲染大量的动态几何图形

基本上，我创建了一个google.maps.OverlayView，并将WebGL画布连接到地图中

但是，我在映射投影时遇到了一些问题。基本上，我从googlemap api中提取了“fromLatLngToPoint”函数，如下所示：

function fromLatLngToPoint(a){
        var c={x:0,y:0},
        d=this.j;

        c.x=d.x+a.lng*this.B;

        var e=oe(m.sin(re(a.lat)),-(1-1E-15),1-1E-15);

        c.y=d.y+.5*m.log((1+e)/(1-e))*-this.F;
        return c
}

function oe(a,b,c){null!=b&&(a=m.max(a,b));null!=c&&(a=m.min(a,c));return a}

function re(a){return m.PI/180*a}

然后，我根据中的文档在顶点着色器中实现了它

基本上，我有一个事件侦听器将更新的投影常量、视口边界和缩放级别发送到我的着色器

然后，我的着色器将根据这些输入计算新的屏幕坐标

    highp float e, x, y, offsetY, offsetX;

    // projection transformation for target points
    e = sin(p.y* PI/180.0);
    y = prj_y + 0.5 * log((1.0+e)/(1.0-e))*(-F);
    x = prj_x + p.x*B;

    // projection transformation for offset (bounds)
    e = sin(bound_y*PI/180.0);
    offsetY = prj_y + 0.5 * log((1.0+e)/(1.0-e))*(-F);
    offsetX = prj_x + bound_x*B;

    // calculate actual pixel coord wrt zoom/numTiles
    x = (x* numTiles - offsetX* numTiles);
    y = (y* numTiles - offsetY* numTiles);  

    gl_PointSize = 5.0;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(x,y,0.0,1.0);

但是，如下面的截图所示，似乎有一些错误？渲染的几何体被扭曲。（我使用谷歌地图多边形api渲染了一些几何图形作为比较）

我完全不知所措，这种扭曲的原因可能是什么

---

我怀疑着色器中的单一精度会导致错误。因此，我想知道是否有任何解决方法？

很难调试这段代码并诊断问题的原因。我建议您使用这个库来隐藏指定要绘制多边形的坐标的所有具体细节。相反，你将能够专注于你的应用程序代码和功能。在投影图像方面，性能会更好。

感谢链接。我当前的代码与CanvasLayer非常相似，但没有帮助。我的主要问题是投影，这在CanvasLayer中也没有解决-他正在使用世界坐标进行绘图。我需要将LatLng和各种地理坐标投影到谷歌世界坐标中。这导致了一些扭曲，如屏幕截图所示。我无法使用google map API进行投影，因为我有大量的几何体，javascript的速度不够快，无法实时进行投影，并且在每个渲染循环中将更新后的坐标推送到着色器中会浪费带宽。