From cf5444f0a6d5018a6a737bee14e7f46e43514440 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=AD=A3=E5=AD=A6?= Date: Thu, 24 Jan 2019 21:06:08 +0800 Subject: [PATCH] fix(scene): event on map --- package.json | 2 +- src/core/engine/picking/picking.js | 61 ++---------------------------- src/core/scene.js | 11 +----- src/source/geojsonSource.js | 4 +- 4 files changed, 9 insertions(+), 69 deletions(-) diff --git a/package.json b/package.json index cbaf70578a..8ab26df3c2 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "1.0.1", + "version": "1.0.3", "description": "Large-scale WebGL-powered Geospatial Data Visualization", "main": "build/l7.js", "browser": "build/l7.js", diff --git a/src/core/engine/picking/picking.js b/src/core/engine/picking/picking.js index e4fb4c2ee1..0dfd718fbe 100755 --- a/src/core/engine/picking/picking.js +++ b/src/core/engine/picking/picking.js @@ -9,10 +9,7 @@ class Picking { this._camera = camera; this._raycaster = new THREE.Raycaster(); this.scene = scene; - this._envents = []; - - // TODO: Match this with the line width used in the picking layers - this._raycaster.linePrecision = 3; + this._raycaster.linePrecision = 10; this._pickingScene = PickingScene; const size = this._renderer.getSize(); this._width = size.width; @@ -21,7 +18,7 @@ class Picking { magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false, - depthBuffer: false + depthBuffer: true }; this._pickingTexture = new THREE.WebGLRenderTarget(this._width, this._height, parameters); @@ -35,38 +32,15 @@ class Picking { _initEvents() { 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); } pickdata(event) { - const point = { x: event.clientX, y: event.clientY, type: event.type }; + const point = { x: event.pixel.x, y: event.pixel.y, 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 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() { - - this._needUpdate = true; - } - - // TODO: Ensure this doesn't get out of sync issue with the renderer resize _resizeTexture() { const size = this._renderer.getSize(); @@ -80,28 +54,11 @@ class Picking { _update(point) { const texture = this._pickingTexture; - // if (this._needUpdate) { this._renderer.render(this._pickingScene, this._camera, this._pickingTexture); - // this._needUpdate = false; - // } this.pixelBuffer = new Uint8Array(4); this._renderer.readRenderTargetPixels(texture, point.x, this._height - point.y, 1, 1, this.pixelBuffer); - } - // 添加dom事件 支持 mousedown ,mouseenter mouseleave mousemove mouseover mouseout mouse up - on(type) { - - this._mouseUpHandler = this._onMouseUp.bind(this); - this._world._container.addEventListener(type, this._mouseUpHandler, false); - this._envents.push([ type, this._mouseUpHandler ]); - } - off(type, hander) { - this._world._container.removeEventListener(type, this._mouseUpHandler, false); - this._envents = this._envents.filter(item => { - return item[0] === 'type' && hander === item[1]; - }); - } _filterObject(id) { this._pickingScene.children.forEach((object, index) => { @@ -124,9 +81,7 @@ class Picking { _pick(point, normalisedPoint, layerId) { this._update(point); - // Interpret the pixel as an ID let id = (this.pixelBuffer[2] * 255 * 255) + (this.pixelBuffer[1] * 255) + (this.pixelBuffer[0]); - // Skip if ID is 16646655 (white) as the background returns this if (id === 16646655 || this.pixelBuffer[3] === 0) { id = -999; // return; @@ -134,9 +89,6 @@ class Picking { this._raycaster.setFromCamera(normalisedPoint, this._camera); - // Perform ray intersection on picking scene - // - // TODO: Only perform intersection test on the relevant picking mesh const intersects = this._raycaster.intersectObjects(this._pickingScene.children, true); const _point2d = { x: point.x, y: point.y }; @@ -144,11 +96,6 @@ class Picking { if (intersects.length > 0) { _point3d = intersects[0].point; } - - // Pass along as much data as possible for now until we know more about how - // people use the picking API and what the returned data should be - // - // TODO: Look into the leak potential for passing so much by reference here const item = { layerId, featureId: id - 1, diff --git a/src/core/scene.js b/src/core/scene.js index 30820daa8a..8879215fe2 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -83,14 +83,6 @@ export default class Scene extends Base { getLayers() { return this._layers; } - _addLight() { - // const scene = this._engine._scene; - // //const ambientLight = new THREE.AmbientLight(0xaaaaaa); - // scene.add(ambientLight); - - // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); - // scene.add(directionalLight); - } _addLayer() { } @@ -102,11 +94,12 @@ export default class Scene extends Base { 'mousedown', 'mouseleave', 'mouseup', + 'rightclick', 'click', 'dblclick' ]; events.forEach(event => { - this._container.addEventListener(event, e => { + this.map.on(event, e => { // 要素拾取 this._engine._picking.pickdata(e); }, false); diff --git a/src/source/geojsonSource.js b/src/source/geojsonSource.js index cc312a8107..1b1c012568 100644 --- a/src/source/geojsonSource.js +++ b/src/source/geojsonSource.js @@ -37,9 +37,9 @@ export default class GeojsonSource extends Source { return selectFeatureIds; } - getSelectFeature(featureId){ + getSelectFeature(featureId) { const data = this.get('data'); - return data.features[featureId]; + return data.features[featureId]; } }