Сдвиг проекции при рендеринге в WebGL над Google Map

Question

Я пытаюсь реализовать рендеринг на основе WebGL на Карте Google (api3), поскольку я хочу отобразить огромное количество динамических геометрий.

В принципе, я создаю google.maps.OverlayView, прикрепленный к холсту WebGL.

Однако у меня возникла проблема с отображением проекции. В принципе, я извлек функцию «fromLatLngToPoint» из GoogleMap API следующим образом:

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} 

Тогда я реализовал это в моем вершинном шейдере на основе документации в Google Map Coordinates.

В принципе, у меня есть прослушиватель событий для отправки обновленных проекционных констант, границ области просмотра и уровня масштабирования в мой шейдер.

Затем мой шейдер будет вычислять новые координаты экрана на основе этих входов.

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); 

Однако, как показано на скриншоте ниже, кажется, что есть некоторые ошибки? Излученные геометрии искажены. (Я использовал Google карта полигона API, чтобы сделать некоторые из геометрии, как сравнение)

Screenshot Here

Я полностью в недоумении, что может быть причиной этого искажения?

Я подозреваю, что единственная точность в шейдере приводит к ошибке. Так что мне интересно, есть ли способ обхода?

Answer 1

Трудно отладить этот кусок кода и диагностировать причину проблемы. Я бы предложил вам использовать библиотеку CanvasLayer, которая скрывает все эти конкретные детали определения координат, которые вы хотите нарисовать многоугольником. Скорее всего, вы сможете сосредоточиться на своем коде и функциональности вашего приложения. Производительность будет лучше с точки зрения прогнозируемого изображения.