From 16e0fefb1d1d13e703ee11e2177fa575d5650370 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=AD=A3=E5=AD=A6?= Date: Mon, 24 Dec 2018 16:15:18 +0800 Subject: [PATCH] =?UTF-8?q?fix(scene):=E9=BC=A0=E6=A0=87=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E7=9B=91=E5=90=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/engine/picking/picking.js | 25 ++++++++++++-------- src/core/layer.js | 37 ++++++++++-------------------- src/core/scene.js | 13 ++++++----- src/core/three.js | 4 ++-- src/geom/shape/line.js | 26 ++++++++++----------- src/layer/lineLayer.js | 12 +++++----- src/layer/pointLayer.js | 22 ++++++++++-------- src/track.js | 2 +- 8 files changed, 70 insertions(+), 71 deletions(-) diff --git a/src/core/engine/picking/picking.js b/src/core/engine/picking/picking.js index 30832c81da..301d29d49a 100755 --- a/src/core/engine/picking/picking.js +++ b/src/core/engine/picking/picking.js @@ -36,25 +36,32 @@ class Picking { this._resizeHandler = this._resizeTexture.bind(this); window.addEventListener('resize', this._resizeHandler, false); - this._mouseUpHandler = this._onMouseUp.bind(this); - this._world._container.addEventListener('mouseup', this._mouseUpHandler, false); - this._world._container.addEventListener('mousemove', this._mouseUpHandler, false); - this._world._container.addEventListener('mousemove', this._onWorldMove.bind(this), false); + // this._mouseUpHandler = this._onMouseUp.bind(this); + // this._world._container.addEventListener('mouseup', this._mouseUpHandler, false); + // this._world._container.addEventListener('mousemove', this._mouseUpHandler, 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; this._pickAllObject(point, normalisedPoint); // this._pick(point, normalisedPoint); } + _onWorldMove() { @@ -111,7 +118,7 @@ class Picking { item.type = point.type; this._world.emit('pick', item); this._world.emit('pick-' + object.name, item); - + }); } _updateRender() { @@ -152,8 +159,8 @@ class Picking { point3d: _point3d, intersects }; - return item - + return item; + } // Add mesh to picking scene diff --git a/src/core/layer.js b/src/core/layer.js index 8d43b53735..233c602ee6 100644 --- a/src/core/layer.js +++ b/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(); - super.on(type, callback); - } + // this._addPickingEvents(); + // super.on(type, callback); + // } getPickingId() { return this.scene._engine._picking.getNextId(); } @@ -469,8 +470,8 @@ 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'); return; @@ -484,23 +485,9 @@ export default class Layer extends Base { pixel: point2d, lnglat: { lng: lnglat.lng, lat: lnglat.lat } }; - if(featureId>=0) { - - 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); - - } + if (featureId >= 0) { + this.emit(type, target); } - - }); } @@ -642,7 +629,7 @@ export default class Layer extends Base { this._object3D = null; this.scene = null; } - _preRender(){ + _preRender() { } } diff --git a/src/core/scene.js b/src/core/scene.js index f1e09140df..e9f10b3ecb 100644 --- a/src/core/scene.js +++ b/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)=>{ - this._el.addEventListener(event, e => { - + events.forEach(event => { + this._container.addEventListener(event, e => { + // 要素拾取 + this._engine._picking.pickdata(e); }, false); - }) + }); } // 代理map事件 removeLayer(layer) { diff --git a/src/core/three.js b/src/core/three.js index 19202f3e2d..32d28056ae 100644 --- a/src/core/three.js +++ b/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 { AmbientLight } from 'three/src/lights/AmbientLight.js'; +// export { DirectionalLight } from 'three/src/lights/DirectionalLight.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'; diff --git a/src/geom/shape/line.js b/src/geom/shape/line.js index 23145645ff..ee6ea123e2 100644 --- a/src/geom/shape/line.js +++ b/src/geom/shape/line.js @@ -154,11 +154,11 @@ export function Line(path, props, positionsIndex) { positions.push(...point); positions.push(...point); - if(pointIndex===0){ - attrDistance.push(0, 0); - } else{ - const d = attrDistance[pointIndex * 2-1] + lineSegmentDistance(path[pointIndex-1],path[pointIndex]); - attrDistance.push(d,d); + if (pointIndex === 0) { + attrDistance.push(0, 0); + } else { + const d = attrDistance[pointIndex * 2 - 1] + lineSegmentDistance(path[pointIndex - 1], path[pointIndex]); + 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)=>{ - return d / attrDistance[attrDistance.length-1]; - }) + attrDistance = attrDistance.map(d => { + return d / attrDistance[attrDistance.length - 1]; + }); return { positions, normal, @@ -186,9 +186,9 @@ export function Line(path, props, positionsIndex) { }; } -function lineSegmentDistance(end,start) { - const dx = start[0] - end[0]; - const dy = start[1] - end[1]; - const dz = start[2] - end[2]; - return Math.sqrt(dx * dx + dy * dy + dz * dz); +function lineSegmentDistance(end, start) { + const dx = start[0] - end[0]; + const dy = start[1] - end[1]; + const dz = start[2] - end[2]; + return Math.sqrt(dx * dx + dy * dy + dz * dz); } diff --git a/src/layer/lineLayer.js b/src/layer/lineLayer.js index f201a69c9d..4d40755100 100644 --- a/src/layer/lineLayer.js +++ b/src/layer/lineLayer.js @@ -60,15 +60,15 @@ 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 }); - - + + } } else { geometry.addAttribute('a_distance', new THREE.Float32BufferAttribute(attributes.attrDistance, 1)); @@ -95,8 +95,8 @@ export default class LineLayer extends Layer { } return this; } - _preRender(){ - if(this.animateDuration>0 && this.animateDuration< this.scene._engine.clock.getElapsedTime()){ + _preRender() { + if (this.animateDuration > 0 && this.animateDuration < this.scene._engine.clock.getElapsedTime()) { this.layerMesh.material.setDefinesvalue('ANIMATE', false); this.emit('animateEnd'); this.animateDuration = Infinity; diff --git a/src/layer/pointLayer.js b/src/layer/pointLayer.js index 56ff49bcf7..f49f2220af 100644 --- a/src/layer/pointLayer.js +++ b/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,14 +58,18 @@ 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; + { + 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); + { + const normalAttribute = PointBuffer.NormalBuffer(source.geoData, this.StyleData, style); + const normalPointMesh = drawPoint.DrawNormal(normalAttribute, style); + this.add(normalPointMesh); + } } } _getShape() { @@ -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'; diff --git a/src/track.js b/src/track.js index 8b75ab2c5a..77295e480b 100644 --- a/src/track.js +++ b/src/track.js @@ -19,4 +19,4 @@ setTimeout(function() { const d = encodeURIComponent(JSON.stringify([ newObj ])); image.src = `${SERVER_URL}?BIProfile=merge&d=${d}`; } -}, 3000); \ No newline at end of file +}, 3000);