fix(scene):鼠标事件监听

src/core/engine/picking/picking.js

@@ -36,19 +36,25 @@ class Picking {
     this._resizeHandler = this._resizeTexture.bind(this);
     window.addEventListener('resize', this._resizeHandler, false);
 
-    this._mouseUpHandler = this._onMouseUp.bind(this);
+    // this._mouseUpHandler = this._onMouseUp.bind(this);
-    this._world._container.addEventListener('mouseup', this._mouseUpHandler, false);
+    // this._world._container.addEventListener('mouseup', this._mouseUpHandler, false);
-    this._world._container.addEventListener('mousemove', this._mouseUpHandler, false);
+    // this._world._container.addEventListener('mousemove', this._mouseUpHandler, false);
-    this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false);
+    // this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false);
+  }
+  pickdata(event) {
+    const point = { x: event.clientX, y: event.clientY, type: event.type };
+    const normalisedPoint = { x: 0, y: 0 };
+    normalisedPoint.x = (point.x / this._width) * 2 - 1;
+    normalisedPoint.y = -(point.y / this._height) * 2 + 1;
+    this._pickAllObject(point, normalisedPoint);
   }
-
   _onMouseUp(event) {
     // Only react to main button click
     // if (event.button !== 0) {
     //   return;
     // }
 
-    const point = { x: event.clientX, y: event.clientY,type:event.type};
+    const point = { x: event.clientX, y: event.clientY, type: event.type };
     const normalisedPoint = { x: 0, y: 0 };
     normalisedPoint.x = (point.x / this._width) * 2 - 1;
     normalisedPoint.y = -(point.y / this._height) * 2 + 1;
@@ -56,6 +62,7 @@ class Picking {
     // this._pick(point, normalisedPoint);
   }
   
+
   _onWorldMove() {
 
     this._needUpdate = true;
@@ -152,7 +159,7 @@ class Picking {
       point3d: _point3d,
       intersects
     };
-    return  item
+    return item;
 
   }
 

src/core/layer.js

@@ -65,6 +65,7 @@ export default class Layer extends Base {
     scene._engine._scene.add(this._object3D);
     this.layerMesh = null;
     this.layerLineMesh = null;
+    this._addPickingEvents();
 
   }
   /**
@@ -260,11 +261,11 @@ export default class Layer extends Base {
     const resetHander = this._resetStyle.bind(this);
     if (this.get('allowActive')) {
 
-      this.on('active', activeHander);
+      this.on('mousemove', activeHander);
       this.on('mouseleave', resetHander);
 
     } else {
-      this.off('active', activeHander);
+      this.off('mousemove', activeHander);
       this.off('mouseleave', resetHander);
     }
   }
@@ -427,11 +428,11 @@ export default class Layer extends Base {
       });
     }
   }
-  on(type, callback) {
+  // on(type, callback) {
 
-    this._addPickingEvents();
+  //   this._addPickingEvents();
-    super.on(type, callback);
+  //   super.on(type, callback);
-  }
+  // }
   getPickingId() {
     return this.scene._engine._picking.getNextId();
   }
@@ -469,7 +470,7 @@ export default class Layer extends Base {
   _addPickingEvents() {
     // TODO: Find a way to properly remove this listener on destroy
     this.scene.on('pick-' + this.layerId, e => {
-      const { featureId, point2d,type} = e;
+      const { featureId, point2d, type } = e;
      
       if (featureId < -100 && this._activeIds !== null) {
         this.emit('mouseleave');
@@ -484,23 +485,9 @@ export default class Layer extends Base {
         pixel: point2d,
         lnglat: { lng: lnglat.lng, lat: lnglat.lat }
       };
-      if(featureId>=0) {
+      if (featureId >= 0) {
-        
+        this.emit(type, target);
-        switch(type) {
-          case 'mouseup':
-           this.emit('click', target);
-           break;
-           case 'mousemove':
-           this.emit('mousemove', target);
-           this.emit('active', target);
-           break;
-          default:
-           //this.emit('click', target);
-  
       }
-      }
-     
-
 
     });
   }
@@ -642,7 +629,7 @@ export default class Layer extends Base {
     this._object3D = null;
     this.scene = null;
   }
-  _preRender(){
+  _preRender() {
 
   }
 }

src/core/scene.js

@@ -18,7 +18,6 @@ export default class Scene extends Base {
   }
 
   _initEngine(mapContainer) {
-    this._el = mapContainer;
     this._engine = new Engine(mapContainer, this);
     this._engine.run();
   }
@@ -41,6 +40,7 @@ export default class Scene extends Base {
       this.map = Map.map;
       Map.asyncCamera(this._engine);
       this.initLayer();
+      this._registEvents();
       this.emit('loaded');
     });
 
@@ -87,7 +87,7 @@ export default class Scene extends Base {
   _addLayer() {
 
   }
-  _registEvents(){
+  _registEvents() {
     const events = [
       'mouseout',
       'mouseover',
@@ -98,11 +98,12 @@ export default class Scene extends Base {
       'click',
       'dblclick'
     ];
-    events.forEach((event)=>{
+    events.forEach(event => {
-      this._el.addEventListener(event, e => {
+      this._container.addEventListener(event, e => {
-        
+        // 要素拾取
+        this._engine._picking.pickdata(e);
       }, false);
-    })
+    });
   }
   // 代理map事件
   removeLayer(layer) {

src/core/three.js

@@ -9,8 +9,8 @@ export { Points } from 'three/src/objects/Points.js';
 export { LineSegments } from 'three/src/objects/LineSegments.js';
 export { Mesh } from 'three/src/objects/Mesh.js';
 export { Texture } from 'three/src/textures/Texture.js';
-//export { DirectionalLight } from 'three/src/lights/DirectionalLight.js';
+// export { DirectionalLight } from 'three/src/lights/DirectionalLight.js';
-//export { AmbientLight } from 'three/src/lights/AmbientLight.js';
+// export { AmbientLight } from 'three/src/lights/AmbientLight.js';
 export { WebGLRenderTarget } from 'three/src/renderers/WebGLRenderTarget.js';
 export { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera.js';
 export { BufferGeometry } from 'three/src/core/BufferGeometry.js';

src/geom/shape/line.js

@@ -154,11 +154,11 @@ export function Line(path, props, positionsIndex) {
     positions.push(...point);
     positions.push(...point);
 
-    if(pointIndex===0){
+    if (pointIndex === 0) {
       attrDistance.push(0, 0);
-    } else{
+    } else {
-      const d  = attrDistance[pointIndex * 2-1] + lineSegmentDistance(path[pointIndex-1],path[pointIndex]);
+      const d = attrDistance[pointIndex * 2 - 1] + lineSegmentDistance(path[pointIndex - 1], path[pointIndex]);
-      attrDistance.push(d,d);
+      attrDistance.push(d, d);
     }
 
     index += 2;
@@ -171,9 +171,9 @@ export function Line(path, props, positionsIndex) {
     miter.push(-m);
     miter.push(m);
   });
-  attrDistance = attrDistance.map((d)=>{
+  attrDistance = attrDistance.map(d => {
-    return d / attrDistance[attrDistance.length-1];
+    return d / attrDistance[attrDistance.length - 1];
-  })
+  });
   return {
     positions,
     normal,
@@ -186,7 +186,7 @@ export function Line(path, props, positionsIndex) {
   };
 
 }
-function lineSegmentDistance(end,start) {
+function lineSegmentDistance(end, start) {
   const dx = start[0] - end[0];
   const dy = start[1] - end[1];
   const dz = start[2] - end[2];

src/layer/lineLayer.js

@@ -60,12 +60,12 @@ export default class LineLayer extends Layer {
         if (animateOptions.enable) {
 
           material.setDefinesvalue('ANIMATE', true);
-          const {duration,interval,trailLength,repeat = Infinity} = animateOptions;
+          const { duration, interval, trailLength, repeat = Infinity } = animateOptions;
           this.animateDuration = this.scene._engine.clock.getElapsedTime() + duration * repeat;
           material.upDateUninform({
             u_duration: duration,
             u_interval: interval,
-            u_trailLength:trailLength,
+            u_trailLength: trailLength
           });
 
 
@@ -95,8 +95,8 @@ export default class LineLayer extends Layer {
     }
     return this;
   }
-  _preRender(){
+  _preRender() {
-    if(this.animateDuration>0 && this.animateDuration< this.scene._engine.clock.getElapsedTime()){
+    if (this.animateDuration > 0 && this.animateDuration < this.scene._engine.clock.getElapsedTime()) {
       this.layerMesh.material.setDefinesvalue('ANIMATE', false);
       this.emit('animateEnd');
       this.animateDuration = Infinity;

src/layer/pointLayer.js

@@ -32,7 +32,7 @@ export default class PointLayer extends Layer {
     return this;
   }
   _prepareRender() {
-    const { opacity, strokeWidth, stroke, strokeOpacity, shape, fill } = this.get('styleOptions');
+    const { stroke, fill } = this.get('styleOptions');
     if (this.shapeType === 'text') { // 绘制文本图层
 
       this._textPoint();
@@ -58,16 +58,20 @@ export default class PointLayer extends Layer {
         }
         break;
       case 'image':// 绘制图片标注
+        {
           const imageAttribute = PointBuffer.ImageBuffer(source.geoData, this.StyleData, { imagePos: this.scene.image.imagePos });
           const imageMesh = drawPoint.DrawImage(imageAttribute, { ...style, texture: this.scene.image.texture });
           this.add(imageMesh);
           break;
+        }
       case 'normal' : // 原生点
+        {
           const normalAttribute = PointBuffer.NormalBuffer(source.geoData, this.StyleData, style);
           const normalPointMesh = drawPoint.DrawNormal(normalAttribute, style);
           this.add(normalPointMesh);
         }
     }
+  }
   _getShape() {
     let shape = null;
     if (!this.StyleData[0].hasOwnProperty('shape')) {
@@ -82,7 +86,7 @@ export default class PointLayer extends Layer {
 
     if (pointShape['2d'].indexOf(shape) !== -1 || pointShape['3d'].indexOf(shape) !== -1) {
       return 'fill';
-    } else if (shape == 'text') {
+    } else if (shape === 'text') {
       return 'text';
     } else if (this.scene.image.imagesIds.indexOf(shape) !== -1) {
       return 'image';