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

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 = "#c80a6e",color = "#ffffff"): string {
        const canvas = document.createElement('canvas');
        canvas.width = 365;
        canvas.height = 560;
        const ctx = canvas.getContext('2d');
        ctx.lineWidth = 6;
        ctx.fillStyle = backgroundColor;
        ctx.strokeStyle = "#000000";
        const 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)
    
        let iconCharacter = "";
        if (iconClass != null) {
          const element = document.createElement("i");
          element.style.display = "none";
          element.className = iconClass;
          document.body.appendChild(element);
          iconCharacter = getComputedStyle(element, "::before").content.replace(/"/g, '');
          const iconFont = "200px " +getComputedStyle(element, "::before").fontFamily
          document.body.removeChild(element);
          ctx.strokeStyle = color;
          ctx.fillStyle = color;
          ctx.lineWidth = 15;
          ctx.font = iconFont;
          const 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();
      }
}