41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
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();
|
|
}
|
|
} |