@openglobus/og 0.17.1 → 0.18.0

package/src/{og/entity/GeometryHandler.js → entity/GeometryHandler.ts}

@@ -1,11 +1,25 @@
-"use strict";
-
-import { doubleToTwoFloatsV2 } from "../math/coder.js";
-import { Vec2 } from "../math/Vec2.js";
-import * as mercator from "../mercator.js";
-import * as quadTree from "../quadTree/quadTree.js";
-import { earcut, flatten } from "../utils/earcut.js";
-import { GeometryType } from "./Geometry.js";
+import * as mercator from "../mercator";
+import * as quadTree from "../quadTree/quadTree";
+import {Extent} from "../Extent";
+import {Handler} from "../webgl/Handler";
+import {doubleToTwoFloatsV2} from "../math/coder";
+import {Vector} from "../layer/Vector";
+import {NumberArray2, Vec2} from "../math/Vec2";
+import {Node} from "../quadTree/Node";
+import {Vec3} from "../math/Vec3";
+import {Vec4} from "../math/Vec4";
+import {
+    CoordinatesType,
+    GeometryType,
+    Geometry,
+    IMultiLineStringCoordinates,
+    ILineStringCoordinates,
+    IMultiPolygonCoordinates,
+    IPolygonCoordinates
+} from "./Geometry";
+
+import {earcut, flatten} from "../utils/earcut";
+import {WebGLBufferExt} from "../webgl/Handler";
 
 const POLYVERTICES_BUFFER = 0;
 const POLYINDEXES_BUFFER = 1;
@@ -20,7 +34,7 @@ const LINESTROKECOLORS_BUFFER = 9;
 const POLYPICKINGCOLORS_BUFFER = 10;
 const LINEPICKINGCOLORS_BUFFER = 11;
 
-function doubleToTwoFloats(v, high, low) {
+function doubleToTwoFloats(v: NumberArray2, high: Vec2, low: Vec2) {
     let x = v[0],
         y = v[1];
 
@@ -50,8 +64,64 @@ let tempHigh = new Vec2(),
     tempHighLow = new Vec2();
 
 class GeometryHandler {
-    constructor(layer) {
-        this.__staticId = GeometryHandler._staticCounter++;
+
+    static __counter__: number = 0;
+
+    protected __id: number;
+
+    protected _layer: Vector;
+
+    protected _handler: Handler | null;
+
+    protected _geometries: Geometry[];
+
+    protected _updatedGeometryArr: Geometry[];
+    protected _updatedGeometry: Record<number, boolean>;
+
+    protected _removeGeometryExtentArr: Extent[];
+    protected _removeGeometryExtents: Record<number, boolean>;
+
+    // Polygon arrays
+    protected _polyVerticesHighMerc: number[];
+    protected _polyVerticesLowMerc: number[];
+    protected _polyColors: number[];
+    protected _polyPickingColors: number[];
+    protected _polyIndexes: number[];
+
+    // Line arrays
+    protected _lineVerticesHighMerc: number[];
+    protected _lineVerticesLowMerc: number[];
+    protected _lineOrders: number[];
+    protected _lineIndexes: number[];
+    protected _lineColors: number[];
+    protected _linePickingColors: number[];
+    protected _lineThickness: number[];
+    protected _lineStrokes: number[];
+    protected _lineStrokeColors: number[];
+
+    // Buffers
+    public _polyVerticesHighBufferMerc: WebGLBufferExt | null;
+    public _polyVerticesLowBufferMerc: WebGLBufferExt | null;
+    public _polyColorsBuffer: WebGLBufferExt | null;
+    public _polyPickingColorsBuffer: WebGLBufferExt | null;
+    public _polyIndexesBuffer: WebGLBufferExt | null;
+
+    public _lineVerticesHighBufferMerc: WebGLBufferExt | null;
+    public _lineVerticesLowBufferMerc: WebGLBufferExt | null;
+    public _lineColorsBuffer: WebGLBufferExt | null;
+    public _linePickingColorsBuffer: WebGLBufferExt | null;
+    public _lineThicknessBuffer: WebGLBufferExt | null;
+    public _lineStrokesBuffer: WebGLBufferExt | null;
+    public _lineStrokeColorsBuffer: WebGLBufferExt | null;
+    public _lineOrdersBuffer: WebGLBufferExt | null;
+    public _lineIndexesBuffer: WebGLBufferExt | null;
+
+    protected _buffersUpdateCallbacks: Function[];
+
+    protected _changedBuffers: boolean[];
+
+    constructor(layer: Vector) {
+        this.__id = GeometryHandler.__counter__++;
 
         this._layer = layer;
 
@@ -117,36 +187,25 @@ class GeometryHandler {
         this._changedBuffers = new Array(this._buffersUpdateCallbacks.length);
     }
 
-    static get _staticCounter() {
-        if (!this._counter && this._counter !== 0) {
-            this._counter = 0;
-        }
-        return this._counter;
-    }
-
-    static set _staticCounter(n) {
-        this._counter = n;
-    }
-
     static appendLineData(
-        pathArr,
-        isClosed,
-        color,
-        pickingColor,
-        thickness,
-        strokeColor,
-        strokeSize,
-        outVerticesHigh,
-        outVerticesLow,
-        outOrders,
-        outIndexes,
-        outColors,
-        outPickingColors,
-        outThickness,
-        outStrokeColors,
-        outStrokes,
-        outVerticesHigh2,
-        outVerticesLow2
+        pathArr: CoordinatesType[][],
+        isClosed: boolean,
+        color: Vec4,
+        pickingColor: Vec3,
+        thickness: number,
+        strokeColor: Vec4,
+        strokeSize: number,
+        outVerticesHigh: number[],
+        outVerticesLow: number[],
+        outOrders: number[],
+        outIndexes: number[],
+        outColors: number[],
+        outPickingColors: number[],
+        outThickness: number[],
+        outStrokeColors: number[],
+        outStrokes: number[],
+        outVerticesHigh2: number[],
+        outVerticesLow2: number[]
     ) {
         var index = 0;
 
@@ -170,8 +229,8 @@ class GeometryHandler {
                 continue;
             }
 
-            var startIndex = index;
-            var last;
+            let startIndex = index;
+            let last: CoordinatesType;
             if (isClosed) {
                 last = path[path.length - 1];
             } else {
@@ -185,48 +244,32 @@ class GeometryHandler {
                 last = [p0[0] + p0[0] - p1[0], p0[1] + p0[1] - p1[1]];
             }
 
-            doubleToTwoFloats(last, tempHigh, tempLow);
+            doubleToTwoFloats(last as NumberArray2, tempHigh, tempLow);
 
             outVerticesHigh.push(
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y
             );
             outVerticesLow.push(
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y
             );
 
             outVerticesHigh2.push(
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y
             );
             outVerticesLow2.push(
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y
             );
 
             outOrders.push(1, -1, 2, -2);
@@ -234,168 +277,80 @@ class GeometryHandler {
             outThickness.push(t, t, t, t);
             outStrokes.push(s, s, s, s);
             outColors.push(
-                c[0],
-                c[1],
-                c[2],
-                c[3],
-                c[0],
-                c[1],
-                c[2],
-                c[3],
-                c[0],
-                c[1],
-                c[2],
-                c[3],
-                c[0],
-                c[1],
-                c[2],
-                c[3]
+                c[0], c[1], c[2], c[3],
+                c[0], c[1], c[2], c[3],
+                c[0], c[1], c[2], c[3],
+                c[0], c[1], c[2], c[3]
             );
             outStrokeColors.push(
-                sc[0],
-                sc[1],
-                sc[2],
-                sc[3],
-                sc[0],
-                sc[1],
-                sc[2],
-                sc[3],
-                sc[0],
-                sc[1],
-                sc[2],
-                sc[3],
-                sc[0],
-                sc[1],
-                sc[2],
-                sc[3]
+                sc[0], sc[1], sc[2], sc[3],
+                sc[0], sc[1], sc[2], sc[3],
+                sc[0], sc[1], sc[2], sc[3],
+                sc[0], sc[1], sc[2], sc[3]
             );
             outPickingColors.push(
-                p[0],
-                p[1],
-                p[2],
-                p[3],
-                p[0],
-                p[1],
-                p[2],
-                p[3],
-                p[0],
-                p[1],
-                p[2],
-                p[3],
-                p[0],
-                p[1],
-                p[2],
-                p[3]
+                p[0], p[1], p[2], p[3],
+                p[0], p[1], p[2], p[3],
+                p[0], p[1], p[2], p[3],
+                p[0], p[1], p[2], p[3]
             );
 
             for (let i = 0; i < path.length; i++) {
-                var cur = path[i];
+                let cur = path[i];
 
-                doubleToTwoFloats(cur, tempHigh, tempLow);
+                doubleToTwoFloats(cur as NumberArray2, tempHigh, tempLow);
 
                 outVerticesHigh.push(
-                    tempHigh.x,
-                    tempHigh.y,
-                    tempHigh.x,
-                    tempHigh.y,
-                    tempHigh.x,
-                    tempHigh.y,
-                    tempHigh.x,
-                    tempHigh.y
+                    tempHigh.x, tempHigh.y,
+                    tempHigh.x, tempHigh.y,
+                    tempHigh.x, tempHigh.y,
+                    tempHigh.x, tempHigh.y
                 );
                 outVerticesLow.push(
-                    tempLow.x,
-                    tempLow.y,
-                    tempLow.x,
-                    tempLow.y,
-                    tempLow.x,
-                    tempLow.y,
-                    tempLow.x,
-                    tempLow.y
+                    tempLow.x, tempLow.y,
+                    tempLow.x, tempLow.y,
+                    tempLow.x, tempLow.y,
+                    tempLow.x, tempLow.y
                 );
 
                 outVerticesHigh2.push(
-                    tempHigh.x,
-                    tempHigh.y,
-                    tempHigh.x,
-                    tempHigh.y,
-                    tempHigh.x,
-                    tempHigh.y,
-                    tempHigh.x,
-                    tempHigh.y
+                    tempHigh.x, tempHigh.y,
+                    tempHigh.x, tempHigh.y,
+                    tempHigh.x, tempHigh.y,
+                    tempHigh.x, tempHigh.y
                 );
                 outVerticesLow2.push(
-                    tempLow.x,
-                    tempLow.y,
-                    tempLow.x,
-                    tempLow.y,
-                    tempLow.x,
-                    tempLow.y,
-                    tempLow.x,
-                    tempLow.y
+                    tempLow.x, tempLow.y,
+                    tempLow.x, tempLow.y,
+                    tempLow.x, tempLow.y,
+                    tempLow.x, tempLow.y
                 );
 
                 outOrders.push(1, -1, 2, -2);
                 outThickness.push(t, t, t, t);
                 outStrokes.push(s, s, s, s);
                 outColors.push(
-                    c[0],
-                    c[1],
-                    c[2],
-                    c[3],
-                    c[0],
-                    c[1],
-                    c[2],
-                    c[3],
-                    c[0],
-                    c[1],
-                    c[2],
-                    c[3],
-                    c[0],
-                    c[1],
-                    c[2],
-                    c[3]
+                    c[0], c[1], c[2], c[3],
+                    c[0], c[1], c[2], c[3],
+                    c[0], c[1], c[2], c[3],
+                    c[0], c[1], c[2], c[3]
                 );
                 outStrokeColors.push(
-                    sc[0],
-                    sc[1],
-                    sc[2],
-                    sc[3],
-                    sc[0],
-                    sc[1],
-                    sc[2],
-                    sc[3],
-                    sc[0],
-                    sc[1],
-                    sc[2],
-                    sc[3],
-                    sc[0],
-                    sc[1],
-                    sc[2],
-                    sc[3]
+                    sc[0], sc[1], sc[2], sc[3],
+                    sc[0], sc[1], sc[2], sc[3],
+                    sc[0], sc[1], sc[2], sc[3],
+                    sc[0], sc[1], sc[2], sc[3]
                 );
                 outPickingColors.push(
-                    p[0],
-                    p[1],
-                    p[2],
-                    p[3],
-                    p[0],
-                    p[1],
-                    p[2],
-                    p[3],
-                    p[0],
-                    p[1],
-                    p[2],
-                    p[3],
-                    p[0],
-                    p[1],
-                    p[2],
-                    p[3]
+                    p[0], p[1], p[2], p[3],
+                    p[0], p[1], p[2], p[3],
+                    p[0], p[1], p[2], p[3],
+                    p[0], p[1], p[2], p[3]
                 );
                 outIndexes.push(index++, index++, index++, index++);
             }
 
-            var first;
+            let first: CoordinatesType;
             if (isClosed) {
                 first = path[0];
                 outIndexes.push(startIndex, startIndex + 1, startIndex + 1, startIndex + 1);
@@ -411,106 +366,54 @@ class GeometryHandler {
                 outIndexes.push(index - 1, index - 1, index - 1, index - 1);
             }
 
-            doubleToTwoFloats(first, tempHigh, tempLow);
+            doubleToTwoFloats(first as NumberArray2, tempHigh, tempLow);
 
             outVerticesHigh.push(
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y
             );
             outVerticesLow.push(
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y
             );
 
             outVerticesHigh2.push(
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y,
-                tempHigh.x,
-                tempHigh.y
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y,
+                tempHigh.x, tempHigh.y
             );
             outVerticesLow2.push(
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y,
-                tempLow.x,
-                tempLow.y
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y,
+                tempLow.x, tempLow.y
             );
 
             outOrders.push(1, -1, 2, -2);
             outThickness.push(t, t, t, t);
             outStrokes.push(s, s, s, s);
             outColors.push(
-                c[0],
-                c[1],
-                c[2],
-                c[3],
-                c[0],
-                c[1],
-                c[2],
-                c[3],
-                c[0],
-                c[1],
-                c[2],
-                c[3],
-                c[0],
-                c[1],
-                c[2],
-                c[3]
+                c[0], c[1], c[2], c[3],
+                c[0], c[1], c[2], c[3],
+                c[0], c[1], c[2], c[3],
+                c[0], c[1], c[2], c[3]
             );
             outStrokeColors.push(
-                sc[0],
-                sc[1],
-                sc[2],
-                sc[3],
-                sc[0],
-                sc[1],
-                sc[2],
-                sc[3],
-                sc[0],
-                sc[1],
-                sc[2],
-                sc[3],
-                sc[0],
-                sc[1],
-                sc[2],
-                sc[3]
+                sc[0], sc[1], sc[2], sc[3],
+                sc[0], sc[1], sc[2], sc[3],
+                sc[0], sc[1], sc[2], sc[3],
+                sc[0], sc[1], sc[2], sc[3]
             );
             outPickingColors.push(
-                p[0],
-                p[1],
-                p[2],
-                p[3],
-                p[0],
-                p[1],
-                p[2],
-                p[3],
-                p[0],
-                p[1],
-                p[2],
-                p[3],
-                p[0],
-                p[1],
-                p[2],
-                p[3]
+                p[0], p[1], p[2], p[3],
+                p[0], p[1], p[2], p[3],
+                p[0], p[1], p[2], p[3],
+                p[0], p[1], p[2], p[3]
             );
 
             if (j < pathArr.length - 1) {
@@ -520,7 +423,7 @@ class GeometryHandler {
         }
     }
 
-    assignHandler(handler) {
+    public assignHandler(handler: Handler) {
         this._handler = handler;
         this.refresh();
         if (handler.isInitialized()) {
@@ -532,7 +435,7 @@ class GeometryHandler {
      * @public
      * @param {Geometry} geometry - Geometry object.
      */
-    add(geometry) {
+    public add(geometry: Geometry) {
         //
         // Triangulates polygon and sets geometry data.
         if (geometry._handlerIndex === -1) {
@@ -541,29 +444,26 @@ class GeometryHandler {
 
             this._geometries.push(geometry);
 
-            let pickingColor = geometry._entity._pickingColor.scaleTo(1 / 255);
+            let pickingColor = geometry._entity!._pickingColor.scaleTo(1 / 255);
 
             geometry._polyVerticesHighMerc = [];
             geometry._polyVerticesLowMerc = [];
             geometry._lineVerticesHighMerc = [];
             geometry._lineVerticesLowMerc = [];
 
-            if (geometry._coordinates[0].length) {
-                if (geometry._type === GeometryType.POLYGON) {
-                    let coordinates = geometry._coordinates;
-                    let ci = [];
+            if ((geometry._coordinates as IPolygonCoordinates)[0].length) {
+                if (geometry.type === GeometryType.POLYGON) {
+                    let coordinates = geometry._coordinates as IPolygonCoordinates;
+                    let ci: IPolygonCoordinates = [];
                     for (let j = 0; j < coordinates.length; j++) {
                         ci[j] = [];
                         for (let k = 0; k < coordinates[j].length; k++) {
-                            ci[j][k] = [
-                                mercator.forward_lon(coordinates[j][k][0]),
-                                mercator.forward_lat(coordinates[j][k][1])
-                            ];
+                            ci[j][k] = [mercator.forward_lon(coordinates[j][k][0]), mercator.forward_lat(coordinates[j][k][1])];
                         }
                     }
 
                     let data = flatten(ci);
-                    let indexes = earcut(data.vertices, data.holes, 2);
+                    let indexes: number[] = earcut(data.vertices, data.holes, 2);
 
                     geometry._polyVerticesHandlerIndex = this._polyVerticesHighMerc.length;
                     geometry._polyIndexesHandlerIndex = this._polyIndexes.length;
@@ -572,19 +472,14 @@ class GeometryHandler {
                         this._polyIndexes.push(indexes[i] + geometry._polyVerticesHandlerIndex * 0.5);
                     }
 
-                    var color = geometry._style.fillColor;
+                    let color = geometry._style.fillColor;
 
                     let verticesHigh = [],
                         verticesLow = [];
 
                     for (let i = 0; i < data.vertices.length * 0.5; i++) {
                         this._polyColors.push(color.x, color.y, color.z, color.w);
-                        this._polyPickingColors.push(
-                            pickingColor.x,
-                            pickingColor.y,
-                            pickingColor.z,
-                            1.0
-                        );
+                        this._polyPickingColors.push(pickingColor.x, pickingColor.y, pickingColor.z, 1.0);
                     }
 
                     for (let i = 0; i < data.vertices.length; i++) {
@@ -630,21 +525,17 @@ class GeometryHandler {
                         geometry._lineVerticesLowMerc
                     );
 
-                    geometry._lineVerticesLength =
-                        this._lineVerticesHighMerc.length - geometry._lineVerticesHandlerIndex;
-                    geometry._lineOrdersLength =
-                        this._lineOrders.length - geometry._lineOrdersHandlerIndex;
-                    geometry._lineIndexesLength =
-                        this._lineIndexes.length - geometry._lineIndexesHandlerIndex;
-                    geometry._lineColorsLength =
-                        this._lineColors.length - geometry._lineColorsHandlerIndex;
-                    geometry._lineThicknessLength =
-                        this._lineThickness.length - geometry._lineThicknessHandlerIndex;
-
-                } else if (geometry._type === GeometryType.MULTIPOLYGON) {
-                    let coordinates = geometry._coordinates;
-                    let vertices = [],
-                        indexes = [];
+                    geometry._lineVerticesLength = this._lineVerticesHighMerc.length - geometry._lineVerticesHandlerIndex;
+                    geometry._lineOrdersLength = this._lineOrders.length - geometry._lineOrdersHandlerIndex;
+                    geometry._lineIndexesLength = this._lineIndexes.length - geometry._lineIndexesHandlerIndex;
+                    geometry._lineColorsLength = this._lineColors.length - geometry._lineColorsHandlerIndex;
+                    geometry._lineThicknessLength = this._lineThickness.length - geometry._lineThicknessHandlerIndex;
+
+                } else if (geometry.type === GeometryType.MULTIPOLYGON) {
+
+                    let coordinates = geometry._coordinates as IMultiPolygonCoordinates;
+                    let vertices: number[] = [],
+                        indexes: number[] = [];
 
                     // Creates polygon stroke data
                     geometry._lineVerticesHandlerIndex = this._lineVerticesHighMerc.length;
@@ -654,19 +545,16 @@ class GeometryHandler {
                     geometry._lineThicknessHandlerIndex = this._lineThickness.length;
 
                     for (let i = 0; i < coordinates.length; i++) {
-                        let cci = coordinates[i];
-                        let ci = [];
+                        let cci: CoordinatesType[][] = coordinates[i];
+                        let ci: CoordinatesType[][] = [];
                         for (let j = 0; j < cci.length; j++) {
                             ci[j] = [];
                             for (let k = 0; k < coordinates[i][j].length; k++) {
-                                ci[j][k] = [
-                                    mercator.forward_lon(cci[j][k][0]),
-                                    mercator.forward_lat(cci[j][k][1])
-                                ];
+                                ci[j][k] = [mercator.forward_lon(cci[j][k][0]), mercator.forward_lat(cci[j][k][1])];
                             }
                         }
                         let data = flatten(ci);
-                        let dataIndexes = earcut(data.vertices, data.holes, 2);
+                        let dataIndexes: number[] = earcut(data.vertices, data.holes, 2);
 
                         for (let j = 0; j < dataIndexes.length; j++) {
                             indexes.push(dataIndexes[j] + vertices.length * 0.5);
@@ -733,24 +621,18 @@ class GeometryHandler {
                     geometry._polyVerticesLength = vertices.length;
                     geometry._polyIndexesLength = indexes.length;
 
-                    geometry._lineVerticesLength =
-                        this._lineVerticesHighMerc.length - geometry._lineVerticesHandlerIndex;
-                    geometry._lineOrdersLength =
-                        this._lineOrders.length - geometry._lineOrdersHandlerIndex;
-                    geometry._lineIndexesLength =
-                        this._lineIndexes.length - geometry._lineIndexesHandlerIndex;
-                    geometry._lineColorsLength =
-                        this._lineColors.length - geometry._lineColorsHandlerIndex;
-                    geometry._lineThicknessLength =
-                        this._lineThickness.length - geometry._lineThicknessHandlerIndex;
-                } else if (geometry._type === GeometryType.LINESTRING) {
-                    let coordinates = geometry._coordinates;
+                    geometry._lineVerticesLength = this._lineVerticesHighMerc.length - geometry._lineVerticesHandlerIndex;
+                    geometry._lineOrdersLength = this._lineOrders.length - geometry._lineOrdersHandlerIndex;
+                    geometry._lineIndexesLength = this._lineIndexes.length - geometry._lineIndexesHandlerIndex;
+                    geometry._lineColorsLength = this._lineColors.length - geometry._lineColorsHandlerIndex;
+                    geometry._lineThicknessLength = this._lineThickness.length - geometry._lineThicknessHandlerIndex;
+
+                } else if (geometry.type === GeometryType.LINESTRING) {
+
+                    let coordinates: ILineStringCoordinates = geometry._coordinates as ILineStringCoordinates;
                     let ci = new Array(coordinates.length);
                     for (let j = 0; j < coordinates.length; j++) {
-                        ci[j] = [
-                            mercator.forward_lon(coordinates[j][0]),
-                            mercator.forward_lat(coordinates[j][1])
-                        ];
+                        ci[j] = [mercator.forward_lon(coordinates[j][0]), mercator.forward_lat(coordinates[j][1])];
                     }
 
                     // Creates polygon stroke data
@@ -781,26 +663,20 @@ class GeometryHandler {
                         geometry._lineVerticesLowMerc
                     );
 
-                    geometry._lineVerticesLength =
-                        this._lineVerticesHighMerc.length - geometry._lineVerticesHandlerIndex;
-                    geometry._lineOrdersLength =
-                        this._lineOrders.length - geometry._lineOrdersHandlerIndex;
-                    geometry._lineIndexesLength =
-                        this._lineIndexes.length - geometry._lineIndexesHandlerIndex;
-                    geometry._lineColorsLength =
-                        this._lineColors.length - geometry._lineColorsHandlerIndex;
-                    geometry._lineThicknessLength =
-                        this._lineThickness.length - geometry._lineThicknessHandlerIndex;
-                } else if (geometry._type === GeometryType.MULTILINESTRING) {
-                    let coordinates = geometry._coordinates;
-                    let ci = [];
+                    geometry._lineVerticesLength = this._lineVerticesHighMerc.length - geometry._lineVerticesHandlerIndex;
+                    geometry._lineOrdersLength = this._lineOrders.length - geometry._lineOrdersHandlerIndex;
+                    geometry._lineIndexesLength = this._lineIndexes.length - geometry._lineIndexesHandlerIndex;
+                    geometry._lineColorsLength = this._lineColors.length - geometry._lineColorsHandlerIndex;
+                    geometry._lineThicknessLength = this._lineThickness.length - geometry._lineThicknessHandlerIndex;
+
+                } else if (geometry.type === GeometryType.MULTILINESTRING) {
+
+                    let coordinates = geometry._coordinates as IMultiLineStringCoordinates;
+                    let ci: IMultiLineStringCoordinates = [];
                     for (let j = 0; j < coordinates.length; j++) {
                         ci[j] = [];
                         for (let k = 0; k < coordinates[j].length; k++) {
-                            ci[j][k] = [
-                                mercator.forward_lon(coordinates[j][k][0]),
-                                mercator.forward_lat(coordinates[j][k][1])
-                            ];
+                            ci[j][k] = [mercator.forward_lon(coordinates[j][k][0]), mercator.forward_lat(coordinates[j][k][1])];
                         }
                     }
 
@@ -832,102 +708,68 @@ class GeometryHandler {
                         geometry._lineVerticesLowMerc
                     );
 
-                    geometry._lineVerticesLength =
-                        this._lineVerticesHighMerc.length - geometry._lineVerticesHandlerIndex;
-                    geometry._lineOrdersLength =
-                        this._lineOrders.length - geometry._lineOrdersHandlerIndex;
-                    geometry._lineIndexesLength =
-                        this._lineIndexes.length - geometry._lineIndexesHandlerIndex;
-                    geometry._lineColorsLength =
-                        this._lineColors.length - geometry._lineColorsHandlerIndex;
-                    geometry._lineThicknessLength =
-                        this._lineThickness.length - geometry._lineThicknessHandlerIndex;
+                    geometry._lineVerticesLength = this._lineVerticesHighMerc.length - geometry._lineVerticesHandlerIndex;
+                    geometry._lineOrdersLength = this._lineOrders.length - geometry._lineOrdersHandlerIndex;
+                    geometry._lineIndexesLength = this._lineIndexes.length - geometry._lineIndexesHandlerIndex;
+                    geometry._lineColorsLength = this._lineColors.length - geometry._lineColorsHandlerIndex;
+                    geometry._lineThicknessLength = this._lineThickness.length - geometry._lineThicknessHandlerIndex;
                 }
             }
 
             // Refresh visibility
             this.setGeometryVisibility(geometry);
 
-            !this._updatedGeometry[geometry._id] && this._updatedGeometryArr.push(geometry);
-            this._updatedGeometry[geometry._id] = true;
+            !this._updatedGeometry[geometry.__id] && this._updatedGeometryArr.push(geometry);
+            this._updatedGeometry[geometry.__id] = true;
             this.refresh();
         }
     }
 
-    remove(geometry) {
-        var index = geometry._handlerIndex;
+    public remove(geometry: Geometry) {
+
+        const index = geometry._handlerIndex;
         if (index !== -1) {
             this._geometries.splice(index, 1);
 
             // polygon
             // this._polyVerticesLonLat.splice(geometry._polyVerticesHandlerIndex, geometry._polyVerticesLength);
-            this._polyVerticesHighMerc.splice(
-                geometry._polyVerticesHandlerIndex,
-                geometry._polyVerticesLength
-            );
-            this._polyVerticesLowMerc.splice(
-                geometry._polyVerticesHandlerIndex,
-                geometry._polyVerticesLength
-            );
 
-            this._polyColors.splice(
-                geometry._polyVerticesHandlerIndex * 2,
-                geometry._polyVerticesLength * 2
-            );
-            this._polyPickingColors.splice(
-                geometry._polyVerticesHandlerIndex * 2,
-                geometry._polyVerticesLength * 2
-            );
-            this._polyIndexes.splice(
-                geometry._polyIndexesHandlerIndex,
-                geometry._polyIndexesLength
-            );
-            var di = geometry._polyVerticesLength * 0.5;
+            this._polyVerticesHighMerc.splice(geometry._polyVerticesHandlerIndex, geometry._polyVerticesLength);
+            this._polyVerticesLowMerc.splice(geometry._polyVerticesHandlerIndex, geometry._polyVerticesLength);
+
+            this._polyColors.splice(geometry._polyVerticesHandlerIndex * 2, geometry._polyVerticesLength * 2);
+            this._polyPickingColors.splice(geometry._polyVerticesHandlerIndex * 2, geometry._polyVerticesLength * 2);
+            this._polyIndexes.splice(geometry._polyIndexesHandlerIndex, geometry._polyIndexesLength);
+
+            let di = geometry._polyVerticesLength * 0.5;
             for (let i = geometry._polyIndexesHandlerIndex; i < this._polyIndexes.length; i++) {
                 this._polyIndexes[i] -= di;
             }
 
             // line
             // this._lineVerticesLonLat.splice(geometry._lineVerticesHandlerIndex, geometry._lineVerticesLength);
-            this._lineVerticesHighMerc.splice(
-                geometry._lineVerticesHandlerIndex,
-                geometry._lineVerticesLength
-            );
-            this._lineVerticesLowMerc.splice(
-                geometry._lineVerticesHandlerIndex,
-                geometry._lineVerticesLength
-            );
+
+            this._lineVerticesHighMerc.splice(geometry._lineVerticesHandlerIndex, geometry._lineVerticesLength);
+            this._lineVerticesLowMerc.splice(geometry._lineVerticesHandlerIndex, geometry._lineVerticesLength);
+
             this._lineOrders.splice(geometry._lineOrdersHandlerIndex, geometry._lineOrdersLength);
             this._lineColors.splice(geometry._lineColorsHandlerIndex, geometry._lineColorsLength);
-            this._linePickingColors.splice(
-                geometry._lineColorsHandlerIndex,
-                geometry._lineColorsLength
-            );
-            this._lineStrokeColors.splice(
-                geometry._lineColorsHandlerIndex,
-                geometry._lineColorsLength
-            );
-            this._lineThickness.splice(
-                geometry._lineThicknessHandlerIndex,
-                geometry._lineThicknessLength
-            );
-            this._lineStrokes.splice(
-                geometry._lineThicknessHandlerIndex,
-                geometry._lineThicknessLength
-            );
-            this._lineIndexes.splice(
-                geometry._lineIndexesHandlerIndex,
-                geometry._lineIndexesLength
-            );
+            this._linePickingColors.splice(geometry._lineColorsHandlerIndex, geometry._lineColorsLength);
+            this._lineStrokeColors.splice(geometry._lineColorsHandlerIndex, geometry._lineColorsLength);
+            this._lineThickness.splice(geometry._lineThicknessHandlerIndex, geometry._lineThicknessLength);
+            this._lineStrokes.splice(geometry._lineThicknessHandlerIndex, geometry._lineThicknessLength);
+            this._lineIndexes.splice(geometry._lineIndexesHandlerIndex, geometry._lineIndexesLength);
+
             di = geometry._lineVerticesLength * 0.5;
             for (let i = geometry._lineIndexesHandlerIndex; i < this._lineIndexes.length; i++) {
                 this._lineIndexes[i] -= di;
             }
 
             // reindex
-            var g = this._geometries;
+            let g = this._geometries;
             for (let i = index; i < g.length; i++) {
-                var gi = g[i];
+                let gi = g[i];
+
                 gi._handlerIndex = i;
                 gi._polyVerticesHandlerIndex -= geometry._polyVerticesLength;
                 gi._polyIndexesHandlerIndex -= geometry._polyIndexesLength;
@@ -939,6 +781,7 @@ class GeometryHandler {
                 gi._lineIndexesHandlerIndex -= geometry._lineIndexesLength;
             }
 
+
             geometry._pickingReady = false;
 
             geometry._handler = null;
@@ -964,22 +807,21 @@ class GeometryHandler {
             geometry._lineThicknessHandlerIndex = -1;
             geometry._lineColorsHandlerIndex = -1;
 
-            !this._removeGeometryExtents[geometry._id] &&
-            this._removeGeometryExtentArr.push(geometry.getExtent());
-            this._removeGeometryExtents[geometry._id] = true;
+            !this._removeGeometryExtents[geometry.__id] && this._removeGeometryExtentArr.push(geometry.getExtent());
+            this._removeGeometryExtents[geometry.__id] = true;
 
             this.refresh();
         }
     }
 
-    _refreshRecursevely(geometry, treeNode) {
+    protected _refreshRecursevely(geometry: Geometry, treeNode: Node) {
         if (treeNode.ready) {
-            var lid = this._layer._id;
+            let lid = this._layer._id;
             for (let i = 0; i < treeNode.nodes.length; i++) {
-                var ni = treeNode.nodes[i];
-                if (geometry._extent.overlaps(ni.segment.getExtentLonLat())) {
+                let ni = treeNode.nodes[i];
+                if (geometry.overlaps(ni.segment.getExtentLonLat())) {
                     this._refreshRecursevely(geometry, ni);
-                    var m = ni.segment.materials[lid];
+                    let m = ni.segment.materials[lid];
                     if (m && m.isReady) {
                         if (m.segment.node.getState() !== quadTree.RENDERING) {
                             m.layer.clearMaterial(m);
@@ -989,6 +831,7 @@ class GeometryHandler {
                             m._updateTexture = m.texture;
                             m._updatePickingMask = m.pickingMask;
                         }
+
                         geometry._pickingReady = true;
                     }
                 }
@@ -996,14 +839,14 @@ class GeometryHandler {
         }
     }
 
-    _refreshRecursevelyExt(extent, treeNode) {
+    protected _refreshRecursevelyExt(extent: Extent, treeNode: Node) {
         if (treeNode.ready) {
-            var lid = this._layer._id;
+            let lid = this._layer.__id;
             for (let i = 0; i < treeNode.nodes.length; i++) {
-                var ni = treeNode.nodes[i];
+                let ni = treeNode.nodes[i];
                 if (extent.overlaps(ni.segment.getExtentLonLat())) {
                     this._refreshRecursevelyExt(extent, ni);
-                    var m = ni.segment.materials[lid];
+                    let m = ni.segment.materials[lid];
                     if (m && m.isReady) {
                         m.layer.clearMaterial(m);
                         // m.pickingReady = false;
@@ -1016,26 +859,30 @@ class GeometryHandler {
         }
     }
 
-    _refreshPlanetNode(treeNode) {
-        var i = 0;
+    protected _refreshPlanetNode(treeNode: Node) {
+        let i;
 
-        var e = this._removeGeometryExtentArr;
+        let e = this._removeGeometryExtentArr;
         for (i = 0; i < e.length; i++) {
             this._refreshRecursevelyExt(e[i], treeNode);
         }
 
-        var g = this._updatedGeometryArr;
+        let g = this._updatedGeometryArr;
         for (i = 0; i < g.length; i++) {
             this._refreshRecursevely(g[i], treeNode);
         }
     }
 
-    _updatePlanet() {
-        var p = this._layer._planet;
+    protected _updatePlanet() {
+        let p = this._layer._planet;
         if (p) {
-            p.quadTreeStrategy.quadTreeList.forEach(quadTree => {
-                this._refreshPlanetNode(quadTree);
-            });
+            let ql = p.quadTreeStrategy.quadTreeList;
+            for (let i = 0; i < ql.length; i++) {
+                this._refreshPlanetNode(ql[i]);
+            }
+            // p.quadTreeStrategy.quadTreeList.forEach((quadTree: Node) => {
+            //     this._refreshPlanetNode(quadTree);
+            // });
         }
         this._updatedGeometryArr.length = 0;
         this._updatedGeometryArr = [];
@@ -1046,17 +893,17 @@ class GeometryHandler {
         this._removeGeometryExtents = {};
     }
 
-    refresh() {
-        var i = this._changedBuffers.length;
+    protected refresh() {
+        let i = this._changedBuffers.length;
         while (i--) {
             this._changedBuffers[i] = true;
         }
     }
 
-    update() {
+    public update() {
         if (this._handler) {
-            var needUpdate = false;
-            var i = this._changedBuffers.length;
+            let needUpdate = false;
+            let i = this._changedBuffers.length;
             while (i--) {
                 if (this._changedBuffers[i]) {
                     needUpdate = true;
@@ -1068,14 +915,14 @@ class GeometryHandler {
         }
     }
 
-    setGeometryVisibility(geometry) {
-        var v = geometry._visibility ? 1.0 : 0.0;
+    public setGeometryVisibility(geometry: Geometry) {
+        let v = geometry.getVisibility() ? 1.0 : 0.0;
 
-        var a = this._polyVerticesHighMerc,
+        let a = this._polyVerticesHighMerc,
             b = this._polyVerticesLowMerc;
 
-        var l = geometry._polyVerticesLength;
-        var ind = geometry._polyVerticesHandlerIndex;
+        let l = geometry._polyVerticesLength;
+        let ind = geometry._polyVerticesHandlerIndex;
         for (let i = 0; i < l; i++) {
             a[ind + i] = geometry._polyVerticesHighMerc[i] * v;
             b[ind + i] = geometry._polyVerticesLowMerc[i] * v;
@@ -1083,6 +930,7 @@ class GeometryHandler {
 
         a = this._lineVerticesHighMerc;
         b = this._lineVerticesLowMerc;
+
         l = geometry._lineVerticesLength;
         ind = geometry._lineVerticesHandlerIndex;
         for (let i = 0; i < l; i++) {
@@ -1093,14 +941,14 @@ class GeometryHandler {
         this._changedBuffers[POLYVERTICES_BUFFER] = true;
         this._changedBuffers[LINEVERTICES_BUFFER] = true;
 
-        !this._updatedGeometry[geometry._id] && this._updatedGeometryArr.push(geometry);
-        this._updatedGeometry[geometry._id] = true;
+        !this._updatedGeometry[geometry.__id] && this._updatedGeometryArr.push(geometry);
+        this._updatedGeometry[geometry.__id] = true;
     }
 
-    setPolyColorArr(geometry, color) {
-        var index = geometry._polyVerticesHandlerIndex * 2, // ... / 2 * 4
+    public setPolyColorArr(geometry: Geometry, color: Vec4) {
+        let index = geometry._polyVerticesHandlerIndex * 2, // ... / 2 * 4
             size = index + geometry._polyVerticesLength * 2; // ... / 2 * 4
-        var a = this._polyColors;
+        let a = this._polyColors;
         for (let i = index; i < size; i += 4) {
             a[i] = color.x;
             a[i + 1] = color.y;
@@ -1108,14 +956,14 @@ class GeometryHandler {
             a[i + 3] = color.w;
         }
         this._changedBuffers[POLYCOLORS_BUFFER] = true;
-        !this._updatedGeometry[geometry._id] && this._updatedGeometryArr.push(geometry);
-        this._updatedGeometry[geometry._id] = true;
+        !this._updatedGeometry[geometry.__id] && this._updatedGeometryArr.push(geometry);
+        this._updatedGeometry[geometry.__id] = true;
     }
 
-    setLineStrokeColorArr(geometry, color) {
-        var index = geometry._lineColorsHandlerIndex,
+    public setLineStrokeColorArr(geometry: Geometry, color: Vec4) {
+        let index = geometry._lineColorsHandlerIndex,
             size = index + geometry._lineColorsLength;
-        var a = this._lineStrokeColors;
+        let a = this._lineStrokeColors;
         for (let i = index; i < size; i += 4) {
             a[i] = color.x;
             a[i + 1] = color.y;
@@ -1123,14 +971,14 @@ class GeometryHandler {
             a[i + 3] = color.w;
         }
         this._changedBuffers[LINESTROKECOLORS_BUFFER] = true;
-        !this._updatedGeometry[geometry._id] && this._updatedGeometryArr.push(geometry);
-        this._updatedGeometry[geometry._id] = true;
+        !this._updatedGeometry[geometry.__id] && this._updatedGeometryArr.push(geometry);
+        this._updatedGeometry[geometry.__id] = true;
     }
 
-    setLineColorArr(geometry, color) {
-        var index = geometry._lineColorsHandlerIndex,
+    public setLineColorArr(geometry: Geometry, color: Vec4) {
+        let index = geometry._lineColorsHandlerIndex,
             size = index + geometry._lineColorsLength;
-        var a = this._lineColors;
+        let a = this._lineColors;
         for (let i = index; i < size; i += 4) {
             a[i] = color.x;
             a[i + 1] = color.y;
@@ -1138,49 +986,43 @@ class GeometryHandler {
             a[i + 3] = color.w;
         }
         this._changedBuffers[LINECOLORS_BUFFER] = true;
-        !this._updatedGeometry[geometry._id] && this._updatedGeometryArr.push(geometry);
-        this._updatedGeometry[geometry._id] = true;
+        !this._updatedGeometry[geometry.__id] && this._updatedGeometryArr.push(geometry);
+        this._updatedGeometry[geometry.__id] = true;
     }
 
-    setLineStrokeArr(geometry, width) {
-        var index = geometry._lineStrokesHandlerIndex,
-            size = index + geometry._lineStrokesLength;
-        var a = this._lineStrokes;
-        for (let i = index; i < size; i++) {
-            a[i] = width;
-        }
-        this._changedBuffers[LINESTROKES_BUFFER] = true;
-        !this._updatedGeometry[geometry._id] && this._updatedGeometryArr.push(geometry);
-        this._updatedGeometry[geometry._id] = true;
+    public setLineStrokeArr(geometry: Geometry, width: number) {
+        // let index = geometry._lineStrokesHandlerIndex,
+        //     size = index + geometry._lineStrokesLength;
+        // let a = this._lineStrokes;
+        // for (let i = index; i < size; i++) {
+        //     a[i] = width;
+        // }
+        // this._changedBuffers[LINESTROKES_BUFFER] = true;
+        // !this._updatedGeometry[geometry.__id] && this._updatedGeometryArr.push(geometry);
+        // this._updatedGeometry[geometry.__id] = true;
     }
 
-    setLineThicknessArr(geometry, width) {
-        var index = geometry._lineThicknessHandlerIndex,
+    public setLineThicknessArr(geometry: Geometry, width: number) {
+        let index = geometry._lineThicknessHandlerIndex,
             size = index + geometry._lineThicknessLength;
-        var a = this._lineThickness;
+        let a = this._lineThickness;
         for (let i = index; i < size; i++) {
             a[i] = width;
         }
         this._changedBuffers[LINETHICKNESS_BUFFER] = true;
-        !this._updatedGeometry[geometry._id] && this._updatedGeometryArr.push(geometry);
-        this._updatedGeometry[geometry._id] = true;
+        !this._updatedGeometry[geometry.__id] && this._updatedGeometryArr.push(geometry);
+        this._updatedGeometry[geometry.__id] = true;
     }
 
-    bringToFront(geometry) {
-        var polyIndexes = this._polyIndexes.splice(
-            geometry._polyIndexesHandlerIndex,
-            geometry._polyIndexesLength
-        );
-        var lineIndexes = this._lineIndexes.splice(
-            geometry._lineIndexesHandlerIndex,
-            geometry._lineIndexesLength
-        );
+    public bringToFront(geometry: Geometry) {
+        let polyIndexes = this._polyIndexes.splice(geometry._polyIndexesHandlerIndex, geometry._polyIndexesLength);
+        let lineIndexes = this._lineIndexes.splice(geometry._lineIndexesHandlerIndex, geometry._lineIndexesLength);
 
         this._geometries.splice(geometry._handlerIndex, 1);
 
-        var g = this._geometries;
+        let g = this._geometries;
         for (let i = geometry._handlerIndex; i < g.length; i++) {
-            var gi = g[i];
+            let gi = g[i];
             gi._handlerIndex = i;
             gi._polyIndexesHandlerIndex -= geometry._polyIndexesLength;
             gi._lineIndexesHandlerIndex -= geometry._lineIndexesLength;
@@ -1198,20 +1040,20 @@ class GeometryHandler {
         this._changedBuffers[POLYINDEXES_BUFFER] = true;
         this._changedBuffers[LINEINDEXES_BUFFER] = true;
 
-        !this._updatedGeometry[geometry._id] && this._updatedGeometryArr.push(geometry);
-        this._updatedGeometry[geometry._id] = true;
+        !this._updatedGeometry[geometry.__id] && this._updatedGeometryArr.push(geometry);
+        this._updatedGeometry[geometry.__id] = true;
     }
 
-    createPolyVerticesBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._polyVerticesHighBufferMerc);
+    public createPolyVerticesBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._polyVerticesHighBufferMerc!);
         this._polyVerticesHighBufferMerc = h.createArrayBuffer(
             new Float32Array(this._polyVerticesHighMerc),
             2,
             this._polyVerticesHighMerc.length / 2
         );
 
-        h.gl.deleteBuffer(this._polyVerticesLowBufferMerc);
+        h.gl!.deleteBuffer(this._polyVerticesLowBufferMerc!);
         this._polyVerticesLowBufferMerc = h.createArrayBuffer(
             new Float32Array(this._polyVerticesLowMerc),
             2,
@@ -1219,9 +1061,9 @@ class GeometryHandler {
         );
     }
 
-    createPolyIndexesBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._polyIndexesBuffer);
+    public createPolyIndexesBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._polyIndexesBuffer!);
         this._polyIndexesBuffer = h.createElementArrayBuffer(
             new Uint32Array(this._polyIndexes),
             1,
@@ -1229,9 +1071,9 @@ class GeometryHandler {
         );
     }
 
-    createPolyColorsBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._polyColorsBuffer);
+    public createPolyColorsBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._polyColorsBuffer!);
         this._polyColorsBuffer = h.createArrayBuffer(
             new Float32Array(this._polyColors),
             4,
@@ -1239,9 +1081,9 @@ class GeometryHandler {
         );
     }
 
-    createPolyPickingColorsBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._polyPickingColorsBuffer);
+    public createPolyPickingColorsBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._polyPickingColorsBuffer!);
         this._polyPickingColorsBuffer = h.createArrayBuffer(
             new Float32Array(this._polyPickingColors),
             4,
@@ -1249,16 +1091,16 @@ class GeometryHandler {
         );
     }
 
-    createLineVerticesBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._lineVerticesHighBufferMerc);
+    public createLineVerticesBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._lineVerticesHighBufferMerc!);
         this._lineVerticesHighBufferMerc = h.createArrayBuffer(
             new Float32Array(this._lineVerticesHighMerc),
             2,
             this._lineVerticesHighMerc.length / 2
         );
 
-        h.gl.deleteBuffer(this._lineVerticesLowBufferMerc);
+        h.gl!.deleteBuffer(this._lineVerticesLowBufferMerc!);
         this._lineVerticesLowBufferMerc = h.createArrayBuffer(
             new Float32Array(this._lineVerticesLowMerc),
             2,
@@ -1266,9 +1108,9 @@ class GeometryHandler {
         );
     }
 
-    createLineIndexesBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._lineIndexesBuffer);
+    public createLineIndexesBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._lineIndexesBuffer!);
         this._lineIndexesBuffer = h.createElementArrayBuffer(
             new Uint32Array(this._lineIndexes),
             1,
@@ -1276,9 +1118,9 @@ class GeometryHandler {
         );
     }
 
-    createLineOrdersBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._lineOrdersBuffer);
+    public createLineOrdersBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._lineOrdersBuffer!);
         this._lineOrdersBuffer = h.createArrayBuffer(
             new Float32Array(this._lineOrders),
             1,
@@ -1286,9 +1128,9 @@ class GeometryHandler {
         );
     }
 
-    createLineColorsBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._lineColorsBuffer);
+    public createLineColorsBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._lineColorsBuffer!);
         this._lineColorsBuffer = h.createArrayBuffer(
             new Float32Array(this._lineColors),
             4,
@@ -1296,9 +1138,9 @@ class GeometryHandler {
         );
     }
 
-    createLinePickingColorsBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._linePickingColorsBuffer);
+    public createLinePickingColorsBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._linePickingColorsBuffer!);
         this._linePickingColorsBuffer = h.createArrayBuffer(
             new Float32Array(this._linePickingColors),
             4,
@@ -1306,9 +1148,9 @@ class GeometryHandler {
         );
     }
 
-    createLineThicknessBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._lineThicknessBuffer);
+    public createLineThicknessBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._lineThicknessBuffer!);
         this._lineThicknessBuffer = h.createArrayBuffer(
             new Float32Array(this._lineThickness),
             1,
@@ -1316,9 +1158,9 @@ class GeometryHandler {
         );
     }
 
-    createLineStrokesBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._lineStrokesBuffer);
+    public createLineStrokesBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._lineStrokesBuffer!);
         this._lineStrokesBuffer = h.createArrayBuffer(
             new Float32Array(this._lineStrokes),
             1,
@@ -1326,9 +1168,9 @@ class GeometryHandler {
         );
     }
 
-    createLineStrokeColorsBuffer() {
-        var h = this._handler;
-        h.gl.deleteBuffer(this._lineStrokeColorsBuffer);
+    public createLineStrokeColorsBuffer() {
+        let h = this._handler!;
+        h.gl!.deleteBuffer(this._lineStrokeColorsBuffer!);
         this._lineStrokeColorsBuffer = h.createArrayBuffer(
             new Float32Array(this._lineStrokeColors),
             4,
@@ -1337,4 +1179,4 @@ class GeometryHandler {
     }
 }
 
-export { GeometryHandler };
+export {GeometryHandler};