@openglobus/og 0.11.8 → 0.12.4

package/src/og/entity/GeoObjectHandler.js

@@ -14,7 +14,8 @@ const VERTEX_BUFFER = 0,
     DIRECTION_BUFFER = 5,
     PITCH_ROLL_BUFFER = 6,
     SIZE_BUFFER = 7,
-    PICKINGCOLOR_BUFFER = 8;
+    PICKINGCOLOR_BUFFER = 8,
+    VISIBLE_BUFFER = 9;
 
 const setParametersToArray = (arr = [], index = 0, length, itemSize, ...params) => {
     const currIndex = index * length;
@@ -48,6 +49,7 @@ class GeoObjectHandler {
         this._normalsArr = [[]];
         this._indicesArr = [[]];
         this._pickingColorArr = [[]];
+        this._vehicleVisibleArr = [[]];
 
         this._pitchRollBuffer = [];
         this._sizeBuffer = [];
@@ -59,6 +61,7 @@ class GeoObjectHandler {
         this._normalsBuffer = [];
         this._indicesBuffer = [];
         this._pickingColorBuffer = [];
+        this._vehicleVisibleBuffer = [];
 
         this.__staticId = GeoObjectHandler._staticCounter++;
         this._buffersUpdateCallbacks = [];
@@ -71,6 +74,7 @@ class GeoObjectHandler {
         this._buffersUpdateCallbacks[VERTEX_BUFFER] = this.createVertexBuffer;
         this._buffersUpdateCallbacks[SIZE_BUFFER] = this.createSizeBuffer;
         this._buffersUpdateCallbacks[PITCH_ROLL_BUFFER] = this.createPitchRollBuffer;
+        this._buffersUpdateCallbacks[VISIBLE_BUFFER] = this.createVisibleBuffer;
 
         this._changedBuffers = new Array(this._buffersUpdateCallbacks.length);
 
@@ -87,7 +91,7 @@ class GeoObjectHandler {
         for (let i = 0, len = this._vertexArr.length; i < len; i++) {
             this._vertexBuffer && h.gl.deleteBuffer(this._vertexBuffer[i]);
             this._vertexArr[i] = makeArrayTyped(this._vertexArr[i]);
-            this._vertexBuffer[i] = h.createArrayBuffer(this._vertexArr[i], 3, len / 3);
+            this._vertexBuffer[i] = h.createArrayBuffer(this._vertexArr[i], 3, this._vertexArr[i].length / 3);
         }
     }
 
@@ -96,7 +100,16 @@ class GeoObjectHandler {
         for (let i = 0, len = this._pitchRollArr.length; i < len; i++) {
             this._pitchRollBuffer && h.gl.deleteBuffer(this._pitchRollBuffer[i]);
             this._pitchRollArr[i] = makeArrayTyped(this._pitchRollArr[i]);
-            this._pitchRollBuffer[i] = h.createArrayBuffer(this._pitchRollArr[i], 2, len / 2);
+            this._pitchRollBuffer[i] = h.createArrayBuffer(this._pitchRollArr[i], 2, this._pitchRollArr[i].length / 2);
+        }
+    }
+
+    createVisibleBuffer() {
+        const h = this._renderer.handler;
+        for (let i = 0, len = this._vehicleVisibleArr.length; i < len; i++) {
+            this._vehicleVisibleBuffer && h.gl.deleteBuffer(this._vehicleVisibleBuffer[i]);
+            this._vehicleVisibleArr[i] = makeArrayTyped(this._vehicleVisibleArr[i]);
+            this._vehicleVisibleBuffer[i] = h.createArrayBuffer(this._vehicleVisibleArr[i], 1, this._vehicleVisibleArr[i].length);
         }
     }
 
@@ -105,7 +118,7 @@ class GeoObjectHandler {
         for (let i = 0, len = this._sizeArr.length; i < len; i++) {
             this._sizeBuffer && h.gl.deleteBuffer(this._sizeBuffer[i]);
             this._sizeArr[i] = makeArrayTyped(this._sizeArr[i]);
-            this._sizeBuffer[i] = h.createArrayBuffer(this._sizeArr[i], 1, len);
+            this._sizeBuffer[i] = h.createArrayBuffer(this._sizeArr[i], 1, this._sizeArr[i].length);
         }
     }
 
@@ -114,14 +127,10 @@ class GeoObjectHandler {
         for (let i = 0, len = this._positionHighArr.length; i < len; i++) {
             this._positionHighBuffer && h.gl.deleteBuffer(this._positionHighBuffer[i]);
             this._positionHighArr[i] = makeArrayTyped(this._positionHighArr[i]);
-            this._positionHighBuffer[i] = h.createArrayBuffer(this._positionHighArr[i], 3, len / 3);
+            this._positionHighBuffer[i] = h.createArrayBuffer(this._positionHighArr[i], 3, this._positionHighArr[i].length / 3);
             this._positionLowBuffer && h.gl.deleteBuffer(this._positionLowBuffer[i]);
             this._positionLowArr[i] = makeArrayTyped(this._positionLowArr[i]);
-            this._positionLowBuffer[i] = h.createArrayBuffer(
-                this._positionLowArr[i],
-                3,
-                this._positionLowArr[i].length / 3
-            );
+            this._positionLowBuffer[i] = h.createArrayBuffer(this._positionLowArr[i], 3, this._positionLowArr[i].length / 3);
         }
     }
 
@@ -130,7 +139,7 @@ class GeoObjectHandler {
         for (let i = 0, len = this._rgbaArr.length; i < len; i++) {
             this._rgbaBuffer && h.gl.deleteBuffer(this._rgbaBuffer[i]);
             this._rgbaArr[i] = makeArrayTyped(this._rgbaArr[i]);
-            this._rgbaBuffer[i] = h.createArrayBuffer(this._rgbaArr[i], 4, len / 4);
+            this._rgbaBuffer[i] = h.createArrayBuffer(this._rgbaArr[i], 4, this._rgbaArr[i].length / 4);
         }
     }
 
@@ -139,7 +148,7 @@ class GeoObjectHandler {
         for (let i = 0, len = this._directionArr.length; i < len; i++) {
             this._directionBuffer && h.gl.deleteBuffer(this._directionBuffer[i]);
             this._directionArr[i] = makeArrayTyped(this._directionArr[i]);
-            this._directionBuffer[i] = h.createArrayBuffer(this._directionArr[i], 3, len / 3);
+            this._directionBuffer[i] = h.createArrayBuffer(this._directionArr[i], 3, this._directionArr[i].length / 3);
         }
     }
 
@@ -148,7 +157,7 @@ class GeoObjectHandler {
         for (let i = 0, len = this._normalsArr.length; i < len; i++) {
             this._normalsBuffer && h.gl.deleteBuffer(this._normalsBuffer[i]);
             this._normalsArr[i] = makeArrayTyped(this._normalsArr[i]);
-            this._normalsBuffer[i] = h.createArrayBuffer(this._normalsArr[i], 3, len / 3);
+            this._normalsBuffer[i] = h.createArrayBuffer(this._normalsArr[i], 3, this._normalsArr[i].length / 3);
         }
     }
 
@@ -157,11 +166,7 @@ class GeoObjectHandler {
         for (let i = 0, len = this._indicesArr.length; i < len; i++) {
             this._indicesBuffer && h.gl.deleteBuffer(this._indicesBuffer[i]);
             this._indicesArr[i] = makeArrayTyped(this._indicesArr[i], Uint16Array);
-            this._indicesBuffer[i] = h.createElementArrayBuffer(
-                this._indicesArr[i],
-                1,
-                this._indicesArr[i].length
-            );
+            this._indicesBuffer[i] = h.createElementArrayBuffer(this._indicesArr[i], 1, this._indicesArr[i].length);
         }
     }
 
@@ -170,7 +175,7 @@ class GeoObjectHandler {
         for (let i = 0, len = this._pickingColorArr.length; i < len; i++) {
             this._pickingColorBuffer && h.gl.deleteBuffer(this._pickingColorBuffer[i]);
             this._pickingColorArr[i] = makeArrayTyped(this._pickingColorArr[i]);
-            this._pickingColorBuffer[i] = h.createArrayBuffer(this._pickingColorArr[i], 3, len / 3);
+            this._pickingColorBuffer[i] = h.createArrayBuffer(this._pickingColorArr[i], 3, this._pickingColorArr[i].length / 3);
         }
     }
 
@@ -215,14 +220,15 @@ class GeoObjectHandler {
         if (!alreadyAdded) {
             this._instancedTags.set(tag, {
                 iCounts: 1,
+                maxIndex: Math.max(...geoObject._indices),
                 index: this._instancedTags.size
             });
         } else {
             const prevState = this._instancedTags.get(tag),
                 nextCount = prevState.iCounts + 1;
             this._instancedTags.set(tag, {
-                iCounts: nextCount,
-                index: prevState.index
+                ...prevState,
+                iCounts: nextCount
             });
         }
         const tagData = this._instancedTags.get(tag),
@@ -232,8 +238,9 @@ class GeoObjectHandler {
          * mark object by index for recalc indices array
          */
         geoObject._tagIndex = tagData.iCounts - 1;
-        if (geoObject._visibility) {
-            if (!alreadyAdded) {
+
+            if (!this._vertexArr[ti] || this._vertexArr[ti].length !== geoObject._vertices.length) {
+
                 this._vertexArr[ti] = concatArrays(
                     this._vertexArr[ti],
                     setParametersToArray(
@@ -256,12 +263,11 @@ class GeoObjectHandler {
                     )
                 );
             }
-        } else {
-            this._vertexArr[ti] = concatArrays(
-                this._vertexArr[ti],
-                setParametersToArray([], 0, geoObject._verticesCount * itemSize, 1, 0)
-            );
-        }
+        this._vehicleVisibleArr[ti] = concatArrays(
+            this._vehicleVisibleArr[ti],
+            setParametersToArray([], 0, 1, 1, geoObject._visibility ? 1 : 0)
+        );
+
         let x = geoObject._positionHigh.x,
             y = geoObject._positionHigh.y,
             z = geoObject._positionHigh.z,
@@ -306,8 +312,6 @@ class GeoObjectHandler {
             setParametersToArray([], 0, itemSize, itemSize, x, y, z, w)
         );
 
-        this._indicesArr[ti] = concatArrays(this._indicesArr[ti], geoObject._indices);
-
         x = geoObject._pitch;
         y = geoObject._roll;
 
@@ -324,7 +328,7 @@ class GeoObjectHandler {
             this._sizeArr[ti],
             setParametersToArray([], 0, itemSize, itemSize, geoObject.scale)
         );
-        this._recalculateIndices();
+        this._addIndices(geoObject);
     }
 
     _displayPASS() {
@@ -357,51 +361,26 @@ class GeoObjectHandler {
                 ti = tagData.index;
 
             gl.bindBuffer(gl.ARRAY_BUFFER, this._normalsBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aVertexNormal,
-                this._normalsBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
+            gl.vertexAttribPointer(a.aVertexNormal, this._normalsBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
 
             gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aVertexPosition,
-                this._vertexBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
+            gl.vertexAttribPointer(a.aVertexPosition, this._vertexBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
 
             gl.bindBuffer(gl.ARRAY_BUFFER, this._directionBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aDirection,
-                this._directionBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
+            gl.vertexAttribPointer(a.aDirection, this._directionBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
 
             gl.bindBuffer(gl.ARRAY_BUFFER, this._sizeBuffer[ti]);
             gl.vertexAttribPointer(a.aScale, this._sizeBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
 
             gl.bindBuffer(gl.ARRAY_BUFFER, this._pitchRollBuffer[ti]);
-            gl.vertexAttribPointer(
-                a.aPitchRoll,
-                this._pitchRollBuffer[ti].itemSize,
-                gl.FLOAT,
-                false,
-                0,
-                0
-            );
+            gl.vertexAttribPointer(a.aPitchRoll, this._pitchRollBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
 
             gl.bindBuffer(gl.ARRAY_BUFFER, this._rgbaBuffer[ti]);
             gl.vertexAttribPointer(a.aColor, this._rgbaBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
 
+            gl.bindBuffer(gl.ARRAY_BUFFER, this._vehicleVisibleBuffer[ti]);
+            gl.vertexAttribPointer(a.aDispose, this._vehicleVisibleBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
+
             gl.bindBuffer(gl.ARRAY_BUFFER, this._positionHighBuffer[ti]);
             gl.vertexAttribPointer(
                 a.aPositionHigh,
@@ -539,6 +518,9 @@ class GeoObjectHandler {
                 0
             );
 
+            gl.bindBuffer(gl.ARRAY_BUFFER, this._vehicleVisibleBuffer[ti]);
+            gl.vertexAttribPointer(a.aDispose, this._vehicleVisibleBuffer[ti].itemSize, gl.FLOAT, false, 0, 0);
+
             gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indicesBuffer[ti]);
 
             if (tagData.iCounts) {
@@ -561,7 +543,7 @@ class GeoObjectHandler {
         gl.disable(gl.CULL_FACE);
     }
 
-    _recalculateIndices() {
+    _recalculateIndices(startIndex) {
         const allIndices = this._indicesArr,
             goArr = this._geoObjects,
             maxIndicesByTags = new Array(this._instancedTags.size).fill(0);
@@ -590,10 +572,62 @@ class GeoObjectHandler {
         }
     }
 
-    //todo refactor for support instancing
-    setVertexArr(index, vertexArr) {
-        this._vertexArr = [-0.5, 0.0, 0.5, -0.5, 0.0, -0.5, 0.5, 0.0, -0.5, 0.5, 0.0, 0.5];
-        this._changedBuffers[VERTEX_BUFFER] = true;
+    _addIndices(g) {
+        let i = g._handlerIndex;
+        const allIndices = this._indicesArr,
+            gArr = this._geoObjects,
+            iLen = g._indices.length,
+            tagData = this._instancedTags.get(g.tag),
+            maxIndex = tagData.maxIndex,
+            ti = tagData.index;
+
+        allIndices[ti] = concatArrays(allIndices[ti], g._indices);
+
+        while (gArr[i]) {
+            const g = gArr[i];
+
+            if (g._tagIndex > 0) {
+                setParametersToArray(allIndices[ti], g._tagIndex, iLen, iLen, ...g._indices.reduce((acc, cur) => {
+                    acc.push(cur + ((maxIndex + 1) * g._tagIndex));
+                    return acc;
+                }, []));
+            }
+            i++;
+
+        }
+
+    }
+
+    _removeIndices(geoObject) {
+        const allIndices = this._indicesArr,
+            gArr = this._geoObjects,
+            iLen = geoObject._indices.length,
+            tagData = this._instancedTags.get(geoObject.tag),
+            maxIndex = tagData.maxIndex,
+            ti = tagData.index,
+            count = tagData.iCounts;
+
+        let i = geoObject._handlerIndex;
+
+        this._indicesArr[ti] = spliceArray(this._indicesArr[ti], geoObject._tagIndex * geoObject._indicesCount, geoObject._indicesCount);
+
+        while (gArr[i]) {
+            if (geoObject.tag === gArr[i].tag) {
+                if (count !== 0) {
+                    const startI = (gArr[i]._tagIndex - 1) * iLen;
+                    let stopI = startI + geoObject._indicesCount;
+                    while (stopI > startI) {
+                        this._indicesArr[ti][stopI - 1] = allIndices[ti][stopI - 1] - maxIndex - 1;
+                        stopI--;
+                    }
+                } else {
+                    allIndices[ti] = geoObject._indices;
+                }
+            }
+            i++;
+
+        }
+
     }
 
     setDirectionArr(index, direction) {
@@ -606,27 +640,17 @@ class GeoObjectHandler {
             length = itemSize;
         }
 
-        setParametersToArray(
-            this._directionArr[ti],
-            ob._tagIndex,
-            length,
-            itemSize,
-            direction.x,
-            direction.y,
-            direction.z
-        );
+        setParametersToArray(this._directionArr[ti], ob._tagIndex, length, itemSize, direction.x, direction.y, direction.z);
         this._changedBuffers[DIRECTION_BUFFER] = true;
     }
 
     setVisibility(index, visibility) {
-        const ob = this.getObjectByIndex(index);
-        let vArr;
-        if (visibility) {
-            vArr = ob._vertices;
-        } else {
-            vArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-        }
-        this.setVertexArr(index, vArr);
+        const ob = this.getObjectByIndex(index),
+            ti = this.getTagIndexByObjectIndex(index);
+
+        setParametersToArray(this._vehicleVisibleArr[ti], ob._tagIndex, 1, 1, visibility ? 1 : 0);
+
+        this._changedBuffers[VISIBLE_BUFFER] = true;
     }
 
     setPositionArr(index, positionHigh, positionLow) {
@@ -639,26 +663,10 @@ class GeoObjectHandler {
             length = itemSize;
         }
 
-        setParametersToArray(
-            this._positionHighArr[ti],
-            ob._tagIndex,
-            length,
-            itemSize,
-            positionHigh.x,
-            positionHigh.y,
-            positionHigh.z
-        );
+        setParametersToArray(this._positionHighArr[ti], ob._tagIndex, length, itemSize, positionHigh.x, positionHigh.y, positionHigh.z);
 
         // Low
-        setParametersToArray(
-            this._positionLowArr[ti],
-            ob._tagIndex,
-            length,
-            itemSize,
-            positionLow.x,
-            positionLow.y,
-            positionLow.z
-        );
+        setParametersToArray(this._positionLowArr[ti], ob._tagIndex, length, itemSize, positionLow.x, positionLow.y, positionLow.z);
 
         this._changedBuffers[POSITION_BUFFER] = true;
     }
@@ -673,16 +681,7 @@ class GeoObjectHandler {
             length = itemSize;
         }
 
-        setParametersToArray(
-            this._rgbaArr[ti],
-            ob._tagIndex,
-            length,
-            itemSize,
-            rgba.x,
-            rgba.y,
-            rgba.z,
-            rgba.w
-        );
+        setParametersToArray(this._rgbaArr[ti], ob._tagIndex, length, itemSize, rgba.x, rgba.y, rgba.z, rgba.w);
 
         this._changedBuffers[RGBA_BUFFER] = true;
     }
@@ -770,17 +769,19 @@ class GeoObjectHandler {
         this._normalsArr = null;
         this._indicesArr = null;
         this._pickingColorArr = null;
-
-        this._pitchRollArr = new Float32Array();
-        this._sizeArr = new Float32Array();
-        this._vertexArr = new Float32Array();
-        this._positionHighArr = new Float32Array();
-        this._positionLowArr = new Float32Array();
-        this._rgbaArr = new Float32Array();
-        this._directionArr = new Float32Array();
-        this._normalsArr = new Float32Array();
-        this._indicesArr = new Uint16Array();
-        this._pickingColorArr = new Float32Array();
+        this._vehicleVisibleArr = null;
+
+        this._pitchRollArr = [new Float32Array()];
+        this._sizeArr = [new Float32Array()];
+        this._vertexArr = [new Float32Array()];
+        this._positionHighArr = [new Float32Array()];
+        this._positionLowArr = [new Float32Array()];
+        this._rgbaArr = [new Float32Array()];
+        this._directionArr = [new Float32Array()];
+        this._normalsArr = [new Float32Array()];
+        this._indicesArr = [new Uint16Array()];
+        this._pickingColorArr = [new Float32Array()];
+        this._vehicleVisibleArr = [new Int8Array()];
 
         this._removeGeoObjects();
         this._deleteBuffers();
@@ -866,19 +867,20 @@ class GeoObjectHandler {
         const gi = geoObject._handlerIndex,
             tag = geoObject.tag,
             ti = this.getTagIndexByObjectIndex(gi),
-            prevState = this._instancedTags.get(tag);
+            prevState = this._instancedTags.get(tag),
+            iCount = prevState.iCounts - 1;
 
         this._instancedTags.set(tag, {
-            iCounts: prevState.iCounts - 1,
-            index: prevState.index
+            ...prevState,
+            iCounts: iCount
         });
 
         this._geoObjects.splice(gi, 1);
 
-        let i = gi * 4;
+        let i = geoObject._tagIndex * 4;
         this._rgbaArr[ti] = spliceArray(this._rgbaArr[ti], i, 4);
 
-        i = gi * 3;
+        i = geoObject._tagIndex * 3;
         if (prevState.iCounts <= 1) {
             this._vertexArr[ti] = spliceArray(this._vertexArr[ti], 0, geoObject._verticesCount * 3);
             this._normalsArr[ti] = spliceArray(
@@ -892,14 +894,16 @@ class GeoObjectHandler {
         this._directionArr[ti] = spliceArray(this._directionArr[ti], i, 3);
         this._pickingColorArr[ti] = spliceArray(this._pickingColorArr[ti], i, 3);
 
-        i = gi * 2;
+        i = geoObject._tagIndex * 2;
         this._pitchRollArr[ti] = spliceArray(this._pitchRollArr[ti], i, 2);
-        this._indicesArr[ti] = spliceArray(this._indicesArr[ti], i, geoObject._indicesCount);
-        i = gi * 1;
+        i = geoObject._tagIndex;
         this._sizeArr[ti] = spliceArray(this._sizeArr[ti], i, 1);
+        this._vehicleVisibleArr[ti] = spliceArray(this._vehicleVisibleArr[ti], i, 1);
+
+        this._removeIndices(geoObject);
 
         this._reindexGeoObjects(gi, tag);
-        this._recalculateIndices();
+
         this.refresh();
 
         geoObject._handlerIndex = -1;

package/src/og/entity/LabelHandler.js

@@ -469,7 +469,8 @@ class LabelHandler extends BillboardHandler {
         this.refresh();
 
         label._handlerIndex = -1;
-        label._handler = null;
+        label._handler = null;
+        label._isReady = false;
     }
 
     setText(index, text, fontIndex, align) {

package/src/og/layer/CanvasTiles.js

@@ -98,17 +98,14 @@ class CanvasTiles extends Layer {
      * @public
      * @param {boolean} visibility - Layer visibility.
      */
-    setVisibility(visibility) {
+    setVisibility(visibility) {
         if (visibility !== this._visibility) {
-            this._visibility = visibility;
-            if (this._isBaseLayer && visibility) {
-                this._planet.setBaseLayer(this);
-            } else if (!visibility) {
+            super.setVisibility(visibility);
+
+            if (!visibility) {
                 this.abortLoading();
             }
-            this._planet.updateVisibleLayers();
-            this.events.dispatch(this.events.visibilitychange, this);
-        }
+        }
     }
 
     /**
@@ -128,7 +125,7 @@ class CanvasTiles extends Layer {
             material.texture = seg.planet.transparentTexture;
         }
 
-        if (this._planet.layerLock.isFree()) {
+        if (this._planet.layerLock.isFree() || material.segment.tileZoom < 2) {
             material.isReady = false;
             material.isLoading = true;
             if (CanvasTiles.__requestsCounter >= CanvasTiles.MAX_REQUESTS && this._counter) {
@@ -240,12 +237,12 @@ class CanvasTiles extends Layer {
             var mId = this._id;
             var psegm = material;
             while (pn.parentNode) {
+                pn = pn.parentNode;
+                psegm = pn.segment.materials[mId];
                 if (psegm && psegm.isReady) {
                     notEmpty = true;
                     break;
                 }
-                pn = pn.parentNode;
-                psegm = pn.segment.materials[mId];
             }
 
             if (notEmpty) {

package/src/og/layer/KML.js

@@ -3,6 +3,7 @@
  */
 
 "use strict";
+import { Billboard } from "../entity/Billboard.js";
 import { Entity } from "../entity/Entity.js";
 import { Extent } from "../Extent.js";
 import { LonLat } from "../LonLat.js";
@@ -40,12 +41,14 @@ export class KML extends Vector {
      */
     _extractCoordonatesFromKml(xmlDoc) {
         const raw = Array.from(xmlDoc.getElementsByTagName("coordinates"));
-        const coordinates = raw.map((item) =>
-            item.textContent
-                .trim()
-                .replace(/\n/g, " ")
-                .split(" ")
-                .map((co) => co.split(",").map(parseFloat))
+        const rawText = raw.map(item => item.textContent.trim());
+        const coordinates = rawText.map(item => 
+            item
+             .replace(/\n/g, " ")
+             .replace(/\t/g, " ")
+             .replace(/ +/g," ")
+             .split(" ")
+             .map((co) => co.split(",").map(parseFloat))
         );
         return coordinates;
     }
@@ -121,15 +124,17 @@ export class KML extends Vector {
     /**
      * @public
      * @param {File[]} kmls
+     * @param {string} [color]
+     * @param {Billboard} [billboard]
      * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
-    async addKmlFromFiles(kmls) {
+    async addKmlFromFiles(kmls, color = null, billboard = null) {
         const kmlObjs = await Promise.all(kmls.map(this._getXmlContent));
         const coordonates = kmlObjs.map(this._extractCoordonatesFromKml);
         const { entities, extent } = this._convertCoordonatesIntoEntities(
             coordonates,
-            this._color,
-            this._billboard
+            color || this._color,
+            billboard || this._billboard
         );
         this._extent = this._expandExtents(this._extent, extent);
         entities.forEach(this.add.bind(this));
@@ -168,15 +173,17 @@ export class KML extends Vector {
     /**
      * @public
      * @param {string} url - Url of the KML to display. './myFile.kml' or 'http://mySite/myFile.kml' for example.
+     * @param {string} [color]
+     * @param {Billboard} [billboard]
      * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
-    async addKmlFromUrl(url) {
+    async addKmlFromUrl(url, color = null, billboard = null) {
         const kml = await this._getKmlFromUrl(url);
         const coordonates = this._extractCoordonatesFromKml(kml);
         const { entities, extent } = this._convertCoordonatesIntoEntities(
             [coordonates],
-            this._color,
-            this._billboard
+            color || this._color,
+            billboard || this._billboard
         );
         this._extent = this._expandExtents(this._extent, extent);
         entities.forEach(this.add.bind(this));

package/src/og/layer/Layer.js

@@ -193,7 +193,9 @@ class Layer {
          */
         this._pickingColor = new Vec3();
 
-        this._pickingEnabled = options.pickingEnabled !== undefined ? options.pickingEnabled : true;
+        this._pickingEnabled = options.pickingEnabled !== undefined ? options.pickingEnabled : true;
+
+        this._isPreloadDone = false;
 
         /**
          * Events handler.
@@ -497,7 +499,12 @@ class Layer {
                 if (this._isBaseLayer && visibility) {
                     this._planet.setBaseLayer(this);
                 }
-                this._planet.updateVisibleLayers();
+                this._planet.updateVisibleLayers();
+                if (visibility && !this._isPreloadDone && !this.isVector) {
+                    this._isPreloadDone = true;
+                    //TODO: make individual preload
+                    this._planet._preLoad();
+                }
             }
             this.events.dispatch(this.events.visibilitychange, this);
         }