- grid coordinate layer with horizontal x values

- only DemLayer and TinLayer in LayerControl
- toggling visibility of grid coordinate layer in analysis tab

index.html

@@ -129,6 +129,14 @@
                                 </div>
                             </div>
 
+                            <div class="panel-section section-functions">
+                                <h5>Functions</h5>
+                                <label>
+                                    <input type="checkbox" id="chkGrid" autocomplete="off" checked>
+                                    <span class="label-body">set visibility of coordinate grid</span>
+                                </label>
+                            </div>
+
                         </div>
                     </div>
                 </div>

src/js/controls/LayerControl.css

@@ -74,7 +74,7 @@ height: 31py;
 
 vertical-align: super;
 }
-input[type=checkbox] {
+.gba-controllayers input[type=checkbox] {
      position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 

src/js/controls/LayerControl.js

@@ -3,7 +3,8 @@ import { Group } from 'three/src/objects/Group';
 import * as util from '../core/utilities';
 import * as dom from '../core/domUtil';
 import * as domEvent from '../core/domEvent';
-
+import { DemLayer } from "../layer/DemLayer";
+import { TinLayer } from "../layer/TinLayer";
 import './LayerControl.css';
 
 export class LayerControl extends Control {
@@ -36,7 +37,10 @@ export class LayerControl extends Control {
         util.setOptions(this, options);
 
         for (let i in overlayLayers) {
-            this._addLayer(overlayLayers[i], overlayLayers[i].name, true);
+            let overlayLayer = overlayLayers[i];
+            if (overlayLayer instanceof DemLayer || overlayLayer instanceof TinLayer) {
+                this._addLayer(overlayLayers[i], overlayLayers[i].name, true);
+            }
         }
     }
 

src/js/layer/GridLayer.js

@@ -49,6 +49,18 @@ export class GridLayer extends Layer {
         this.emit('visibility-change');
     }
 
+    toggle () {
+        this.visible = visible;
+        var visible = !this.objectGroup.visible;
+        this.objectGroup.visible = visible;
+        //this._map.update();
+        if (this.labels.length != 0) {
+            this.labelConnectorGroup.visible = visible;
+            this.labelParentElement.style.display = (this.objectGroup.visible == true) ? "block" : "none";
+        }
+        this._map.update();
+    }
+
     onRemove(map) {
         this.getScene().remove(this.objectGroup);
     }
@@ -133,6 +145,7 @@ export class GridLayer extends Layer {
         // for (let k = - halfSize; k <= halfSize; k = k + step) {
         for (let k = this._map.x.min; k <= this._map.x.max; k = k + step) {
             vertices.push(k, constant_position, this._map.z.max, k, constant_position, this._map.z.min);//senkrecht
+            vertices.push(k, this._map.y.min, this._map.z.min, k, this._map.y.max, this._map.z.min);
             // vertices.push(-halfSize, constant_position, k, halfSize, constant_position, k);//waagrecht 
 
         }
@@ -176,8 +189,10 @@ export class GridLayer extends Layer {
         // for (let k = - halfSize; k <= halfSize; k = k + step) {
         for (let k = this._map.x.min; k <= this._map.x.max; k = k + step) {
             let xCoordinate = (k % 1 != 0) ? Math.round(k) : k;
-            let info = { a: xCoordinate + ' m', size: step, axis: "x", color: 0xff0000, cl: "red-label", h: 0.6, centroid: [[k, this._map.y.max, this._map.z.max]] };
+            let info = { a: xCoordinate + ' m', dir: 'vertical', size: step, axis: "x", color: 0xff0000, cl: "red-label", h: 0.6, centroid: [[k, this._map.y.max, this._map.z.max]] };
             labels.push(info);
+            let info2 = { a: xCoordinate + ' m', dir: 'horizontal', size: step, axis: "x", color: 0xff0000, cl: "red-label", h: 0.6, centroid: [[k, this._map.y.min, this._map.z.min]] };
+            labels.push(info2);
         }
 
         let ySize = this._map.width;
@@ -248,7 +263,11 @@ export class GridLayer extends Layer {
                 let pt0, pt1;
                 if (f.axis == "x") {
                     pt0 = new Vector3(pt[0], pt[1], pt[2]);    // bottom
-                    pt1 = new Vector3(pt[0] + horizontalShiftLabel, pt[1], pt[2] + f.size / 2);    // top    
+                    if (f.dir == 'vertical') {
+                        pt1 = new Vector3(pt[0] + horizontalShiftLabel, pt[1], pt[2] + f.size / 2);    // top    
+                    } else if (f.dir == 'horizontal') {
+                        pt1 = new Vector3(pt[0] + horizontalShiftLabel, pt[1] - f.size, pt[2]);    // low   
+                    }                    
                 }
                 else if (f.axis == "y") {
                     pt0 = new Vector3(pt[0], pt[1], pt[2]);

src/js/main.js

@@ -259,18 +259,11 @@ class Application {
         //slice on x and y axes:
         // this.slicer = new SlicerControl({ parentDiv: 'slicer-control' }).addTo(this.map);
 
-        // this.selection = new Selection(
-        //     // new Vector3(-7, -14, -14),
-        //     // new Vector3(14, 9, 3)
-        //     new Vector3(x.min, y.min, z.min),
-        //     new Vector3(x.max, y.max, z.max)
-        // );        
+       
         // this.capsScene.add(this.selection.boxMesh);
         // this.scene.add(this.selection.displayMeshes);
         // this.scene.add(this.selection.touchMeshes);
 
-        // domEvent.on(window, 'resize', this.onWindowResize, this);
-        // domEvent.on(window, 'keydown', this.keydown, this);
         this.start();
     }
 
@@ -419,7 +412,13 @@ class Application {
                 document.querySelector('.tab-pane.active').classList.remove('active');
                 document.querySelector(button.getAttribute('name')).classList.add('active');
             })
-        })
+        });
+
+        //toggle GridLayer
+        let chkGrid = document.getElementById("chkGrid");
+        domEvent.on(chkGrid, 'click', function (e) {
+            this.gridlayer.toggle();
+        }, app);
 
     }