@ohuoy/easymap 1.0.21 → 1.0.23

package/src/components/layer/ThreeBoxWallLayer.js

@@ -0,0 +1,253 @@
+import * as THREE from 'three'
+import { getBBox } from '../../utils/util';
+import {Threebox} from  '../../../lib/threebox-plugin'; 
+ import { lnglatsToWorld ,normalizeVertices,flattenVectors,projectToWorld} from '../../utils/mapUtil';
+import CameraSync from '../../utils/CameraSync';
+const WORLD_SIZE = 1024000;
+// var this.
+// let this.scene;
+let cameraTransform;
+// var this.group = new THREE.Group();
+export default class ThreeWallLayer{
+    tb = {}; 
+    group = new THREE.Group();
+    scene;
+    opacity = 0.8
+    scale = 2
+    limit = 6
+    colorFun = ()=>{
+        return [0,0,0,0]
+    }
+    addedFun = null
+    constructor(id,config) {
+        this.id = id;
+        this.opacity = Number(config.opacity) 
+        if(config.colorFun){
+            this.colorFun = config.colorFun       
+        }        
+        this.type = 'custom';
+        this.renderingMode = '2d';    
+        this.addedFun = config.addedFun
+    }
+
+    drawPlane(){
+        let width = 5,height = 0,depth = 10,widthSegments = 1,heightSegments = 1,depthSegments = 1;
+        widthSegments = Math.floor( widthSegments );
+		heightSegments = Math.floor( heightSegments );
+		depthSegments = Math.floor( depthSegments );
+        const indices = [];
+		const vertices = [];
+		const normals = [];
+        const colors = []
+		const uvs = [];
+        let numberOfVertices = 0;
+		let groupStart = 0;
+        function buildPlane( u, v, w, udir, vdir, width, height, depth, gridX, gridY, materialIndex ) {
+            const segmentWidth = width / gridX;
+            const segmentHeight = height / gridY;
+            const widthHalf = width / 2;
+            const heightHalf = height / 2;
+            const depthHalf = depth / 2;
+            const gridX1 = gridX + 1;
+            const gridY1 = gridY + 1;
+            let vertexCounter = 0;
+            let groupCount = 0;
+            const vector = new THREE.Vector3();
+            const color= new THREE.Color();
+            // generate vertices, normals and uvs
+            for ( let iy = 0; iy < gridY1; iy ++ ) {
+                const y = iy * segmentHeight - heightHalf;
+                for ( let ix = 0; ix < gridX1; ix ++ ) {
+                    const x = ix * segmentWidth - widthHalf;
+                    // set values to correct vector component
+                    vector[ u ] = x * udir;
+                    vector[ v ] = y * vdir ;
+                    vector[ w ] = depthHalf;
+                    // now apply vector to vertex buffer      
+
+                    vertices.push( vector.x, vector.y, vector.z );
+                    // set values to correct vector component
+                    vector[ u ] = 0;
+                    vector[ v ] = 0;
+                    vector[ w ] = depth > 0 ? 1 : - 1;
+                    // now apply vector to normal buffer
+                    normals.push( vector.x, vector.y, vector.z );
+                    // uvs
+                    uvs.push( ix / gridX );
+                    uvs.push( 1 - ( iy / gridY ) );
+                    // counters
+                    vertexCounter += 1;
+                }
+            }
+            
+            // indices
+            // 1. you need three indices to draw a single face
+            // 2. a single segment consists of two faces
+            // 3. so we need to generate six (2*3) indices per segment
+            for ( let iy = 0; iy < gridY; iy ++ ) {
+    
+                for ( let ix = 0; ix < gridX; ix ++ ) {
+    
+                    const a = numberOfVertices + ix + gridX1 * iy;
+                    const b = numberOfVertices + ix + gridX1 * ( iy + 1 );
+                    const c = numberOfVertices + ( ix + 1 ) + gridX1 * ( iy + 1 );
+                    const d = numberOfVertices + ( ix + 1 ) + gridX1 * iy;
+                    // faces
+                    indices.push( a, b, d );
+                    indices.push( b, c, d );
+                    // let _color = color.setRGB(Math.random(),Math.random(),Math.random(),THREE.SRGBColorSpace )
+                    colors.push(Math.random(),Math.random(),Math.random())
+                    colors.push(Math.random(),Math.random(),Math.random())
+                    colors.push(Math.random(),Math.random(),Math.random())
+                    colors.push(Math.random(),Math.random(),Math.random())
+                    // increase counter
+                    groupCount += 6;
+                }
+            }
+            // add a group to the geometry. this will ensure multi material support
+            // scope.addGroup( groupStart, groupCount, materialIndex );
+            // calculate new start value for groups
+            groupStart += groupCount;
+            // update total number of vertices
+            numberOfVertices += vertexCounter;
+        }
+        // buildPlane( 'z', 'y', 'x', - 1, - 1, depth, height, width, depthSegments, heightSegments, 0 ); // px
+		// buildPlane( 'z', 'y', 'x', 1, - 1, depth , height, - width, depthSegments, heightSegments, 1 ); // nx
+		buildPlane( 'x', 'z', 'y', 1, 1, width, depth, height, widthSegments, depthSegments, 2 ); // py
+		buildPlane( 'x', 'z', 'y', 1, -1, width, depth, - height , widthSegments, depthSegments, 3 ); // ny
+        buildPlane( 'x', 'z', 'y', 1, 1, width, depth, height+10, widthSegments, depthSegments, 2 ); // py
+		buildPlane( 'x', 'z', 'y', 1, -1, width, depth, - height+10 , widthSegments, depthSegments, 3 ); // ny
+        return {
+            indices,vertices,normals,colors,uvs
+        }
+    }
+    drawWallPoints(dataList){
+        let center = [dataList[0].lng,dataList[0].lat] 
+        let {indices,vertices,normals,colors,uvs} = this.drawPlane()
+        // indices = [
+        //     0,
+        //     2,
+        //     1,
+        //     2,
+        //     3,
+        //     1,
+        //     4,
+        //     5,
+        //     6,
+        //     6,
+        //     5,
+        //     7
+        // ]
+        // vertices = [
+        //     -2.5,
+        //     0,
+        //     -5,
+        //     2.5,
+        //     3,
+        //     -5,
+        //     -2.5,
+        //     0,
+        //     5,
+        //     2.5,
+        //     3,
+        //     5,
+        //     -2.5,
+        //     0,
+        //     -5,
+        //     2.5,
+        //     3,
+        //     -5,
+        //     -2.5,
+        //     0,
+        //     5,
+        //     2.5,
+        //     3,
+        //     5,
+        //     // -2.5,
+        //     // 0,
+        //     // 5,
+        //     // 2.5,
+        //     // 3,
+        //     // 5,
+        //     // -2.5,
+        //     // 0,
+        //     // -5,
+        //     // 2.5,
+        //     // 3,
+        //     // -5
+        // ]
+        let geometry = new THREE.BufferGeometry();  
+        geometry.setIndex( indices );
+        geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+        // geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+        geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+        // geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
+        let material = new THREE.MeshBasicMaterial( {
+            vertexColors: true,
+        } );
+        
+        // material.needsUpdate = true;
+        material.color.convertSRGBToLinear();
+        let mesh = new THREE.Mesh( geometry, material );
+        mesh = this.tb.Object3D({ obj: mesh, fixedZoom :15 ,anchor:'center'});
+        mesh.setCoords(center)
+        this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+        this.tb.add(mesh); 
+        this.map.jumpTo({center:center})
+    }
+
+
+    onAdd(map, gl) {
+        this.map = map;        
+        this.tb = new Threebox(
+            map,
+            gl, //get the context from Mapbox
+            { defaultLights: true ,passiveRendering:false}
+          );          
+        if(this.addedFun)       
+            this.addedFun()
+    }
+
+    render(gl, matrix) {    
+        this.tb.update(); 
+        // // const rotationX = new THREE.Matrix4().makeRotationAxis(
+        // //     new THREE.Vector3(1, 0, 0),
+        // //     modelTransform.rotateX
+        // // );
+        // // const rotationY = new THREE.Matrix4().makeRotationAxis(
+        // //     new THREE.Vector3(0, 1, 0),
+        // //     modelTransform.rotateY
+        // // );
+        // // const rotationZ = new THREE.Matrix4().makeRotationAxis(
+        // //     new THREE.Vector3(0, 0, 1),
+        // //     modelTransform.rotateZ
+        // // );
+
+        // // const m = new THREE.Matrix4().fromArray(matrix);
+        // // const l = new THREE.Matrix4()
+        // //     .makeTranslation(
+        // //         modelTransform.translateX,
+        // //         modelTransform.translateY,
+        // //         modelTransform.translateZ
+        // //     )
+        // //     .scale(
+        // //         new THREE.Vector3(
+        // //             modelTransform.scale,
+        // //             -modelTransform.scale,
+        // //             modelTransform.scale
+        // //         )
+        // //     )
+        // //     .multiply(rotationX)
+        // //     .multiply(rotationY)
+        // //     .multiply(rotationZ);
+
+        // //this.camera.projectionMatrix = m.multiply(l);
+        // // var m = new THREE.Matrix4().fromArray(matrix);
+        // // this.camera.projectionMatrix = m.multiply(cameraTransform);;
+        // this.renderer.resetState();
+        
+        // this.renderer.render(this.scene, this.camera);
+        this.map.triggerRepaint();
+    }
+
+}

package/src/components/layer/ThreeScanLayer.js

@@ -7,8 +7,9 @@ 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 = {}; 
+import { esMapWatchEffect } from '../../utils/mapWatch.js';
 export default class ThreeScanLayer{
+    tb = {};
     drawArray = []
     opacity = 0.8
     textClass = ''
@@ -23,11 +24,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,8 +37,8 @@ export default class ThreeScanLayer{
             }
         }  
         this.drawArray = this.drawArray.filter(a=>a) 
-        tb.update(); 
-        this.map.triggerRepaint();
+        // this.tb.update(); 
+        // this.map.triggerRepaint();
         await sleep(delay)
         let canvas = this.map.getCanvas()
         return canvas.toDataURL();
@@ -50,7 +51,7 @@ export default class ThreeScanLayer{
 
     remove(point){
         point.mesh.label.element.remove()        
-        tb.remove(point.mesh)
+        this.tb.remove(point.mesh)
     }
 
     removeAll(){
@@ -59,7 +60,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 +83,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 +93,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,20 +114,33 @@ 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);
         // }
     }
 
+    async 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"
+        if(elList.length == 0){
+            await sleep(200)
+        }
+        for(let el of elList){
+            el.style.color = color
+        }
+    }
+
     async update(point){        
         let texture 
         point.text = point.text ? point.text:''
+        point.height = point.height ? point.height:point.width;
         if(this.forceClear){
             THREE.Cache.clear();
             texture?.dispose();
@@ -153,11 +167,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;
         }
@@ -168,11 +189,12 @@ export default class ThreeScanLayer{
         let index = this.drawArray.findIndex(a=>a.center[0] == point.center[0] && a.center[1] == point.center[1])
         if(index >= 0){
             let _point = this.drawArray[index]
-            if(_point && point.width != _point.width){
+            _point.height = _point.height?_point.height:_point.width
+            if(_point && (point.width != _point.width || point.height != _point.height)){
                 this.remove(this.drawArray[index])   
                 this.drawArray[index] = null     
                 this.drawArray = this.drawArray.filter(a=>a)    
-                let geometry = new THREE.PlaneGeometry(point.width *20,point.width*20);        
+                let geometry = new THREE.PlaneGeometry(point.width *20,point.height*20);        
                 //geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
                 let material = new THREE.MeshBasicMaterial({    
                     map:texture,     
@@ -182,13 +204,13 @@ 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)
+                mesh.label.element.className += (' esm-font-time ' +this.textClass)
                 mesh.label.element.style.fontSize = '24px'   
                 mesh.label.element.innerHTML = point.text
                 point.mesh = mesh;
@@ -207,7 +229,7 @@ export default class ThreeScanLayer{
                 }
             }            
         }else{
-            let geometry = new THREE.PlaneGeometry(point.width *20,point.width*20);        
+            let geometry = new THREE.PlaneGeometry(point.width *20,point.height*20);        
             //geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
             let material = new THREE.MeshBasicMaterial({    
                 map:texture,     
@@ -217,13 +239,13 @@ 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)
+            mesh.label.element.className += (' esm-font-time ' +this.textClass)
             mesh.label.element.style.fontSize = '24px'   
             mesh.label.element.innerHTML = point.text
             point.mesh = mesh;
@@ -231,7 +253,8 @@ export default class ThreeScanLayer{
             if(point.rect){
                 this.updateRect(point)
             }
-        }
+        }    
+        this.updateStyleByTheme()
     }
 
 
@@ -254,10 +277,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 +289,18 @@ 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}
-        );          
+        );   
+        esMapWatchEffect(()=>{
+            this.updateStyleByTheme()
+        })       
     }
-    render(gl, matrix) {      
-        tb.update(); 
+    render(gl, matrix) {    
+        this.tb.update(); 
         this.map.triggerRepaint();
     }