Refactor style cache

projects/common-map/src/fm-map/services/feature-icon.service.ts

@@ -0,0 +1,41 @@
+import { Injectable} from '@angular/core';
+import { Feature } from 'ol';
+import { Point } from 'ol/geom';
+import * as extent from 'ol/extent';
+
+
+@Injectable()
+export class FeatureIconService {      
+    
+      getIconImageDataUrl(iconClass:string, backgroundColor: string = "#c80a6e",color:string = "#ffffff"): string {
+        var canvas = document.createElement('canvas');
+        canvas.width = 365;
+        canvas.height = 560;
+        var ctx = canvas.getContext('2d');
+        ctx.lineWidth = 6;
+        ctx.fillStyle = backgroundColor;
+        ctx.strokeStyle = "#000000";
+        var path = new Path2D("m182.9 551.7c0 0.1 0.2 0.3 0.2 0.3s175.2-269 175.2-357.4c0-130.1-88.8-186.7-175.4-186.9-86.6 0.2-175.4 56.8-175.4 186.9 0 88.4 175.3 357.4 175.3 357.4z");
+        ctx.fill(path)
+    
+        var iconCharacter = "";
+        if (iconClass != null) {
+          var element = document.createElement("i");
+          element.style.display = "none";
+          element.className = iconClass;
+          document.body.appendChild(element);
+          iconCharacter = getComputedStyle(element, "::before").content.replace(/"/g, '');
+          let iconFont = "200px " +getComputedStyle(element, "::before").fontFamily
+          document.body.removeChild(element);
+          ctx.strokeStyle = color;
+          ctx.fillStyle = color;
+          ctx.lineWidth = 15;
+          ctx.font = iconFont;
+          var ts = ctx.measureText(iconCharacter);
+          ctx.fillText(iconCharacter, 182.9 - (ts.width / 2), 250);
+          ctx.strokeText(iconCharacter, 182.9 - (ts.width / 2), 250);
+        }
+    
+        return canvas.toDataURL();
+      }
+}