svg output point-symbol=line and -style rotate=

still squared, but not doubled
mbloch · Aug 31, 2018 · 29fa6e3 · 29fa6e3
1 parent d83f128
commit 29fa6e3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/src/cli/mapshaper-options.js b/src/cli/mapshaper-options.js
@@ -871,6 +871,9 @@ internal.getOptionParser = function() {
      .option("line-height", {
       describe: 'line spacing of multi-line labels (default is 1.1em)'
     })
+    .option("rotate", {
+      describe: "(SVG) rotation in degrees applied on symbol (default is 0, clockwise)"
+    })
    .option("target", targetOpt);
 
   parser.command("target")

diff --git a/src/svg/geojson-to-svg.js b/src/svg/geojson-to-svg.js
@@ -155,18 +155,39 @@ SVG.importStandardPoint = function(coords, rec, layerOpts) {
   var symbolType = layerOpts.point_symbol || '';
   var children = [];
   var halfSize = rec.r || 0; // radius or half of symbol size
+  var deg2rad = Math.PI / 180;
+  var symbolRotate = (+rec.rotate || 0) * deg2rad; // rotation applied on symbol around point's center
   var p;
   // if not a label, create a symbol even without a size
   // (circle radius can be set via CSS)
   if (halfSize > 0 || !isLabel) {
     if (symbolType == 'square') {
+      var squareRotate = symbolRotate + Math.PI * .25 // Rotate by 45 degrees to make the square sit straight
+      var squareLength = halfSize * Math.sqrt(2) // From the half-diagonal, get square's length
       p = {
-        tag: 'rect',
+        tag: 'polygon',
         properties: {
-          x: coords[0] - halfSize,
-          y: coords[1] - halfSize,
-          width: halfSize * 2,
-          height: halfSize * 2
+          points: [
+            [coords[0] + squareLength * Math.cos(squareRotate), coords[1] + squareLength * Math.sin(squareRotate)],
+            [coords[0] + squareLength * Math.cos(squareRotate + Math.PI * .5), coords[1] + squareLength * Math.sin(squareRotate + Math.PI * .5)],
+            [coords[0] + squareLength * Math.cos(squareRotate + Math.PI), coords[1] + squareLength * Math.sin(squareRotate + Math.PI)],
+            [coords[0] + squareLength * Math.cos(squareRotate + Math.PI * -.5), coords[1] + squareLength * Math.sin(squareRotate + Math.PI * -.5)]
+          ]
+          .map(function(pt) {
+            return pt.join(',') // joining two dimensions of point
+          })
+          .join(',') // join each point string coordinates
+        }
+      };
+    } else if (symbolType == 'line') {
+      var lineLength = halfSize ** 2 //
+      p = {
+        tag: 'line',
+        properties: {
+          x1: coords[0],
+          y1: coords[1],
+          x2: coords[0] + lineLength * Math.cos(symbolRotate),
+          y2: coords[1] + lineLength * Math.sin(symbolRotate)
         }};
     } else { // default is circle
       p = {

diff --git a/src/svg/svg-common.js b/src/svg/svg-common.js
@@ -12,19 +12,20 @@ SVG.propertyTypes = {
   'line-height': 'measure',
   'letter-spacing': 'measure',
   'stroke-width': 'number',
-  'stroke-dasharray': 'dasharray'
+  'stroke-dasharray': 'dasharray',
+  rotate: 'number'
 };
 
 SVG.symbolRenderers = {};
 SVG.furnitureRenderers = {};
 
-SVG.supportedProperties = 'class,opacity,stroke,stroke-width,stroke-dasharray,fill,r,dx,dy,font-family,font-size,text-anchor,font-weight,font-style,line-height,letter-spacing'.split(',');
+SVG.supportedProperties = 'class,opacity,stroke,stroke-width,stroke-dasharray,fill,r,dx,dy,font-family,font-size,text-anchor,font-weight,font-style,line-height,letter-spacing,rotate'.split(',');
 SVG.commonProperties = 'class,opacity,stroke,stroke-width,stroke-dasharray'.split(',');
 
 SVG.propertiesBySymbolType = {
   polygon: utils.arrayToIndex(SVG.commonProperties.concat('fill')),
   polyline: utils.arrayToIndex(SVG.commonProperties),
-  point: utils.arrayToIndex(SVG.commonProperties.concat('fill', 'r')),
+  point: utils.arrayToIndex(SVG.commonProperties.concat('fill', 'r', 'rotate')),
   label: utils.arrayToIndex(SVG.commonProperties.concat(
     'fill,r,font-family,font-size,text-anchor,font-weight,font-style,letter-spacing,dominant-baseline'.split(',')))
 };