From bc0191ed3110776291c10ee1ccb47ddf23633164 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 15 Feb 2019 11:35:04 +0800 Subject: [PATCH] fix(mapbox): scale --- src/core/engine/picking/picking.js | 12 +++++++----- src/core/scene.js | 1 + src/geom/shader/polygon_vert.glsl | 3 ++- src/map/mapbox.js | 13 +++++++++++-- 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/core/engine/picking/picking.js b/src/core/engine/picking/picking.js index 0dfd718fbe..ea6ff5c0db 100755 --- a/src/core/engine/picking/picking.js +++ b/src/core/engine/picking/picking.js @@ -11,6 +11,8 @@ class Picking { this.scene = scene; this._raycaster.linePrecision = 10; this._pickingScene = PickingScene; + this.world = new THREE.Group(); + this._pickingScene.add(this.world); const size = this._renderer.getSize(); this._width = size.width; this._height = size.height; @@ -61,12 +63,12 @@ class Picking { } _filterObject(id) { - this._pickingScene.children.forEach((object, index) => { + this.world.children.forEach((object, index) => { index === id ? object.visible = true : object.visible = false; }); } _pickAllObject(point, normalisedPoint) { - this._pickingScene.children.forEach((object, index) => { + this.world.children.forEach((object, index) => { this._filterObject(index); const item = this._pick(point, normalisedPoint, object.name); item.type = point.type; @@ -86,7 +88,6 @@ class Picking { id = -999; // return; } - this._raycaster.setFromCamera(normalisedPoint, this._camera); const intersects = this._raycaster.intersectObjects(this._pickingScene.children, true); @@ -111,13 +112,14 @@ class Picking { // // Picking ID should already be added as an attribute add(mesh) { - this._pickingScene.add(mesh); + this.world.add(mesh); + this._needUpdate = true; } // Remove mesh from picking scene remove(mesh) { - this._pickingScene.remove(mesh); + this.world.remove(mesh); this._needUpdate = true; } diff --git a/src/core/scene.js b/src/core/scene.js index 115db9fdcd..6e9eb187cd 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -99,6 +99,7 @@ export default class Scene extends Base { events.forEach(event => { this.map.on(event, e => { // 要素拾取 + e.pixel || (e.pixel = e.point); this._engine._picking.pickdata(e); }, false); }); diff --git a/src/geom/shader/polygon_vert.glsl b/src/geom/shader/polygon_vert.glsl index 9c8508c674..eba0b62d02 100644 --- a/src/geom/shader/polygon_vert.glsl +++ b/src/geom/shader/polygon_vert.glsl @@ -15,8 +15,9 @@ varying float v_size; void main() { float scale = pow(2.0,(20.0 - u_zoom)); - mat4 matModelViewProjection = projectionMatrix * modelViewMatrix; + mat4 matModelViewProjection = projectionMatrix * modelViewMatrix * 100.; vec3 newposition = position; + // newposition.x -= 128.0; #ifdef SHAPE newposition =position + a_size * scale* a_shape; #endif diff --git a/src/map/mapbox.js b/src/map/mapbox.js index 0480b520ba..927eba688f 100644 --- a/src/map/mapbox.js +++ b/src/map/mapbox.js @@ -38,10 +38,12 @@ export default class MapBox extends Base { this.engine = engine; const camera = engine._camera; const scene = engine.world; + const pickScene = engine._picking.world; camera.matrixAutoUpdate = false; scene.position.x = scene.position.y = WORLD_SIZE / 2; scene.matrixAutoUpdate = false; - scene.autoUpdate = false; + pickScene.position.x = pickScene.position.y = WORLD_SIZE / 2; + pickScene.matrixAutoUpdate = false; this.updateCamera(); this.map.on('move', () => { this.updateCamera(); @@ -50,6 +52,7 @@ export default class MapBox extends Base { updateCamera() { const engine = this.engine; const scene = engine.world; + const pickScene = engine._picking.world; const camera = engine._camera; // Build a projection matrix, paralleling the code found in Mapbox GL JS const fov = 0.6435011087932844; @@ -91,7 +94,7 @@ export default class MapBox extends Base { const translateMap = new THREE.Matrix4(); const rotateMap = new THREE.Matrix4(); scale - .makeScale(zoomPow, zoomPow, 1.0); + .makeScale(zoomPow / 100, zoomPow / 100, 1.0); translateCenter .makeTranslation(WORLD_SIZE / 2, -WORLD_SIZE / 2, 0); translateMap @@ -103,6 +106,11 @@ export default class MapBox extends Base { .premultiply(rotateMap) .premultiply(translateCenter) .premultiply(scale); + pickScene.matrix = new THREE.Matrix4(); + pickScene.matrix + .premultiply(rotateMap) + .premultiply(translateCenter) + .premultiply(scale); } makePerspectiveMatrix(fovy, aspect, near, far) { const out = new THREE.Matrix4(); @@ -140,6 +148,7 @@ export default class MapBox extends Base { scene.getZoom = () => { return map.getZoom(); }; scene.getCenter = () => { return map.getCenter(); }; scene.getPitch = () => { return map.getPitch(); }; + scene.containerToLngLat = point => { return map.unproject(point); }; } }