Geometry precision (#2)

* Increase precision of points lines and shapes by translating them closer to the Pixel Origin * change type of mapCenterPixels to IPixel * change type of mapCenterPixels to IPixel --------- Co-authored-by: RayLarone <[email protected]>
robertleeplummerjr · Jun 1, 2024 · 3d5def5 · 3d5def5
1 parent 5139808
commit 3d5def5
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 19 deletions.
diff --git a/src/base-gl-layer.ts b/src/base-gl-layer.ts
@@ -1,6 +1,7 @@
 import { LeafletMouseEvent, Map } from "leaflet";
 
 import { IColor } from "./color";
+import { IPixel } from "./pixel"
 import { CanvasOverlay, ICanvasOverlayDrawEvent } from "./canvas-overlay";
 import { notProperlyDefined } from "./errors";
 import { MapMatrix } from "./map-matrix";
@@ -69,6 +70,7 @@ export abstract class BaseGlLayer<
   vertexShader: WebGLShader | null;
   vertices: any;
   vertexLines: any;
+  mapCenterPixels: IPixel;
 
   buffers: { [name: string]: WebGLBuffer } = {};
   attributeLocations: { [name: string]: number } = {};
@@ -153,6 +155,11 @@ export abstract class BaseGlLayer<
     this.matrix = null;
     this.vertices = null;
     this.vertexLines = null;
+    try{
+      this.mapCenterPixels =  this.map.project(this.map.getCenter(), 0)
+    } catch(err){
+      this.mapCenterPixels = {x:-0,y:-0}
+    }
     const preserveDrawingBuffer = Boolean(settings.preserveDrawingBuffer);
     const layer = (this.layer = new CanvasOverlay(
       (context: ICanvasOverlayDrawEvent) => {

diff --git a/src/line-feature-vertices.test.ts b/src/line-feature-vertices.test.ts
@@ -13,6 +13,7 @@ describe("LineFeatureVertices", () => {
     longitudeKey: 1,
     opacity: 1,
     weight: 1,
+    mapCenterPixels: {x:0,y:0},
   };
   describe("constructor", () => {
     it("sets this.settings, this.vertexCount, and this.array correctly", () => {

diff --git a/src/line-feature-vertices.ts b/src/line-feature-vertices.ts
@@ -10,6 +10,7 @@ interface ILineFeatureVerticesSettings {
   latitudeKey: number;
   longitudeKey: number;
   opacity: number;
+  mapCenterPixels: IPixel;
 }
 
 export class LineFeatureVertices {
@@ -35,6 +36,7 @@ export class LineFeatureVertices {
       project,
       latitudeKey,
       longitudeKey,
+      mapCenterPixels,
     } = this.settings;
     for (let i = 0; i < coordinates.length; i++) {
       if (Array.isArray(coordinates[i][0])) {
@@ -50,8 +52,8 @@ export class LineFeatureVertices {
       const pixel = project(latLng, 0);
       this.pixels.push(pixel);
       this.push(
-        pixel.x,
-        pixel.y,
+        pixel.x - mapCenterPixels.x,
+        pixel.y - mapCenterPixels.y,
         color.r,
         color.g,
         color.b,

diff --git a/src/lines.ts b/src/lines.ts
@@ -131,6 +131,7 @@ export class Lines extends BaseGlLayer<ILinesSettings> {
       data,
       bytes,
       settings,
+      mapCenterPixels,
     } = this;
     const { eachVertex } = settings;
     const { features } = data;
@@ -171,6 +172,7 @@ export class Lines extends BaseGlLayer<ILinesSettings> {
         color: chosenColor,
         weight: chosenWeight,
         opacity,
+        mapCenterPixels,
       });
 
       featureVertices.fillFromCoordinates(feature.geometry.coordinates);
@@ -237,6 +239,7 @@ export class Lines extends BaseGlLayer<ILinesSettings> {
       weight,
       aPointSize,
       bytes,
+      mapCenterPixels,
     } = this;
     const { scale, offset, zoom } = e;
     this.scale = scale;
@@ -246,7 +249,7 @@ export class Lines extends BaseGlLayer<ILinesSettings> {
     gl.vertexAttrib1f(aPointSize, pointSize);
     mapMatrix.setSize(canvas.width, canvas.height).scaleTo(scale);
     if (zoom > 18) {
-      mapMatrix.translateTo(-offset.x, -offset.y);
+      mapMatrix.translateTo((-offset.x + mapCenterPixels.x), (-offset.y + mapCenterPixels.y));
       // -- attach matrix value to 'mapMatrix' uniform in shader
       gl.uniformMatrix4fv(matrix, false, mapMatrix.array);
 
@@ -257,8 +260,8 @@ export class Lines extends BaseGlLayer<ILinesSettings> {
         for (let xOffset = -weight; xOffset <= weight; xOffset += 0.5) {
           // -- set base matrix to translate canvas pixel coordinates -> webgl coordinates
           mapMatrix.translateTo(
-            -offset.x + xOffset / scale,
-            -offset.y + yOffset / scale
+            (-offset.x + mapCenterPixels.x) + xOffset / scale,
+            (-offset.y + mapCenterPixels.y) + yOffset / scale
           );
           // -- attach matrix value to 'mapMatrix' uniform in shader
           gl.uniformMatrix4fv(matrix, false, mapMatrix.array);
@@ -286,8 +289,8 @@ export class Lines extends BaseGlLayer<ILinesSettings> {
           ) {
             // -- set base matrix to translate canvas pixel coordinates -> webgl coordinates
             mapMatrix.translateTo(
-              -offset.x + xOffset / scale,
-              -offset.y + yOffset / scale
+              (-offset.x + mapCenterPixels.x) + xOffset / scale,
+              (-offset.y + mapCenterPixels.y) + yOffset / scale
             );
             // -- attach matrix value to 'mapMatrix' uniform in shader
             gl.uniformMatrix4fv(this.matrix, false, mapMatrix.array);

diff --git a/src/points.ts b/src/points.ts
@@ -152,6 +152,7 @@ export class Points extends BaseGlLayer<IPointsSettings> {
       color,
       opacity,
       data,
+      mapCenterPixels,
     } = this;
     const { eachVertex } = settings;
     let colorFn:
@@ -204,8 +205,8 @@ export class Points extends BaseGlLayer<IPointsSettings> {
 
         vertices.push(
           // vertex
-          pixel.x,
-          pixel.y,
+          pixel.x - mapCenterPixels.x,
+          pixel.y - mapCenterPixels.y,
 
           // color
           chosenColor.r,
@@ -257,8 +258,8 @@ export class Points extends BaseGlLayer<IPointsSettings> {
 
         vertices.push(
           // vertex
-          pixel.x,
-          pixel.y,
+          pixel.x - mapCenterPixels.x,
+          pixel.y - mapCenterPixels.y,
 
           // color
           chosenColor.r,
@@ -300,15 +301,15 @@ export class Points extends BaseGlLayer<IPointsSettings> {
   drawOnCanvas(e: ICanvasOverlayDrawEvent): this {
     if (!this.gl) return this;
 
-    const { gl, canvas, mapMatrix, matrix, map, allLatLngLookup } = this;
+    const { gl, canvas, mapMatrix, matrix, map, allLatLngLookup, mapCenterPixels } = this;
     const { offset } = e;
     const zoom = map.getZoom();
     const scale = Math.pow(2, zoom);
     // set base matrix to translate canvas pixel coordinates -> webgl coordinates
     mapMatrix
       .setSize(canvas.width, canvas.height)
       .scaleTo(scale)
-      .translateTo(-offset.x, -offset.y);
+      .translateTo(-offset.x + mapCenterPixels.x, -offset.y + mapCenterPixels.y);
 
     gl.clear(gl.COLOR_BUFFER_BIT);
     gl.viewport(0, 0, canvas.width, canvas.height);

diff --git a/src/shapes.ts b/src/shapes.ts
@@ -135,6 +135,7 @@ export class Shapes extends BaseGlLayer {
       borderOpacity, // TODO: Make lookup for each shape priority, then fallback
       color,
       data,
+      mapCenterPixels,
     } = this;
     let pixel;
     let index;
@@ -224,8 +225,8 @@ export class Shapes extends BaseGlLayer {
       for (let i = 0, iMax = triangles.length; i < iMax; i) {
         pixel = map.project(new LatLng(triangles[i++], triangles[i++]), 0);
         vertices.push(
-          pixel.x,
-          pixel.y,
+          pixel.x - mapCenterPixels.x,
+          pixel.y - mapCenterPixels.y,
           chosenColor.r,
           chosenColor.g,
           chosenColor.b,
@@ -243,8 +244,8 @@ export class Shapes extends BaseGlLayer {
         for (let i = 0, iMax = lines.length; i < iMax; i) {
           pixel = latLonToPixel(lines[i++], lines[i++]);
           vertexLines.push(
-            pixel.x,
-            pixel.y,
+            pixel.x - mapCenterPixels.x,
+            pixel.y - mapCenterPixels.y,
             chosenColor.r,
             chosenColor.g,
             chosenColor.b,
@@ -261,12 +262,12 @@ export class Shapes extends BaseGlLayer {
     if (!this.gl) return this;
 
     const { scale, offset, canvas } = e;
-    const { mapMatrix, gl, vertices, settings, vertexLines, border } = this;
+    const { mapMatrix, gl, vertices, settings, vertexLines, border, mapCenterPixels } = this;
     // -- set base matrix to translate canvas pixel coordinates -> webgl coordinates
     mapMatrix
       .setSize(canvas.width, canvas.height)
       .scaleTo(scale)
-      .translateTo(-offset.x, -offset.y);
+      .translateTo(-offset.x + mapCenterPixels.x, -offset.y + mapCenterPixels.y);
 
     gl.clear(gl.COLOR_BUFFER_BIT);
     gl.viewport(0, 0, canvas.width, canvas.height);