Merge pull request #19 from hanbyul-here/debug

Some code debugging.
hanbyul-here · Nov 1, 2016 · 9f22be5 · 9f22be5
2 parents 5d77d29 + f5137c8
commit 9f22be5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 20 deletions.
diff --git a/app/Components/TileExporter/Exporter.js b/app/Components/TileExporter/Exporter.js
@@ -37,7 +37,7 @@ var TileExporter = (function() {
     h = window.innerHeight;
     /// Global : renderer
     renderer = new THREE.WebGLRenderer( { antialias: true } );
-    renderer.setClearColor( "0xb0b0b0" );
+    // renderer.setColor( 0x000000 );
     renderer.setSize( w, h );
 
     /// Global : scene
@@ -276,10 +276,9 @@ var TileExporter = (function() {
     var centerLon = tile2Lon(tileLon, config.zoomLevel);
     var centerLat = tile2Lat(tileLat, config.zoomLevel);
 
-
     var previewProjection = d3.geo.mercator()
       .center([centerLon, centerLat])
-      //this are carved based on zoom 16
+      //This parameter works best with zoom 16
       .scale(600000* 100/58 * Math.pow(2,(config.zoomLevel-16)))
       .precision(.0)
       .translate([0,0])
@@ -289,6 +288,22 @@ var TileExporter = (function() {
       .scale(1000000)
       .precision(.0)
       .translate([0,0])
+
+    // Will flip the Y coordinates that result from the geo projection
+    var flipY = d3.geo.transform({
+      point : function(x,y){
+        this.stream.point(x,-y)
+      }
+    });
+
+    // Mercator Geo Projection then flipped in Y
+    // Solution taken from http://stackoverflow.com/a/31647135/3049530
+    var projectionThenFlipY = {
+        stream: function(s) {
+            return projection.stream(flipY.stream(s));
+        }
+     };
+
     //draw previewmap
     PreviewMap.drawData(tileLon, tileLat);
 
@@ -297,13 +312,12 @@ var TileExporter = (function() {
     d3.json(callURL, function(err,json) {
       if(err) console.log('err!');
       else {
-        for(obj in json) {
-          var j;
-          for(j = 0; j< json[obj].features.length; j++) {
+        for(var obj in json) {
+          for(var j = 0; j< json[obj].features.length; j++) {
 
             var geoFeature = json[obj].features[j];
             var previewPath = d3.geo.path().projection(previewProjection);
-            var path = d3.geo.path().projection(projection);
+            var path = d3.geo.path().projection(projectionThenFlipY);
 
             var defaultHeight = 13;
 
@@ -329,7 +343,8 @@ var TileExporter = (function() {
             if(feature !== undefined) {
               if(previewFeature.indexOf('a') > 0) ;
 
-              // 'a' command is not implemented in d3-three, skipiping for now.
+              // 'a' command is not implemented in d3-three, skipping for now.
+              // 'a' is SVG path command for Ellpitic Arc Curve. https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
               if(feature.indexOf('a') > 0) ;
               else {
                 var mesh = dthreed.exportSVG(feature);
@@ -348,7 +363,7 @@ var TileExporter = (function() {
         buildingGroup = new THREE.Group();
         //buildingGroup.rotation.x = Math.PI;
         buildingGroup.translateX(-(tileX+tileW)/2);
-        buildingGroup.translateY((tileY+tileH)/2);
+        buildingGroup.translateY(-tileY-tileH/2 );
 
         scene.add( buildingGroup );
         addGeoObject(obj);
@@ -387,13 +402,7 @@ var TileExporter = (function() {
             bevelEnabled: false
           });
 
-          for(k = 0; k< shape3d.vertices.length; k++) {
-             var v = shape3d.vertices[k];
-             v.setY(-v.y);
-          }
-
           var mesh = new THREE.Mesh(shape3d, material);
-          reverseWindingOrder(mesh);
           buildingGroup.add(mesh);
         } catch(e) {
           console.log('it could not exturde geometry, it can be because of duplicated point of svg.');
@@ -510,4 +519,4 @@ function tile2Lat(tileLat, zoom) {
 }
 
 
-module.exports = TileExporter;
+module.exports = TileExporter;