@ohuoy/easymap 1.0.21 → 1.0.22

package/src/components/layer/MarkerAreaLayer.js

@@ -3,12 +3,13 @@ import {hasProperty,transform,downloadFileByBase64, sleep} from '../../utils/uti
 import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
 import * as THREE from 'three'
 import {Threebox} from  '../../../lib/threebox-plugin'; 
-var tb = {}; 
-let markerGroup = new THREE.Group();
+// let this.markerGroup = new THREE.Group();
 export default class MarkerAreaLayer{
+    tb = {}; 
     markerArr = []
     opacity = 0.8
     textClass = ''
+    markerGroup = new THREE.Group();
     constructor(id,config) {
         this.id = id;
         this.opacity = config?.opacity ? Number(config.opacity):0.8
@@ -24,7 +25,7 @@ export default class MarkerAreaLayer{
             transparent: true       
         });
         let mesh = new THREE.Mesh( geometry, material) ;
-        mesh = tb.Object3D({ obj: mesh, units: 'meters' ,anchor:'center'});
+        mesh = this.tb.Object3D({ obj: mesh, units: 'meters' ,anchor:'center'});
         mesh.setCoords(transform(item.coords))
         let geometryB = new THREE.CylinderGeometry( 5000 * item.size,7000 * item.size, 4000 * item.size,32)
         let materialB = new THREE.MeshBasicMaterial({
@@ -38,11 +39,11 @@ export default class MarkerAreaLayer{
         meshB.position.z -= 600000
         meshB.rotation.set(-Math.PI / 2, 0, 0);
        
-        meshB = tb.Object3D({ obj: meshB, units: 'meters' ,anchor:'center',rotation: { x: 90, y: 0, z: 0 } });
+        meshB = this.tb.Object3D({ obj: meshB, units: 'meters' ,anchor:'center',rotation: { x: 90, y: 0, z: 0 } });
         meshB.setCoords(transform(item.coords))
         //meshB.setRotation({x:0,y:Math.PI / 4,z:0})
-        markerGroup.add(mesh)
-        markerGroup.add(meshB)
+        this.markerGroup.add(mesh)
+        this.markerGroup.add(meshB)
     }
 
     
@@ -60,15 +61,15 @@ export default class MarkerAreaLayer{
 
     onAdd(map, gl) {
         this.map = map;    
-        tb = new Threebox(
+        this.tb = new Threebox(
           map,
           gl, //get the context from Mapbox
           { defaultLights: true ,passiveRendering:false}
         );   
-        tb.add(markerGroup)       
+        this.tb.add(this.markerGroup)       
     }
     render(gl, matrix) {      
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
     }
   

package/src/components/layer/PathLineLayer.js

@@ -4,8 +4,9 @@ import { getBBox } from '../../utils/util.js';
 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 PathLineLayer{
+    tb={}
     lines = []
     constructor(id,config) {
         this.id = id;        
@@ -14,7 +15,7 @@ export default class PathLineLayer{
     }
 
     remove(){
-        this.lines.forEach(a=>tb.remove(a))
+        this.lines.forEach(a=>this.tb.remove(a))
     }
     
     drawLine(list){
@@ -57,8 +58,8 @@ export default class PathLineLayer{
             //     width: Math.random() + 1 // random width between 1 and 2
             // }
     
-            let lineMesh = tb.line(line);            
-            tb.add(lineMesh)
+            let lineMesh = this.tb.line(line);            
+            this.tb.add(lineMesh)
             this.lines.push(lineMesh)
         }) 
         this.map.fitBounds(getBBox(list.map(a=>a.point)), {
@@ -70,14 +71,14 @@ export default class PathLineLayer{
 
     onAdd(map, gl) {
         this.map = map;    
-        tb = new Threebox(
+        this.tb = new Threebox(
           map,
           gl, //get the context from Mapbox
           { defaultLights: true ,passiveRendering:false}
         );          
     }
     render(gl, matrix) {      
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
     }
 }

package/src/components/layer/ThreeScanLayer.js

@@ -7,8 +7,8 @@ import { Line2 } from 'three/addons/lines/Line2.js';
 import {LineMaterial} from 'three/examples/jsm/lines/LineMaterial.js'
 import * as THREE from 'three'
 import {Threebox} from  '../../../lib/threebox-plugin'; 
-var tb = {}; 
 export default class ThreeScanLayer{
+    tb = {};
     drawArray = []
     opacity = 0.8
     textClass = ''
@@ -23,11 +23,11 @@ export default class ThreeScanLayer{
     }
 
     //同时渲染多个地点图片文本
-    async drawImageList(list,delay = 300){              
+    async drawImageList(list,delay = 300){                 
         for(let i in list){
             await this.update(list[i])
             //this.drawArray.push(list[i])
-        }    
+        }   
         for(let i in this.drawArray){
             let _point = list.find(a=>a.center[0] == this.drawArray[i].center[0] && a.center[1] == this.drawArray[i].center[1])
             if(!_point){
@@ -36,7 +36,7 @@ export default class ThreeScanLayer{
             }
         }  
         this.drawArray = this.drawArray.filter(a=>a) 
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
         await sleep(delay)
         let canvas = this.map.getCanvas()
@@ -50,7 +50,7 @@ export default class ThreeScanLayer{
 
     remove(point){
         point.mesh.label.element.remove()        
-        tb.remove(point.mesh)
+        this.tb.remove(point.mesh)
     }
 
     removeAll(){
@@ -59,7 +59,7 @@ export default class ThreeScanLayer{
             this.drawArray[i] = null
         }  
         this.drawArray = this.drawArray.filter(a=>a) 
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
     }
 
@@ -82,7 +82,7 @@ export default class ThreeScanLayer{
         let w = point.rect.width ? point.rect.width: this.rectMesh.w 
         if(!this.rectMesh.mesh || w!= this.rectMesh.w || point.rect.position[0]!=this.rectMesh.lng || point.rect.position[1] !=this.rectMesh.lat){
             if(this.rectMesh.mesh){
-                tb.remove(this.rectMesh.mesh)
+                this.tb.remove(this.rectMesh.mesh)
             }
             let bounds = getLayerMapPosition(w,transform(point.rect.position))
             bounds.push(bounds[0])
@@ -92,11 +92,11 @@ export default class ThreeScanLayer{
                 width: 20 // random width between 1 and 2
             }
 
-            let lineMesh = tb.line(lineOptions);
+            let lineMesh = this.tb.line(lineOptions);
             this.rectMesh.mesh = lineMesh;
-            tb.add(lineMesh)
+            this.tb.add(lineMesh)
             // if(this.rectMesh.mesh){
-            //     tb.remove(this.rectMesh.mesh)
+            //     this.tb.remove(this.rectMesh.mesh)
             // }
             // let plane = new THREE.PlaneGeometry( w*20,w*20);
             // let material = new THREE.MeshLambertMaterial({
@@ -113,14 +113,14 @@ export default class ThreeScanLayer{
               
             // let line = new THREE.LineSegments(edges, edgesMaterial);
             // mesh.add(line);
-            // mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+            // mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
             // this.rectMesh.mesh = mesh;
             // this.rectMesh.w = w;
             
         }
         // if(this.rectMesh.mesh){
         //     this.rectMesh.mesh.setCoords(transform(point.rect.position))
-        //     tb.add(this.rectMesh.mesh);
+        //     this.tb.add(this.rectMesh.mesh);
         // }
     }
 
@@ -153,11 +153,18 @@ export default class ThreeScanLayer{
                 point.url += `?tempid=${Math.random()}`
             }
             let p = ()=>new Promise(function(resolve,reject){
-                new THREE.TextureLoader().load(point.url,(_texture)=>{
-                    resolve(_texture)
-                })
+                try{
+                    new THREE.TextureLoader().load(point.url,(_texture)=>{
+                        resolve(_texture)
+                    },()=>{},()=>{
+                        resolve(null)
+                    })
+                }catch{
+                    reject(null)
+                }
             })            
-            texture = await p()            
+            texture = await p()  
+            if(!texture)  return;
             texture.center.set(0.5,0.5);
             texture.rotation = -Math.PI;
         }
@@ -182,10 +189,10 @@ export default class ThreeScanLayer{
                 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(point.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+point.distance *1200,z:mesh.anchor.z},0)
                 mesh.label.element.className += ('' +this.textClass)
@@ -217,10 +224,10 @@ export default class ThreeScanLayer{
             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(point.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+point.distance *1200,z:mesh.anchor.z},0)
             mesh.label.element.className += ('' +this.textClass)
@@ -254,10 +261,10 @@ export default class ThreeScanLayer{
         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(point.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+point.distance *1200,z:mesh.anchor.z},0)
         mesh.label.element.className += ('' +this.textClass)
@@ -266,15 +273,15 @@ export default class ThreeScanLayer{
     }
 
     onAdd(map, gl) {
-        this.map = map;    
-        tb = new Threebox(
+        this.map = map;   
+        this.tb = new Threebox(
           map,
           gl, //get the context from Mapbox
           { defaultLights: true ,passiveRendering:false}
         );          
     }
-    render(gl, matrix) {      
-        tb.update(); 
+    render(gl, matrix) {    
+        this.tb.update(); 
         this.map.triggerRepaint();
     }
   

package/src/components/layer/ThreeWallLayer.js

@@ -4,11 +4,14 @@ import {Threebox} from  '../../../lib/threebox-plugin';
  import { lnglatsToWorld ,normalizeVertices,flattenVectors,projectToWorld} from '../../utils/mapUtil';
 import CameraSync from '../../utils/CameraSync';
 const WORLD_SIZE = 1024000;
-var tb = {}; 
-let scene;
+// var this.
+// let this.scene;
 let cameraTransform;
-var group = new THREE.Group();
+// var this.group = new THREE.Group();
 export default class ThreeWallLayer{
+    tb = {}; 
+    group = new THREE.Group();
+    scene;
     opacity = 0.8
     scale = 2
     limit = 6
@@ -152,9 +155,9 @@ export default class ThreeWallLayer{
         } );
         //material.color.convertSRGBToLinear();
         let mesh = new THREE.Mesh( geometry, material );
-        // mesh = tb.Object3D({ obj: mesh, units: 'meters',anchor:'center'});
-        // tb.add(mesh);
-        group.add( mesh );     
+        // mesh = this.tb.Object3D({ obj: mesh, units: 'meters',anchor:'center'});
+        // this.tb.add(mesh);
+        this.group.add( mesh );     
         this.map.fitBounds(getBBox(dataList.map(a=>[a.lng,a.lat])), {
             padding: {top: 45, bottom:45, left: 35, right: 35},
             maxZoom:11,
@@ -234,22 +237,22 @@ export default class ThreeWallLayer{
 				} );
 
 				let mesh = new THREE.Mesh( geometry, material );
-				scene.add( mesh );
-                // mesh = tb.Object3D({ obj: mesh, units: 'meters',anchor:'center'});
-                // tb.add(mesh);  
+				this.scene.add( mesh );
+                // mesh = this.tb.Object3D({ obj: mesh, units: 'meters',anchor:'center'});
+                // this.tb.add(mesh);  
         // for(let line of lines){
         //     this.createLine(line.coords,`rgba(${line.color.join(',')})`)
         // }
     }
 
     createLine(path,color){
-        let line = tb.line({
+        let line = this.tb.line({
             width:this.width,
             opacity:this.opacity,
             color:color,
             geometry:path
         })
-        tb.add(line)
+        this.tb.add(line)
     }
 
     onAdd(map, gl) {
@@ -258,9 +261,9 @@ export default class ThreeWallLayer{
         const w = container.clientWidth;
         const h = container.clientHeight;
         this.camera = new THREE.PerspectiveCamera(map.transform.fov, w / h, 0.1, 1e21);
-        scene = new THREE.Scene();  
-        scene.add(group)
-        new CameraSync(this.map, this.camera, group);
+        this.scene = new THREE.Scene();  
+        this.scene.add(this.group)
+        new CameraSync(this.map, this.camera, this.group);
         // let centerlngLat = map.getCenter()
         // let center = mapboxgl.MercatorCoordinate.fromLngLat(centerlngLat)
         // const scale = center.meterInMercatorCoordinateUnits();
@@ -297,17 +300,17 @@ export default class ThreeWallLayer{
         // create two three.js lights to illuminate the model
         // let directionalLight = new THREE.DirectionalLight(0xffffff);
         // directionalLight.position.set(0, -70, 100).normalize();
-        // scene.add(directionalLight);
+        // this.scene.add(directionalLight);
 
         // let directionalLight2 = new THREE.DirectionalLight(0xffffff);
         // directionalLight2.position.set(0, 70, 100).normalize();
-        // scene.add(directionalLight2);  
-        // tb = new Threebox(
+        // this.scene.add(directionalLight2);  
+        // this.tb = new Threebox(
         //   map,
         //   gl, //get the context from Mapbox
         //   { defaultLights: true ,passiveRendering:false}
         // ); 
-        //scene.add(new THREE.AxesHelper(1000));
+        //this.scene.add(new THREE.AxesHelper(1000));
         this.renderer = new THREE.WebGLRenderer({
             canvas: map.getCanvas(),
             context: gl,
@@ -321,7 +324,7 @@ export default class ThreeWallLayer{
     }
 
     render(gl, matrix) {      
-        //tb.update(); 
+        //this.tb.update(); 
         // const rotationX = new THREE.Matrix4().makeRotationAxis(
         //     new THREE.Vector3(1, 0, 0),
         //     modelTransform.rotateX
@@ -357,7 +360,8 @@ export default class ThreeWallLayer{
         // var m = new THREE.Matrix4().fromArray(matrix);
         // this.camera.projectionMatrix = m.multiply(cameraTransform);;
        // this.renderer.resetState();
-        this.renderer.render(scene, this.camera);
+        
+        this.renderer.render(this.scene, this.camera);
         this.map.triggerRepaint();
     }