@ohuoy/easymap 1.0.21 → 1.0.22

package/index.js

@@ -737,7 +737,9 @@ export class EasyMap {
 
   removeLayer(layerId)
   {
-    if (this.map.getLayer(layerId)) this.map.removeLayer(layerId)
+    if (this.map.getLayer(layerId)) {
+      this.map.removeLayer(layerId)
+    }
   }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohuoy/easymap",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "self map easy use",
   "main": "main.js",
   "scripts": {

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(
@@ -113,7 +114,7 @@ export default class AnimationLayer{
 
     remove(){
       for(let i in this.meshList){
-        this.tb.remove(this.meshList[i])
+        this.this.tb.remove(this.meshList[i])
         delete this.meshList[i]
       }
     }
@@ -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,13 @@ 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 = {}; 
 const actionStatus = {
   Play:0,
   Stop:1,
   Pause:2
 }
 export default class AnimationLayer{
+    tb = {};
     //当前帧率
     timerId
     speed=1//帧
@@ -63,7 +63,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 +86,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,10 +104,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)
@@ -118,6 +118,8 @@ export default class AnimationLayer{
     setOpacity(opacity){
       this.opacity = opacity
       this.obj.model.material.opacity = this.opacity;
+      this.tb.update(); 
+      this.map.triggerRepaint();
     }
 
     pause(){
@@ -213,11 +215,12 @@ 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}
@@ -225,7 +228,7 @@ export default class AnimationLayer{
       this.createInterval()       
     }
     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();
     }
 }

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
         // }