@ohuoy/easymap 1.0.21 → 1.0.23

package/src/components/layer/ExtrusionLayer.js

@@ -21,30 +21,35 @@ const params = {
     radius: 2.5,
     exposure: 0,
   };
-var tb = {}; 
-let scene;
 let sceneTarget;
 let cameraMap;
-let target;
 let cameraTarget;
-let materialTarget;
 let cameraTransform;
 
-var camera
-let outlineComposer;
+// let this.outlineComposer;
 let bloomComposer;
 let renderScene;
 let bloomPass;
 let composer;
-let outlinePass;
+// let this.outlinePass;
 let composer2;
-var group = new THREE.Group();
-let group2 = new THREE.Group();
-let group3 = new THREE.Group();
+// var this.group = new THREE.Group();
+// let this.group2 = new THREE.Group();
+// let this.group3 = new THREE.Group();
 let sceneMap;
 var darkMaterial = new THREE.MeshBasicMaterial({ color: 'black' ,transparent:true,opacity:1});
 var bloomLayer = new THREE.Layers();
 export default class ExtrusionLayer{
+    tb = {}; 
+    scene;
+    camera;
+    outlineComposer;
+    outlinePass;
+    group = new THREE.Group();
+    group2 = new THREE.Group();
+    group3 = new THREE.Group();
+    materialTarget;
+    target;
     opacity = 0.8
     previewCanvas = null;
     w = 0;
@@ -72,7 +77,7 @@ export default class ExtrusionLayer{
         }
         const material1 = new THREE.MeshLambertMaterial({ color: 0xb00000, wireframe: false });
         const material2 = new THREE.MeshLambertMaterial({ color: 0xff8000, wireframe: false });
-        let star = tb.extrusion({
+        let star = this.tb.extrusion({
             coordinates: [points],
             geometryOptions: { depth: 20, steps: 1, bevelEnabled: true, bevelThickness: 2, bevelSize: 4, bevelSegments: 1 },
             anchor: 'center',
@@ -83,7 +88,7 @@ export default class ExtrusionLayer{
         star.addTooltip("A animated extruded star over Columbus Park", true);
         star.setCoords([-74.0001269, 40.7151698, 50]);
         star.set({ rotation: {x: 0, y: 0, z: 720}, duration: 20000 })
-        tb.add(star);
+        this.tb.add(star);
     }
 
     addExtrusionsThreeBox(coordinates,center, height = 1000) {
@@ -96,11 +101,11 @@ export default class ExtrusionLayer{
         // let coords = []
         // data.forEach((b) => {
         //     // let center = b.properties.center;
-        //     // let s = tb.projectedUnitsPerMeter(center[1]);
+        //     // let s = this.tb.projectedUnitsPerMeter(center[1]);
         //     coords.push(b.geometry.coordinates)
 
         // });
-        let extrusion = tb.extrusion({                
+        let extrusion = this.tb.extrusion({                
             coordinates: coordinates,
             anchor:'center',
             geometryOptions: { curveSegments: 1, depth: height },
@@ -108,7 +113,7 @@ export default class ExtrusionLayer{
         },this.map);
         // extrusion.addTooltip(b.properties.tooltip, true);
         extrusion.setCoords([...transform(center), 0]);
-        tb.add(extrusion);
+        this.tb.add(extrusion);
         this.outlineObj(extrusion)
     }
 
@@ -144,43 +149,43 @@ export default class ExtrusionLayer{
             const geometry = new THREE.ExtrudeGeometry( shape, { curveSegments: 1, depth: height } );
             const mesh =  new THREE.Mesh( geometry, material ) ;
             mesh.layers.enable(BLOOM_SCENE)
-            group.add(mesh)    
-            // /group2.add()        
+            this.group.add(mesh)    
+            // /this.group2.add()        
         })
     }
 
     outlineObj(selectedObjects) {
-        if (outlinePass) {
-            outlineComposer.removePass(outlinePass)
-            outlinePass = null
+        if (this.outlinePass) {
+            this.outlineComposer.removePass(this.outlinePass)
+            this.outlinePass = null
         }
         // 物体边缘发光通道
-        outlinePass = new OutlinePass(
+        this.outlinePass = new OutlinePass(
             new THREE.Vector2(window.innerWidth, window.innerHeight),
-            scene,
-            camera
+            this.scene,
+            this.camera
         )
-        outlinePass.edgeStrength = 5 // 边框的亮度
-        outlinePass.edgeGlow = 0.1 // 光晕[0,1]
-        outlinePass.edgeThickness = 0.1 // 边框宽度
-        outlinePass.pulsePeriod = 2 // 呼吸闪烁的速度
-        outlinePass.visibleEdgeColor.set(0xff4ecfff)
-        outlinePass.hiddenEdgeColor.set(0x00ffff)
-        outlinePass.selectedObjects = selectedObjects
-        outlineComposer.addPass(outlinePass)
+        this.outlinePass.edgeStrength = 5 // 边框的亮度
+        this.outlinePass.edgeGlow = 0.1 // 光晕[0,1]
+        this.outlinePass.edgeThickness = 0.1 // 边框宽度
+        this.outlinePass.pulsePeriod = 2 // 呼吸闪烁的速度
+        this.outlinePass.visibleEdgeColor.set(0xff4ecfff)
+        this.outlinePass.hiddenEdgeColor.set(0x00ffff)
+        this.outlinePass.selectedObjects = selectedObjects
+        this.outlineComposer.addPass(this.outlinePass)
         // 自定义的着色器通道 作为参数
     }
     
 
     addLineThreeBox(coordinates,center, height = 1000){
         coordinates.forEach(coords => {
-            let line = tb.line({
+            let line = this.tb.line({
                 geometry:coords,
                 color:0xe6f2ff,
                 width:2
             });
             //line.setCoords([...transform(center), 0]);
-            tb.add(line);
+            this.tb.add(line);
         });
         
     }
@@ -239,7 +244,7 @@ export default class ExtrusionLayer{
         let line = new Line2(geometry, matLine);
         line.position.copy(normalized.position);
         line.computeLineDistances();
-        group.add(line)   
+        this.group.add(line)   
     }
 
     addLine(coordinates, height = 1000,opacity = 0.5,width = 2,color = 0xb6d1fc){
@@ -263,10 +268,10 @@ export default class ExtrusionLayer{
             // let line = new Line2( geometry, matLine );
             let line = this.createLine(coords,height,opacity,width,color)
             line.layers.enable(BLOOM_SCENE)
-            group.add(line)           
+            this.group.add(line)           
             lines.push(line)
         })
-        //this.outlineObj([group])
+        //this.outlineObj([this.group])
     }
 
 
@@ -289,7 +294,7 @@ export default class ExtrusionLayer{
         // composePlaneGeometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
         let composePlaneGeometry = new THREE.PlaneGeometry(w * 10000 ,h * 10000);
         //debugger
-        // materialTarget = new THREE.ShaderMaterial( {
+        // this.materialTarget = new THREE.ShaderMaterial( {
 		// 	uniforms: {
         //         'tDiffuse': { value: null },
         //         'opacity': { value: 1 }        
@@ -315,23 +320,23 @@ export default class ExtrusionLayer{
 		// 	depthTest: false,
 		// 	depthWrite: false
 		// } );
-        materialTarget = new THREE.MeshPhongMaterial({    
-            map:target.texture,     
+        this.materialTarget = new THREE.MeshPhongMaterial({    
+            map:this.target.texture,     
             opacity:1,      
             transparent: true,
         });
-        let mesh =  new THREE.Mesh(composePlaneGeometry, materialTarget);        
-        mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+        let mesh =  new THREE.Mesh(composePlaneGeometry, this.materialTarget);        
+        mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
         mesh.setCoords( [0,0]);
-        tb.add(mesh);    
+        this.tb.add(mesh);    
 
-        group2.add(mesh)
+        this.group2.add(mesh)
     }
   
 
     onAdd(map, gl) {
         this.map = map;   
-        tb = new Threebox(
+        this.tb = new Threebox(
           map,
           gl, //get the context from Mapbox
           { defaultLights: true ,passiveRendering:false}
@@ -342,16 +347,16 @@ export default class ExtrusionLayer{
         this.w = w;
         this.h = h;
 
-        scene = new THREE.Scene(); 
+        this.scene = new THREE.this.scene(); 
         //sceneTarget.background = new THREE.Color('rgba(0,0,0,0)')
-        camera = new THREE.PerspectiveCamera(map.transform.fov, w / h, 0.1, 1e21);
-        scene.add(group) 
-        scene.add(new THREE.AmbientLight(0xffffff));       
-        //scene.add(group2)
+        this.camera = new THREE.PerspectiveCamera(map.transform.fov, w / h, 0.1, 1e21);
+        this.scene.add(this.group) 
+        this.scene.add(new THREE.AmbientLight(0xffffff));       
+        //this.scene.add(this.group2)
 
-        new CameraSync(this.map, camera, group); 
+        new CameraSync(this.map, this.camera, this.group); 
        
-        //new CameraSync(this.map, camera, group2);  
+        //new CameraSync(this.map, this.camera, this.group2);  
         this.renderer = new THREE.WebGLRenderer({
             canvas: map.getCanvas(),
             context: gl,
@@ -360,13 +365,13 @@ export default class ExtrusionLayer{
         });
         this.renderer.outputEncoding = THREE.sRGBEncoding;
         this.renderer.autoClear = false;   
-        scene.add(new THREE.AxesHelper(0))  
-        //scene.background =null;
-        //scene.background = new THREE.Color(0x000000);
+        this.scene.add(new THREE.AxesHelper(0))  
+        //this.scene.background =null;
+        //this.scene.background = new THREE.Color(0x000000);
         //this.renderer.setClearAlpha(0.0);   
-        // target = new THREE.WebGLRenderTarget(w,h,{encoding: THREE.sRGBEncoding });
+        // this.target = new THREE.WebGLRenderTarget(w,h,{encoding: THREE.sRGBEncoding });
         // this.setTargetTexture(w,h)
-        //renderScene = new RenderPass(scene, camera);
+        //renderScene = new RenderPass(this.scene, this.camera);
         //composer2 = new EffectComposer(this.renderer);
         //bloomPass = new UnrealBloomPass(new THREE.Vector2(w/2, h/2), params.strength, params.radius, params.threshold);
         //composer2.addPass(renderScene);
@@ -379,14 +384,14 @@ export default class ExtrusionLayer{
         // bloomComposer.renderToScreen = true;
         // bloomComposer.addPass(renderScene);
         // bloomComposer.addPass(bloomPass);
-        //outlineComposer = new EffectComposer(this.renderer)
+        //this.outlineComposer = new EffectComposer(this.renderer)
         // bloomLayer.set(BLOOM_SCENE);
 
         
         // const bloomPass = new OutlinePass(
         //     new THREE.Vector2(window.innerWidth, window.innerHeight),
-        //     scene,
-        //     camera
+        //     this.scene,
+        //     this.camera
         // )
         // bloomPass.edgeStrength = 5 // 边框的亮度
         // bloomPass.edgeGlow = 1 // 光晕[0,1]
@@ -394,7 +399,7 @@ export default class ExtrusionLayer{
         // bloomPass.pulsePeriod = 3 // 呼吸闪烁的速度
         // bloomPass.visibleEdgeColor.set(0xff4ecfff)
         // bloomPass.hiddenEdgeColor.set(0x00ffff)
-        //bloomPass.selectedObjects = [group]
+        //bloomPass.selectedObjects = [this.group]
         
 
 
@@ -422,8 +427,8 @@ export default class ExtrusionLayer{
         // composer.addPass(outputPass);
         
         
-        //let renderPass = new RenderPass(scene, camera)        
-        //outlineComposer.addPass(renderPass)
+        //let renderPass = new RenderPass(this.scene, this.camera)        
+        //this.outlineComposer.addPass(renderPass)
     }
 
 
@@ -449,17 +454,17 @@ export default class ExtrusionLayer{
     render(gl, matrix) {              
         
         //composer.render()
-        // scene.traverse(this.darkenNonBloomed);
+        // this.scene.traverse(this.darkenNonBloomed);
         // bloomComposer.render();
-        //outlineComposer.render()
+        //this.outlineComposer.render()
         //composer2.render();
         this.renderer.resetState();
-        this.renderer.render(scene,camera)
+        this.renderer.render(this.scene,this.camera)
         this.map.triggerRepaint();
     }
 
     darkenNonBloomed(obj) {   
-        // if (obj instanceof THREE.Scene) {                    
+        // if (obj instanceof THREE.this.scene) {                    
         //     obj.background = new THREE.Color(0x000fff)
         //     debugger
         // }   

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

@@ -1,11 +1,12 @@
-import {Threebox} from  '../../../lib/threebox-plugin'; 
+import {Threebox} from  'threebox-plugin'; 
 import * as THREE from 'three'
 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){
@@ -27,24 +28,39 @@ export default class PathLineLayer{
         }
         for(let i in list){
             let item = list[i]
-            
             if(i>0){
                 let pre = list[i-1]
                 if(item.color == pre.color){
-                    _line.geometry.push(item.point)
+                    _line.geometry.push(item.point)   
+                    if(i == list.length -1){
+                        if(_line.geometry.length > 0){
+                            _lines.push(_line)
+                        }     
+                    }
                 }else{
-                    let c = new THREE.Color(item.color)
-                    _lines.push(_line)
+                    _line.geometry.push(item.point)
+                    let c = new THREE.Color()
+                    
+                    c.set(item.color)
+                    if(_line.geometry.length > 0){
+                        _lines.push(_line)
+                    }                    
                     _line = {
                         geometry:[],
                         color:c,
                         width:20
                     }
+                    _line.geometry.push(item.point)                    
                 }
-
-                if(i == list.length-1){
-                    _lines.push(_line)
+            }else{
+                let c = new THREE.Color()                    
+                    c.set(item.color)
+                _line = {
+                    geometry:[],
+                    color:c,
+                    width:20
                 }
+                _line.geometry.push(item.point)
             }
             // lineMesh.addEventListener('ObjectMouseOver', ()=>{
             //     console.log(999)
@@ -57,8 +73,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 +86,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();
     }
 }