fix(mapbox): scale

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

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);
     });

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

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); };
 
   }
 }