Projection touch ups

NASA-AMMOS · Jul 22, 2021 · 795c84a · 795c84a
1 parent 8c1ce09
commit 795c84a
Show file tree

Hide file tree

Showing 10 changed files with 2,320 additions and 72 deletions.
diff --git a/dist/lithosphere.js b/dist/lithosphere.js
diff --git a/dist/src/core/CRS.d.ts b/dist/src/core/CRS.d.ts
@@ -5,8 +5,9 @@ export default class CRS {
     _scales: number[];
     R: number;
     constructor(code: string, proj: string, options: any, radius: number);
-    project(latlng: any): any;
-    unproject(point: any, zoom: any): any;
+    project(latlng: any, zoom: any, ll2p: any): any;
+    unproject(point: any, zoom: any, p2ll: any): any;
+    latLngToPoint(latlng: any, zoom: any): any;
     pointToLatLng(point: any, zoom: any): any;
     scale(zoom: number): number;
 }
diff --git a/examples/example.html b/examples/example.html
@@ -40,6 +40,7 @@
                     lat: -4.626971631163808,
                     zoom: 16,
                 },
+                majorRadius: 3396190,
                 loadingScreen: true, // default true
                 customParsers: {
                     All500: (tilePath, layerObj) => {

diff --git a/examples/exampleProj.html b/examples/exampleProj.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>LithoSphere Demo</title>
+
+        <script src="../dist/lithosphere.js"></script>
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                background: black;
+            }
+            #container {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            #myCustomCoordDiv {
+                position: absolute;
+                top: 10px;
+                left: 50%;
+                transform: translateX(-50%);
+                background: white;
+                color: black;
+                padding: 2px 4px;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="container"></div>
+        <!--<div id="myCustomCoordDiv"></div>-->
+        <script>
+            const Litho = new LithoSphere.default('container', {
+                initialView: {
+                    lng: 0, // default 0
+                    lat: -89.9,
+                    zoom: 0,
+                },
+                majorRadius: 1737400,
+                tileMapResource: {
+                    // minx, miny, maxx, maxy
+                    bounds: [-1095700 - 1095600, 1095600, 1095700],
+                    origin: [-1095700, -1095600],
+                    crsCode: 'IAU2000:30166,0,-89.9',
+                    proj:
+                        '+proj=stere +lat_0=-89.9 +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs', // proj4 string describing the global tileset projection: string (opt) | default wgs84
+                    resunitsperpixel: 128000,
+                    reszoomlevel: 0,
+                },
+                //radiusOfTiles: 3,
+                useLOD: false,
+                //wireframeMode: true,
+                starsphere: {
+                    url:
+                        'https://miplmmgis.jpl.nasa.gov/public/images/eso0932a.jpg',
+                    color: '#444444',
+                },
+                atmosphere: {
+                    color: '#222227',
+                },
+            })
+
+            console.log(Litho)
+
+            Litho.addLayer('tile', {
+                name: 'Mars',
+                order: 1, //Orders are ordered only within the layer type
+                on: true,
+                path:
+                    'http://localhost:8889/Missions/Projections/Layers/Basemap/MarsDEM/LRO_WAC_Mosaic_SPole60_100m_v2/{z}/{x}/{y}.png',
+                demPath: null,
+                format: 'tms', // 'wmts' || 'wms' // wms requires a tileMapResource to be set to help compute tile bboxes
+                formatOptions: {},
+                demFormat: 'tms', //
+                demFormatOptions: {},
+                opacity: 1,
+                minZoom: 0,
+                maxZoom: 10,
+            })
+
+            Litho.addControl('myLayers', Litho.controls.layers)
+            Litho.addControl('myCompass', Litho.controls.compass)
+            Litho.addControl('myCoords', Litho.controls.coordinates)
+        </script>
+    </body>
+</html>
diff --git a/examples/exampleWMS.html b/examples/exampleWMS.html
@@ -41,19 +41,6 @@
                     zoom: 0,
                 },
                 majorRadius: 1737400,
-                customParsers: {
-                    All500: (tilePath, layerObj) => {
-                        return new Promise((resolve, reject) => {
-                            const tileDimension = 32
-                            resolve(
-                                new Array(tileDimension * tileDimension).fill(
-                                    500
-                                )
-                            )
-                        })
-                    },
-                },
-                //opt
                 tileMapResource: {
                     //bounds: [-868700, -868700, 868700, 868700],
                     //origin: [-868700, -868700],

diff --git a/examples/exampleWMSPolar.html b/examples/exampleWMSPolar.html
@@ -38,25 +38,10 @@
                 initialView: {
                     lng: 0, // default 0
                     lat: -89.9,
-                    zoom: 0,
+                    zoom: 2,
                 },
                 majorRadius: 1737400,
-                customParsers: {
-                    All500: (tilePath, layerObj) => {
-                        return new Promise((resolve, reject) => {
-                            const tileDimension = 32
-                            resolve(
-                                new Array(tileDimension * tileDimension).fill(
-                                    500
-                                )
-                            )
-                        })
-                    },
-                },
-                //opt
                 tileMapResource: {
-                    //bounds: [-868700, -868700, 868700, 868700],
-                    //origin: [-868700, -868700],
                     bounds: [-1737400, -1737400, 1737400, 1737400],
                     origin: [-1737400, 1737400],
                     crsCode: 'IAU2000:30166,-89.9,0',

diff --git a/examples/exampleWMSwithDEM.html b/examples/exampleWMSwithDEM.html
@@ -41,30 +41,15 @@
                     zoom: 14,
                 },
                 majorRadius: 1737400,
-                customParsers: {
-                    All500: (tilePath, layerObj) => {
-                        return new Promise((resolve, reject) => {
-                            const tileDimension = 32
-                            resolve(
-                                new Array(tileDimension * tileDimension).fill(
-                                    500
-                                )
-                            )
-                        })
-                    },
-                },
                 //tileResolution: 3, // Good for debugging
-                //opt
                 tileMapResource: {
-                    //bounds: [-868700, -868700, 868700, 868700],
-                    //origin: [-868700, -868700],
                     bounds: [-1737400, -1737400, 1737400, 1737400],
                     origin: [-1737400, 1737400],
                     crsCode: 'IAU2000:30166,31.1492746341015,-85.391176037601',
                     proj:
                         '+proj=stere +lat_0=-85.391176037601 +lon_0=31.1492746341015 +k=1 +x_0=0 +y_0=0 +a=1737400 +b=1737400 +units=m +no_defs', // proj4 string describing the global tileset projection: string (opt) | default wgs84
                     resunitsperpixel: 8192,
-                    reszoomlevel: 3,
+                    reszoomlevel: 0,
                 },
                 //radiusOfTiles: 3,
                 //useLOD: false,

diff --git a/src/core/crs.ts b/src/core/crs.ts
@@ -41,14 +41,21 @@ export default class CRS {
         }
     }
 
-    project(latlng) {
+    project(latlng, zoom, ll2p) {
         return this.projection.project(latlng)
     }
 
-    unproject(point, zoom) {
+    unproject(point, zoom, p2ll) {
         return this.projection.unproject(point)
     }
 
+    latLngToPoint(latlng, zoom) {
+        const projectedPoint = this.projection.project(latlng)
+        const scale = this.scale(zoom)
+
+        return this.transformation._transform(projectedPoint, scale)
+    }
+
     pointToLatLng(point, zoom) {
         const scale = this.scale(zoom)
         const untransformedPoint = this.transformation.untransform(point, scale)

diff --git a/src/core/projection.ts b/src/core/projection.ts
@@ -56,9 +56,14 @@ export default class Projection {
             this.tileMapResource.resunitsperpixel != null &&
             this.tileMapResource.reszoomlevel != null
         ) {
+            let reszoomlevel = this.tileMapResource.reszoomlevel
+            reszoomlevel += Math.round(
+                (4 * Math.PI * Math.pow(3396190, 2)) /
+                    (4 * Math.PI * Math.pow(this.radii.major, 2))
+            )
             const baseRes =
                 this.tileMapResource.resunitsperpixel *
-                Math.pow(2, this.tileMapResource.reszoomlevel)
+                Math.pow(2, reszoomlevel)
             const res = []
             for (let i = 0; i < 32; i++) {
                 res.push(baseRes / Math.pow(2, i))
@@ -178,18 +183,7 @@ export default class Projection {
                 (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)))
             return { lat: lat, lng: lng }
         } else {
-            //In these projections the origin is bottom left instead of top left
-            //So flip the decimal value
-            /*
-            const dec = y % 1
-            if (dec != 0) y = Math.floor(y) + (1 - dec)
-            else if (flatXYZ) {
-                if (y == flatXYZ.y) y = flatXYZ.y + 1
-                else y = flatXYZ.y
-            }
-            */
-
-            y = -y // For WMS
+            y = -y
 
             const easting =
                 this.trueTileResolution * x * this.res[z] +
@@ -238,10 +232,8 @@ export default class Projection {
                 (northing - this.tileMapResource.origin[1]) /
                 (this.trueTileResolution * this.res[z])
 
-            //In these projections the origin is bottom left instead of top left
-            //So flip the decimal value back
-            //y = Math.floor(y) + (1 - (y % 1))
-            y = -y // For WMS
+            y = -y
+
             return { x: x, y: y, z: z }
         }
     }

diff --git a/src/core/tiledWorld.ts b/src/core/tiledWorld.ts
@@ -923,8 +923,6 @@ export default class TiledWorld {
 
     removeTile(i: number, shouldFadeOut?: boolean): void {
         if (this.tilesDrawn[i]) {
-            // [false] shouldFadeOut works but for some reason the center tiles blacken
-            //         briefly after everything loads. So off for now
             if (shouldFadeOut) {
                 this.tilesDrawn[i].fadeOutAndRemove = true
                 // Note that we aren't removing it for tilesDrawn just yet
@@ -1023,7 +1021,7 @@ export default class TiledWorld {
                                 ].value = Math.min(
                                     this.tilesDrawn[m].t.material.uniforms[
                                         'tA' + n
-                                    ].value + 0.07,
+                                    ].value + 0.1,
                                     desiredOpacity
                                 )
                             } else {
@@ -1032,7 +1030,7 @@ export default class TiledWorld {
                                 ].value = Math.max(
                                     this.tilesDrawn[m].t.material.uniforms[
                                         'tA' + n
-                                    ].value - 0.07,
+                                    ].value - 0.1,
                                     desiredOpacity
                                 )
                             }
@@ -1062,7 +1060,7 @@ export default class TiledWorld {
                     ) {
                         const nextOpacity = Math.max(
                             this.tilesDrawn[i].t.material.uniforms['tA' + n]
-                                .value - 0.07,
+                                .value - 0.1,
                             0
                         )
                         if (nextOpacity <= 0) this.removeTile(i)