@ohuoy/easymap 1.0.21 → 1.0.23

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
@@ -27,301 +30,269 @@ export default class ThreeWallLayer{
         this.addedFun = config.addedFun
     }
 
-
-    drawWall(dataList){        
-        let geometry = new THREE.BufferGeometry();  
+   
+    drawWall(dataList,offx = 0,offy = 0,r = false){
+        this.removeObj(this.group);           
+        let geometry = new THREE.BufferGeometry(); 
+        // let geometryList = []
         let indices  =[]    
-        let vertices = [            
-                // 82.71083,
-                // 2,
-                // 40.68735,
-
-                // 82.71083,
-                // 4,
-                // 40.68735,
-
-                // 82.71083,
-                // 6,
-                // 40.68735,
-
-                // 82.42999,
-                // 2,
-                // 40.58893,
-
-                // 82.42999,
-                // 4,
-                // 40.58893,
-
-                // 82.42999,
-                // 6,
-                // 40.58893,
-
-                // 82.3689,
-                // 2,
-                // 40.79668,
-
-                // 82.3689,
-                // 4,
-                // 40.79668,
-
-                // 82.3689,
-                // 6,
-                // 40.79668,
-
-                // 82.30361,
-                // 2,
-                // 40.76822,
-
-                // 82.30361,
-                // 4,
-                // 40.76822,
-
-                // 82.30361,
-                // 6,
-                // 40.76822,
-
-                // 82.15195,
-                // 2,
-                // 40.261634,
-
-                // 82.15195,
-                // 4,
-                // 40.261634,
-
-                // 82.15195,
-                // 6,
-                // 40.261634
-        ]
+        let vertices = []
         let normals = [];
         let colors = []
+        let uvs = [];
         let distance = dataList[0].distance;
         let noDataLenth = distance[0] / distance[1]
-        let limitIndex = this.limit / distance[1]
+        let limitIndex = Math.floor(this.limit / distance[1])
         limitIndex = limitIndex >= distance[2] -1 ? distance[2] -1 : limitIndex
-        dataList = dataList
+        // dataList = dataList.slice(0,5)
         let len = limitIndex + noDataLenth;
         let index = 0;
         const _color = new THREE.Color();
+        let positionList = [];
+
         for(let i in dataList){
-            i = Number(i)            
-            let item = dataList[i]            
+            let _i = Number(i);
+            let bo = i < dataList.length -1;
+            let nextIndex = _i +1;
+            let item = dataList[_i]
             let lng = item.lng;
             let lat = item.lat;
-            let position = projectToWorld([lng,lat])
-            if(i < dataList.length -1){
-                let next = dataList[i+1]
+            let position = projectToWorld([lng,lat])            
+            // let position =  mapboxgl.MercatorCoordinate.fromLngLat({lng:item.lng,lat:item.lat})
+            if(bo){
+                let next = dataList[nextIndex]
                 if(lng == next.lng && lat == next.lat){
                     continue;
                 }
-            }
-            
-            for(let j in item.data){
-                j = Number(j)
-                let indexJ = j+noDataLenth-1;                
-                if(j > -noDataLenth && j <= limitIndex){
-                    //let position = mapboxgl.MercatorCoordinate.fromLngLat({lng: lng, lat: lat}, (j+noDataLenth) * this.scale);                    
-         
-                    //(Math.floor(position.x * 1000000 )/10000,(j+noDataLenth) * this.scale ,Math.floor(position.y * 1000000)/10000)
-                    vertices.push(position.x ,position.y,position.z+(j+noDataLenth) * this.scale )
-                   // debugger
-                    normals.push( 0, 1, 0);
-                    let color = this.colorFun(item.data[j])
-                    _color.setRGB( color[0]/255, color[1]/255, color[2]/255, THREE.SRGBColorSpace );
-                    colors.push( _color.r, _color.g, _color.b ,color[3]);
-                    if(i < (dataList.length -2) && j< (limitIndex)){                                            
-                        let a = index +1
-                        let b = index     
-                        let c = index +len
-                        let d = index +len +1
-                        indices.push( a, b, d ); // face one
-                        indices.push( b, c, d ); // face two   
-                        index = index +1;                     
-                    }
-                }                
-            } 
-            index = vertices.length / 3         
+                let nposition = projectToWorld([next.lng,next.lat])     
+                let x = position.x,y = position.y,z= position.z;
+                
+                let nx = nposition.x ,ny =nposition.y,nz = position.z;
+                let c,_n;
+                positionList.push(position)
+
+                let p1 = new THREE.Vector3(x,y,z+this.scale )
+                let p2 = new THREE.Vector3(x,y,z+2*this.scale)
+                let p3 = new THREE.Vector3(nx,ny,nz+2*this.scale)
+                const a = p2.clone().sub(p1);
+                const b = p2.clone().sub(p3); 
+                c = a.clone().cross(b) ;  
+                _n= c.normalize(); 
+                // normals.push(_n.x,_n.y,_n.z)   
+                // let arrowHelper = new THREE.ArrowHelper( new THREE.Vector3(_n.x, _n.y, _n.z), new THREE.Vector3( 0, 0, 0 ), 100, 0xffff00 );
+                // this.scene.add(arrowHelper)
+                // console.log(_n)
+                for(let j in item.data){
+                    let h = (j * 1 -1 +noDataLenth) * this.scale                  
+                    j = Number(j)       
+                    if(j > -noDataLenth && j <= limitIndex){
+                        //let position = mapboxgl.MercatorCoordinate.fromLngLat({lng: lng, lat: lat}, (j+noDataLenth) * this.scale);                                       
+                        //(Math.floor(position.x * 1000000 )/10000,(j+noDataLenth) * this.scale ,Math.floor(position.y * 1000000)/10000)
+                         let point = [position.x + offx, position.y +offy ,position.z+h]
+                         this.point = point
+                        //正面
+                        vertices.push(...point)
+                      
+                        //设置法线
+                        normals.push(_n.x,_n.z,_n.y)                            
+                        uvs.push(j/limitIndex);
+                        uvs.push(1-_i/dataList.length-1);
+          
+                    //     uvs.push(j)
+                    //     uvs.push(j-0.5)
+                    //    // debugger
+                    //     normals.push( 1, 1, 1);
+                        let color = this.colorFun(item.data[j])
+                        _color.setRGB( color[0]/255, color[1]/255, color[2]/255, THREE.SRGBColorSpace );
+                        colors.push( _color.r, _color.g, _color.b);
+                        if(i < (dataList.length -2) && j< (limitIndex -1)){                                          
+                            let a = index 
+                            let b = index +1    
+                            let c = index +len 
+                            let d = index +len  +1
+                            // if(_n.x < 0 && _n.y > 0){
+
+                            //     // indices.push(a, b, c);
+                            //     // indices.push(c, b,d);        
+                            // }
+                            // else if(_n.x > 0 && _n.y > 0){
+                            //     // indices.push( b, c,a);
+                            //     // indices.push( b,d,c);  
+                            //      indices.push(c, a, b);
+                            //     indices.push( d,c,b);          
+                            // }
+                            // else{
+                            //     // indices.push(a, c, b);
+                            //     // indices.push(c, d,b);    
+
+                            // }                            
+                                //正
+                                if(r){
+                                    indices.push( b,d,a); // face one
+                                    indices.push( a, d, c ); 
+                                }else{
+                                    indices.push( b,a,d); // face one
+                                    indices.push( a, c, d ); 
+                                }
+                                // indices.push( b,d,a); // face one
+                                // indices.push( a, d, c ); 
+                               
+                                // geometry.addGroup(b,6,0)
+                                                     
+                            }
+                            index = index +1;    
+                        }                        
+                    }                
+                } 
+                index = vertices.length / 3
         }
+                        
+        
         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, 4) );
+        geometry.setAttribute( 'position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
+        // geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+        geometry.setAttribute( 'color', new THREE.BufferAttribute(new Float32Array(colors), 3) );
+        
+        geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
+        geometry.computeBoundingSphere();
+        geometry.computeVertexNormals();
         let material = new THREE.MeshBasicMaterial( {
+            vertexColors: true,
             side: THREE.DoubleSide,
-            transparent:true,
-            vertexColors: true
+            transparent: true,
+            opacity: this.opacity,
+            depthWrite: false,  // 关闭深度写入，避免透明物体干扰
+            depthTest: true,
+            // polygonOffset: true,       // 启用深度偏移
+            // polygonOffsetFactor: 1,    // 偏移系数，正值将物体"推近"相机
+            // polygonOffsetUnits: 1
         } );
-        //material.color.convertSRGBToLinear();
+
+        // const material = new THREE.MeshPhongMaterial({
+        //     vertexColors: true,
+        //     side: THREE.DoubleSide,
+        //     transparent: true,
+        //     opacity: this.opacity,
+        //     depthWrite: true,
+        //     depthTest: true,
+        //     polygonOffset: true,       // 启用深度偏移
+        //     polygonOffsetFactor: 1,    // 偏移系数，正值将物体"推近"相机
+        //     polygonOffsetUnits: 1
+        // });
+      
+        // const shader = {
+        //     vertexShader: `
+        //     ${THREE.ShaderChunk.common}
+        //     ${THREE.ShaderChunk.logdepthbuf_pars_vertex}
+        //     attribute vec3 color;
+        //     varying vec3 v_color;
+        //     void main() {
+        //         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        //         v_color = color;
+        //         ${THREE.ShaderChunk.logdepthbuf_vertex}
+        //     }
+        //     `,
+        //     fragmentShader: `
+        //     ${THREE.ShaderChunk.logdepthbuf_pars_fragment}
+        //     varying vec3 v_color;
+        //     void main() {
+        //         float depth = gl_FragCoord.z; 
+        //         gl_FragColor = vec4(vec3(depth), 1.0);
+               
+                
+        //     }
+        //     `,
+        // };      
+        // gl_FragDepth = 1.0 /gl_FragCoord.y;
+        // gl_FragColor = vec4(v_color,1);
+        // #gl_FragDepth = gl_FragCoord.x * -1.0;  
+        // const material = new THREE.ShaderMaterial({
+        //     ...shader,
+           
+        //     depthTest: true,
+        //     depthWrite:true,
+        //     transparent: true,
+        //     side:THREE.DoubleSide,
+        // });
+        
+        // material.needsUpdate = true;
+        // 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 );     
+        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,
             pitch:30
-        });  
-       
-    }
-
-    drawWallTest(dataList){  
-        let geometry = new THREE.BufferGeometry();  
-        let indices  =[]    
-        let vertices = []
-        let normals = [];
-        let colors = []
-        let size = 20;
-				let segments = 10;
-
-				let halfSize = size / 2;
-				let segmentSize = size / segments;
-
-				let _color = new THREE.Color();
-
-				// generate vertices, normals and color data for a simple grid geometry
-
-				for ( let i = 0; i <= segments; i ++ ) {
-
-					let y = ( i * segmentSize ) - halfSize;
-
-					for ( let j = 0; j <= segments; j ++ ) {
-
-						let x = ( j * segmentSize ) - halfSize;
-
-						vertices.push( x, - y, 0 );
-						normals.push( 0, 0, 1 );
-
-						let r = ( x / size ) + 0.5;
-						let g = ( y / size ) + 0.5;
-
-						_color.setRGB( r, g, 1, THREE.SRGBColorSpace );
-
-						colors.push( _color.r, _color.g, _color.b );
-
-					}
-
-				}
-
-				// generate indices (data for element array buffer)
-
-				for ( let i = 0; i < segments; i ++ ) {
-
-					for ( let j = 0; j < segments; j ++ ) {
-
-						let a = i * ( segments + 1 ) + ( j + 1 );
-						let b = i * ( segments + 1 ) + j;
-						let c = ( i + 1 ) * ( segments + 1 ) + j;
-						let d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );
-
-						// generate two faces (triangles) per iteration
-
-						indices.push( a, b, d ); // face one
-						indices.push( b, c, d ); // face two
-
-					}
-
-				}
-
-				//
-
-				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 ) );
-
-				let material = new THREE.MeshPhongMaterial( {
-					side: THREE.DoubleSide,
-					vertexColors: true
-				} );
+        });
+    } 
 
-				let mesh = new THREE.Mesh( geometry, material );
-				scene.add( mesh );
-                // mesh = tb.Object3D({ obj: mesh, units: 'meters',anchor:'center'});
-                // tb.add(mesh);  
-        // for(let line of lines){
-        //     this.createLine(line.coords,`rgba(${line.color.join(',')})`)
-        // }
+    drawWallPoints(dataList){
+        // this.drawWall(dataList)
+        this.drawWall(dataList)    
+        // this.drawWall(dataList.reverse(),-100,100,true)    
     }
 
-    createLine(path,color){
-        let line = tb.line({
-            width:this.width,
-            opacity:this.opacity,
-            color:color,
-            geometry:path
-        })
-        tb.add(line)
-    }
+    
+
+
+    removeObj = (obj) => {
+        const clearCache = (item) => {
+            item.geometry.dispose();
+            item.material.dispose();
+          };
+        let arr = obj.children.filter((x) =>!! x);
+        arr.forEach((item) => {
+          if (item.children.length) {
+            removeObj(item);
+          } else {
+            clearCache(item);
+            item.clear();
+          }
+        });
+        obj.clear();
+        arr = null;
+      };
 
     onAdd(map, gl) {
         this.map = map;
         let container = map.getCanvas();
         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);
-        // let centerlngLat = map.getCenter()
-        // let center = mapboxgl.MercatorCoordinate.fromLngLat(centerlngLat)
-        // const scale = center.meterInMercatorCoordinateUnits();
-        // //this.scale = scale;
-        // let {x,y,z} = center;
-        // const modelRotate = [Math.PI / 2, 0, 0];
-        
+        this.camera = new THREE.PerspectiveCamera(map.transform.fov, w / h, 0.1, 1000);
+        this.scene = new THREE.Scene();  
+        this.scene.add(this.group)     
+        new CameraSync(this.map, this.camera, this.group);
 
-        // cameraTransform = new THREE.Matrix4()
-        // .makeTranslation(
-        //     x,
-        //     y,
-        //     z
-        // )
-        // .scale(
-        //     new THREE.Vector3(
-        //         scale,
-        //         -scale,
-        //         scale
-        //     )
-        // )
-        // .multiply( new THREE.Matrix4().makeRotationAxis(
-        //     new THREE.Vector3(1, 0, 0),
-        //     modelRotate[0]
-        // ))
-        // .multiply(new THREE.Matrix4().makeRotationAxis(
-        //     new THREE.Vector3(0, 1, 0),
-        //     modelRotate[1]
-        // ))
-        // .multiply(new THREE.Matrix4().makeRotationAxis(
-        //     new THREE.Vector3(0, 0, 1),
-        //     modelRotate[2]
-        // ));
-        // 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(new THREE.AxesHelper(1000));
+        // this.scene.add(new THREE.CameraHelper( this.camera ));
 
-        // let directionalLight2 = new THREE.DirectionalLight(0xffffff);
-        // directionalLight2.position.set(0, 70, 100).normalize();
-        // scene.add(directionalLight2);  
-        // tb = new Threebox(
-        //   map,
-        //   gl, //get the context from Mapbox
-        //   { defaultLights: true ,passiveRendering:false}
-        // ); 
-        //scene.add(new THREE.AxesHelper(1000));
         this.renderer = new THREE.WebGLRenderer({
             canvas: map.getCanvas(),
-            context: gl,
-            antialias: true
+            context: gl, 
+            logarithmicDepthBuffer: true  // 启用对数深度缓冲
+            // logarithmicDepthBuffer: true,
+            // antialias: true
         });
+        // gl.disable(gl.DEPTH_TEST);
+        // gl.clear(gl.DEPTH_BUFFER_BIT);
         this.renderer.outputEncoding = THREE.sRGBEncoding;
-
-        this.renderer.autoClear = false;  
+        // this.map
+        //     .on('move',()=> {
+        //         //console.log(111)
+        //         this.update();
+        //     })
+        //     .on('resize', ()=> {
+        //         this.setup();
+        //     })
+
+        this.renderer.autoClear = false;         
         if(this.addedFun)       
             this.addedFun()
+        
     }
 
-    render(gl, matrix) {      
-        //tb.update(); 
+    render(gl, matrix) {          
         // const rotationX = new THREE.Matrix4().makeRotationAxis(
         //     new THREE.Vector3(1, 0, 0),
         //     modelTransform.rotateX
@@ -356,8 +327,12 @@ export default class ThreeWallLayer{
         //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(scene, this.camera);
+        // this.camera.lookAt(0, 0, 0);
+        // console.log(this.group.position)
+        // this.renderer.clearDepth();
+        this.renderer.resetState();
+        
+        this.renderer.render(this.scene, this.camera);
         this.map.triggerRepaint();
     }
 

package/src/components/layer/WallLayer.js

@@ -1,6 +1,6 @@
 
-import {hasProperty,transform} from '../../utils/util'
-import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
+import {hasProperty,transform} from '../../utils/util.js'
+import  mapboxgl from 'mapbox-gl';
 export default class ScanLayer{
   drawArray = []
   defaultDrawInfo = {
@@ -84,6 +84,7 @@ export default class ScanLayer{
       this.draw()
   }
 
+
      //添加object 支持多路径添加
      //data 二维数组 croods 路径列表  colors 二维数组
     drawList(_scanInfo){