@ohuoy/easymap 1.0.21 → 1.0.23

package/src/components/control/Toobars.js

@@ -1,5 +1,6 @@
 import * as turf from '@turf/turf'
 import { transform } from '../../../src/utils/util.js';
+import { esMapWatchEffect } from '../../utils/mapWatch.js';
 export default class Toobars {
     _map;
     _container;
@@ -48,6 +49,7 @@ export default class Toobars {
             }
         }
         this.config =_c;
+       
     }
 
     onAdd(map) {
@@ -57,7 +59,7 @@ export default class Toobars {
         this._container.innerHTML += `<div aria-label="infobox" class='mapboxgl-ctrl-infobox' style='display:flex;flex-direction:column;position:absolute;top:-100px;margin: 0 50px;width:140px' ></div>`        
         if(this.config.line?.show){
             this._container.getElementsByClassName('mapboxgl-ctrl-infobox')[0].innerHTML+=`
-            <div class='linedis-message-show ${this.config.line.messageClass}' ></div>`
+            <div class='linedis-message-show msg-font ${this.config.line.messageClass}' ></div>`
             this._container.innerHTML += `
             <button class="mapboxgl-ctrl-linedis ${this.config.line.btnClass}" type="button" aria-label="linedis" aria-disabled="false">
                 <span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="划线测距">
@@ -77,7 +79,7 @@ export default class Toobars {
         }
         if(this.config.position?.show){
             this._container.getElementsByClassName('mapboxgl-ctrl-infobox')[0].innerHTML+=`
-            <div class='position-message-show ${this.config.line.messageClass}' ></div>`
+            <div class='position-message-show msg-font ${this.config.line.messageClass}' ></div>`
             this._container.innerHTML += `             
             <button class="mapboxgl-ctrl-position ${this.config.position.btnClass}" type="button" aria-label="position" aria-disabled="false">
                 <span style='display:flex;align-item:center;' class="mapboxgl-ctrl-icon" aria-hidden="true" title="显示经纬度">
@@ -113,6 +115,11 @@ export default class Toobars {
         //     let btn = this._container.getElementsByClassName('mapboxgl-ctrl-rect')[0]
         //     this.addRect(btn)
         // }
+
+        esMapWatchEffect(()=>{
+            this.updateStyleByTheme()
+        })
+
         return this._container;
     }
     
@@ -122,6 +129,27 @@ export default class Toobars {
             this.addLocation(btn)
         }
     }
+
+    updateStyleByTheme(){        
+        let fontMsg = this._container.getElementsByClassName('msg-font')
+        let _currentTheme = this._map.theme.value;
+        let layerPoint = this._map.getLayer('measure-points')
+        let layerLine = this._map.getLayer('measure-lines')
+        let color = _currentTheme == "dark" ? "#fff" :'#000'
+        for(let el of fontMsg){
+            el.style.color = color
+        }   
+        if(layerPoint){
+            this._map.setPaintProperty('measure-points','circle-color' ,color )
+            // layerPoint.paint["circle-color"] = color
+        }   
+        if(layerLine) {
+            // layerLine.paint['line-color'] = color;
+            this._map.setPaintProperty('measure-lines','line-color' ,color )       
+        }
+       
+    }
+
     addLindDis(btn){     
         let lineDis = {
             'type': 'FeatureCollection',
@@ -137,7 +165,7 @@ export default class Toobars {
         btn.addEventListener('click',()=>{   
             let box = this._container.getElementsByClassName('linedis-message-show')[0].parentNode;
             let pos = box.getBoundingClientRect()   
-            if(pos.x > document.body.clientWidth/2){
+            if(pos.x > this._map._container.clientWidth/2){
                 box.style.right = 0
                 box.style.left = ''
             }else{
@@ -154,7 +182,7 @@ export default class Toobars {
                     'type': 'LineString',
                     'coordinates': []
                 }
-            };       
+            };     
             if(!this.clickLineDisFun){
                 this.clickLineDisFun = (e) => {                    
                     let features = this._map.queryRenderedFeatures(e.point, {
@@ -203,6 +231,7 @@ export default class Toobars {
             }
             if(!this.mousemoveLineDisFun){
                 this.mousemoveLineDisFun = (e) => {
+                    if(!this.lineClicked){return}
                     let features = this._map.queryRenderedFeatures(e.point, {
                         layers: ['measure-points']
                     });
@@ -221,6 +250,9 @@ export default class Toobars {
                     'data': lineDis
                 });
         
+                let currentTheme =this._map.theme.value ? this._map.theme.value: this._map.style.stylesheet.theme;                
+
+                let lineColor = currentTheme && currentTheme == 'dark' ? '#fff':'#000'
                 // Add styles to the map
                 this._map.addLayer({
                     id: 'measure-points',
@@ -228,7 +260,7 @@ export default class Toobars {
                     source: 'lineDis',
                     paint: {
                         'circle-radius': 5,
-                        'circle-color': '#000'
+                        'circle-color': lineColor
                     },
                     filter: ['in', '$type', 'Point']
                 });
@@ -241,7 +273,7 @@ export default class Toobars {
                         'line-join': 'round'
                     },
                     paint: {
-                        'line-color': '#000',
+                        'line-color': lineColor,
                         'line-width': 2.5
                     },
                     filter: ['in', '$type', 'LineString']
@@ -251,23 +283,30 @@ export default class Toobars {
         
                 this._map.on('mousemove',this.mousemoveLineDisFun);
             }else{
-                this.lineClicked=false;     
-                this._container.getElementsByClassName('linedis-message-show')[0].innerHTML = ''
-                this._map.off('click',this.clickLineDisFun)
-                this._map.off('mousemove',this.mousemoveLineDisFun)            
-                // Add styles to the map
-                let points = this._map.getLayer('measure-points')
-                if(points){               
-                    this._map.removeLayer('measure-points');
-                }
-                if(this._map.getLayer('measure-lines')){
-                    this._map.removeLayer('measure-lines');   
-                }                                
-                this._map.removeSource('lineDis');       
+               this.removeLine()    
             }            
         })
     }
 
+    removeLine(){
+        this.lineClicked=false;     
+        if(this._container.getElementsByClassName('linedis-message-show').length > 0){
+            this._container.getElementsByClassName('linedis-message-show')[0].innerHTML = ''
+            this._map.off('click',this.clickLineDisFun)
+            this._map.off('mousemove',this.mousemoveLineDisFun)            
+            // Add styles to the map
+            let points = this._map.getLayer('measure-points')
+            if(points){               
+                this._map.removeLayer('measure-points');
+            }
+            if(this._map.getLayer('measure-lines')){
+                this._map.removeLayer('measure-lines');   
+            }       
+            if(this._map.getSource('lineDis')){
+                this._map.removeSource('lineDis');   
+            }
+        }        
+    }
 
     addRect(){
 
@@ -302,20 +341,20 @@ export default class Toobars {
         
     }
 
-    addPosition(btn){
-        
-        if(!this.mousemovePositionFun){
+    addPosition(btn){        
+        if(!this.mousemovePositionFun){            
             this.mousemovePositionFun =  (e) => {
+                // this.removeLine()
                 let lngLat = transform([e.lngLat.lng,e.lngLat.lat],true)
                 this._container.getElementsByClassName('position-message-show')[0].innerHTML = 
                 this.config.position.pointShow ? `经度：${lngLat[0].toFixed(6)}<br/>纬度：${lngLat[1].toFixed(6)}<br/>x:${e.point.x},y:${e.point.y}`
                 : `经度：${lngLat[0].toFixed(6)}<br/>纬度：${lngLat[1].toFixed(6)}`
             }     
         }
-        btn.addEventListener('click',()=>{
+        btn.addEventListener('click',()=>{            
             let box = this._container.getElementsByClassName('position-message-show')[0].parentNode;
             let pos = box.getBoundingClientRect()   
-            if(pos.x > document.body.clientWidth/2){
+            if(pos.x > this._map._container.clientWidth/2){
                 box.style.right = 0
                 box.style.left = ''
             }else{

package/src/components/index.js

@@ -7,16 +7,21 @@ import LineTool from './control/Toobars'
 import ScanLayer from './layer/ScanLayer'
 import TextLayer from './layer/TextLayer'
 import AlarmLayer from './layer/AlarmLayer'
-import WallLayer from './layer/WallLayer'
+// import WallLayer from './layer/ScanWallLayer'
 import AnimationLayer  from './layer/AnimationLayer'
 import CustomIconLayer from './layer/CustomIconLayer'
 import ThreeScanLayer from './layer/ThreeScanLayer'
 import ThreeWallLayer from './layer/ThreeWallLayer'
+import ThreeBoxWallLayer from './layer/ThreeBoxWallLayer'
+import WebGlWallLayer from './layer/WebGlWallLayer'
 import AnimationBarbsLayer  from './layer/AnimationBarbsLayer'
 import PathLineLayer from './layer/PathLineLayer'
 import ExtrusionLayer from './layer/ExtrusionLayer'
 import MarkerAreaLayer from './layer/MarkerAreaLayer'
+import ScanWallLayer from './layer/ScanWallLayer'
+import WallLayer from './layer/WallLayer'
 export{
+    ThreeBoxWallLayer,
     EasyMapMarker,
     LineTool,
     ScanLayer,
@@ -30,5 +35,7 @@ export{
     AnimationBarbsLayer,
     PathLineLayer,
     ExtrusionLayer,
-    MarkerAreaLayer
+    MarkerAreaLayer,
+    WebGlWallLayer,
+    ScanWallLayer
 } 

package/src/components/layer/AlarmLayer.js

@@ -4,8 +4,9 @@ import { sleep } from '../../utils/util';
 import {hasProperty,transform} from '../../utils/util'
 import Pulse from "../../utils/Pulses/Pulse";
 import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
-var tb = {}; 
+
 export default class AlarmLayer{
+    tb = {};
     alarmList = []
     scale = 0.01;
     iconHtml;
@@ -37,7 +38,7 @@ export default class AlarmLayer{
 
     onAdd(map, gl) {
         this.map = map;       
-        tb = new Threebox(
+        this.tb = new Threebox(
 			map,
 			gl, //get the context from Mapbox
 			{ defaultLights: true }
@@ -110,15 +111,15 @@ export default class AlarmLayer{
         //     units: 'meters',
         //     rotation: { x: 90, y: -90, z: 0 }
         // };
-        // tb.loadObj(options, (model) => {
+        // this.tb.loadObj(options, (model) => {
         //     model.setCoords(transform([lng,lat]));
         //     model.setRotation({ x: 0, y: 0, z: 241 });
-        //     tb.add(model);
+        //     this.tb.add(model);
         // });
         let center = transform([lng,lat]);
         var geometry = new THREE.CircleGeometry(0);
 		let circle = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: 0x660000 }));
-		circle = tb.Object3D({ obj: circle, units: 'meters',fixedZoom :15 ,anchor:'center'});
+		circle = this.tb.Object3D({ obj: circle, units: 'meters',fixedZoom :15 ,anchor:'center'});
         circle.addLabel = (HTMLElement, visible, center, height,ev)=>{
             if (HTMLElement) {                
                 let label = circle.drawLabelHTML(HTMLElement, visible, center, height);
@@ -133,11 +134,11 @@ export default class AlarmLayer{
         }
 		circle.setCoords(center);
         //circle.addEventListener('ObjectMouseOver', (e)=>{console.log(111,e)}, false)        
-        // let pulseObj = tb
+        // let pulseObj = this.tb
         //     .Object3D({ obj: this.pulse, units: "meters" ,anchor:'center'})
         //     .setCoords(center);
-        // tb.add(pulseObj)
-		tb.add(circle);
+        // this.tb.add(pulseObj)
+		this.tb.add(circle);
         point.circle = circle;
         if(point.iconHtml){
             circle.addLabel(point.iconHtml,true,circle.anchor,0.5)    
@@ -164,9 +165,9 @@ export default class AlarmLayer{
         // let circle = new THREE.CircleGeometry(500)
         // let material = new THREE.MeshBasicMaterial({color: 0xffff00,transparent:true})
         // let mesh = new THREE.Mesh(circle,material)
-        // let cube = tb.Object3D({obj:mesh,units:'meters'})
+        // let cube = this.tb.Object3D({obj:mesh,units:'meters'})
         // cube.setCoords(transform([lng,lat]))
-        // tb.add(mesh);
+        // this.tb.add(mesh);
     }
 
     setPopup(point){     
@@ -208,7 +209,7 @@ export default class AlarmLayer{
     //         a?.circle?.set({ scale:this.scale,duration:600})
     //     });
     //     await sleep(600)
-    //     tb.update(); 
+    //     this.tb.update(); 
     //     requestAnimationFrame(this.animate);
     // }
 
@@ -246,7 +247,7 @@ export default class AlarmLayer{
 
         // this.camera.projectionMatrix = m.multiply(l);     
         //this.pulse.update();   
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
     }
 }

package/src/components/layer/AnimationBarbsLayer.js

@@ -6,7 +6,7 @@ import { sleep } from '../../utils/util.js';
 import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
 import getBarbs from '../../utils/barbsHelper.js';
 import * as THREE from 'three'
-var tb = {}; 
+
 const actionStatus = {
   Play:0,
   Stop:1,
@@ -14,6 +14,7 @@ const actionStatus = {
 }
 
 export default class AnimationLayer{
+    tb = {}; 
     //当前帧率
     timerId
     speed=1//帧
@@ -93,7 +94,7 @@ export default class AnimationLayer{
       this.remove();  
       //重置状态
       this.current = 0;
-      this.actionStatus = 0; 
+      this.status = 0; 
       this.itemList = list
       // item.imageList.forEach(async _item => {
       //   let texture = new THREE.TextureLoader().load(
@@ -127,12 +128,12 @@ export default class AnimationLayer{
       let material = new THREE.MeshBasicMaterial({ color: 0xffffff });
       // 创建网格
       let mesh = new THREE.Mesh(geometry, material);
-      mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+      mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
       // 将网格添加到场景中
      // scene.add(mesh);
       mesh.setCoords( transform(center));
-      tb.renderer.outputEncoding = THREE.sRGBEncoding;
-      tb.add(mesh);  
+      this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+      this.tb.add(mesh);  
       this.meshList[id] = mesh
       // let texture = this.itemList[0].texture
       // let _item = this.itemList[0].item;
@@ -146,10 +147,10 @@ export default class AnimationLayer{
       //   material.color.convertSRGBToLinear();
       // let mesh = new THREE.Mesh(geometry, material);
       // mesh.name = 'scanimg'
-      // mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+      // mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
       // mesh.setCoords( transform(_item.center));
-      // tb.renderer.outputEncoding = THREE.sRGBEncoding;
-      // tb.add(mesh);     
+      // this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+      // this.tb.add(mesh);     
       // let dom =document.createElement('div')         
       // mesh.addLabel(dom,true,{x:mesh.anchor.x,y:mesh.anchor.y+_item.distance *1200,z:mesh.anchor.z},0)
       // mesh.label.element.className += ('' +this.textClass)
@@ -289,11 +290,11 @@ export default class AnimationLayer{
           let shapeItemInfo = this.barbsList[level]
           let _color = color.set(shapeItemInfo.color)
           let mesh = new THREE.Mesh(new THREE.ShapeGeometry( shapeItemInfo.shape.toShapes()[0] ), this.meshList[_item.data[i].id].model.material);
-          mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+          mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
           mesh.setCoords( transform(_item.data[i].center));
           this.meshList[_item.data[i].id].model.geometry = mesh.model.geometry
           this.meshList[_item.data[i].id].model.material.color= _color
-          tb.update(); 
+          this.tb.update(); 
           this.map.triggerRepaint();
         }        
         //console.log(this.meshList[_item.data[i].id].model.geometry,mesh) 
@@ -311,7 +312,7 @@ export default class AnimationLayer{
     }
     onAdd(map, gl) {
       this.map = map;    
-      tb = new Threebox(
+      this.tb = new Threebox(
         map,
         gl, //get the context from Mapbox
         { defaultLights: true ,passiveRendering:false}
@@ -319,7 +320,7 @@ export default class AnimationLayer{
       this.createInterval()       
     }
     render(gl, matrix) {      
-      tb.update(); 
+      this.tb.update(); 
       this.map.triggerRepaint();
   }
 }

package/src/components/layer/AnimationLayer.js

@@ -4,13 +4,14 @@ import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
 import {Threebox} from  '../../../lib/threebox-plugin'; 
 import { sleep } from '../../utils/util';
 import * as THREE from 'three'
-var tb = {}; 
+import { esMapWatchEffect } from '../../utils/mapWatch.js';
 const actionStatus = {
   Play:0,
   Stop:1,
   Pause:2
 }
 export default class AnimationLayer{
+    tb = {};
     //当前帧率
     timerId
     speed=1//帧
@@ -63,7 +64,7 @@ export default class AnimationLayer{
       this.remove();  
       //重置状态
       this.current = 0;
-      this.actionStatus = 0; 
+      this.status = 0; 
       this.itemList = []
       item.imageList.forEach(async _item => {
         let texture = new THREE.TextureLoader().load(
@@ -86,9 +87,9 @@ export default class AnimationLayer{
 
     remove(){
       if(this.obj.label){
-        this.obj.label.element.remove()        
-        tb.remove(this.obj)
+        this.obj.label.element.remove()                
       }      
+      this.tb.remove(this.obj)
     }
   
     loadMesh(){      
@@ -104,13 +105,13 @@ export default class AnimationLayer{
         material.color.convertSRGBToLinear();
       let mesh = new THREE.Mesh(geometry, material);
       mesh.name = 'scanimg'
-      mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+      mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
       mesh.setCoords( transform(_item.center));
-      tb.renderer.outputEncoding = THREE.sRGBEncoding;
-      tb.add(mesh);     
+      this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+      this.tb.add(mesh);     
       let dom =document.createElement('div')         
       mesh.addLabel(dom,true,{x:mesh.anchor.x,y:mesh.anchor.y+_item.distance *1200,z:mesh.anchor.z},0)
-      mesh.label.element.className += ('' +this.textClass)
+      mesh.label.element.className += (' esm-font-time ' +this.textClass)
       mesh.label.element.style.fontSize = '24px'   
       return mesh;
     }
@@ -118,16 +119,18 @@ export default class AnimationLayer{
     setOpacity(opacity){
       this.opacity = opacity
       this.obj.model.material.opacity = this.opacity;
+      this.tb.update(); 
+      this.map.triggerRepaint();
     }
 
     pause(){
       this.status = actionStatus.Pause
-      this.getProgress(this.progress.value,this.status)
+      this.getProgress(this.progress.value,this.status,this.current)
     }
 
     stop(){
       this.status = actionStatus.Stop
-      this.getProgress(this.progress.value,this.status)
+      this.getProgress(this.progress.value,this.status,this.current)
     }
 
     setCurrent(index){            
@@ -138,7 +141,7 @@ export default class AnimationLayer{
         return
       }
       this.status = actionStatus.Pause
-      this.getProgress(this.progress.value,this.status)
+      this.getProgress(this.progress.value,this.status,this.current)
     }
 
     next(){
@@ -148,7 +151,7 @@ export default class AnimationLayer{
       this.status = actionStatus.Pause
       this.current++
       this.animate()
-      this.getProgress(this.progress.value,this.status)
+      this.getProgress(this.progress.value,this.status,this.current)
     }
 
     previous(){
@@ -158,7 +161,7 @@ export default class AnimationLayer{
       this.status = actionStatus.Pause
       this.current--
       this.animate()
-      this.getProgress(this.progress.value,this.status)
+      this.getProgress(this.progress.value,this.status,this.current)
     }
 
     createInterval(){      
@@ -171,13 +174,14 @@ export default class AnimationLayer{
             this.current = 0;
             this.animate()
             this.status = actionStatus.Pause
-            this.getProgress(this.progress.value,this.status)            
+            this.getProgress(this.progress.value,this.status,this.current)            
           }else{            
             this.animate()
-            this.getProgress(this.progress.value,this.status)
+            this.getProgress(this.progress.value,this.status,this.current)
             this.current++;
           }                    
         }
+        this.updateStyleByTheme()
       },1000/this.speed)
     }
 
@@ -186,7 +190,7 @@ export default class AnimationLayer{
       this.status = actionStatus.Play;
       if(this.itemList.length == 0){
         this.status = actionStatus.Pause
-        this.getProgress(this.progress.value,this.status)       
+        this.getProgress(this.progress.value,this.status,this.current)       
         return 0;
       }
     }
@@ -198,7 +202,7 @@ export default class AnimationLayer{
       this.status = actionStatus.Play;
       if(this.itemList.length == 0){
         this.status = actionStatus.Pause
-        this.getProgress(this.progress.value,this.status)       
+        this.getProgress(this.progress.value,this.status,this.current)       
         return 0;
       }
     }
@@ -213,19 +217,32 @@ export default class AnimationLayer{
       if(this.timerId){
         clearInterval(this.timerId)
       }
+      this.remove()
       this.destory()
     }
     onAdd(map, gl) {
       this.map = map;    
-      tb = new Threebox(
+      this.tb = new Threebox(
         map,
         gl, //get the context from Mapbox
         { defaultLights: true ,passiveRendering:false}
       );  
-      this.createInterval()       
-    }
+      this.createInterval()   
+      esMapWatchEffect(()=>{
+        this.updateStyleByTheme()
+      })      
+    }
+    updateStyleByTheme(){
+      let elList = this.map._container.getElementsByClassName('esm-font-time')
+      this.map.theme = this.map.theme ? this.map.theme :this.map.style.stylesheet.theme
+      let color = this.map.theme.value == "dark"?"#fff" : "#000"
+      for(let el of elList){
+          el.style.color = color
+      }
+  }
+  
     render(gl, matrix) {      
-      tb.update(); 
+      this.tb.update(); 
       this.map.triggerRepaint();
   }
 }

package/src/components/layer/CustomIconLayer.js

@@ -3,8 +3,9 @@ import * as THREE from 'three'
 import { sleep } from '../../utils/util.js';
 import {hasProperty,transform} from '../../utils/util.js'
 import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
-var tb = {}; 
+
 export default class CustomIconLayer{
+    tb = {}; 
     iconList = []
     scale = 0.01;
     iconHtml;
@@ -30,7 +31,7 @@ export default class CustomIconLayer{
 
     onAdd(map, gl) {
         this.map = map;       
-        tb = new Threebox(
+        this.tb = new Threebox(
 			map,
 			gl, //get the context from Mapbox
 			{ defaultLights: true }
@@ -177,7 +178,7 @@ export default class CustomIconLayer{
         let center = transform([lng,lat]);
         var geometry = new THREE.CircleGeometry(0);
 		let circle = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: 0x660000 }));
-		circle = tb.Object3D({ obj: circle, units: 'meters' ,anchor:'center'});
+		circle = this.tb.Object3D({ obj: circle, units: 'meters' ,anchor:'center'});
         circle.addLabel = (HTMLElement, visible, center, height,ev)=>{
             if (HTMLElement) {                
                 let label = circle.drawLabelHTML(HTMLElement, visible, center, height);
@@ -189,7 +190,7 @@ export default class CustomIconLayer{
             }
         }
 		circle.setCoords(center);    
-		tb.add(circle);
+		this.tb.add(circle);
         point.circle = circle;        
         if(point.icon){
             
@@ -225,7 +226,7 @@ export default class CustomIconLayer{
     }   
 
     render(gl, matrix) { 
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
     }
 }