geostyler-openlayers-parser
Version:
GeoStyler Style Parser implementation for OpenLayers styles
129 lines (128 loc) • 5.61 kB
JavaScript
import g from "./OlStyleUtil.js";
import { NOFILL_WELLKNOWNNAMES as n, getSvgSizes as v, LINE_WELLKNOWNNAMES as y } from "./OlSvgUtil.js";
const N = {
arrow: 20,
arrowhead: 20,
asterisk_fill: 20,
backslash: 24,
carrow: 20,
circle: 20,
cross: 24,
cross_fill: 20,
cross2: 24,
decagon: 20,
diagonal_half_square: 20,
diamond: 20,
equilateral_triangle: 20,
filled_arrowhead: 20,
half_arc: 20,
half_square: 20,
heart: 20,
hexagon: 20,
horline: 24,
left_half_triangle: 20,
line: 24,
oarrow: 20,
octagon: 20,
parallelogram_left: 20,
parallelogram_right: 20,
pentagon: 20,
quarter_arc: 20,
quarter_circle: 20,
quarter_square: 20,
right_half_triangle: 20,
rounded_square: 20,
semi_circle: 20,
shield: 20,
slash: 24,
square: 20,
square_with_corners: 20,
star: 20,
star_diamond: 20,
third_arc: 20,
third_circle: 20,
trapezoid: 20,
triangle: 20
}, p = {
arrow: 'd="M 0,-10 L 5,-5 L 2.5,-5 L 2.5,10 L -2.5,10 L -2.5,-5 L -5,-5 L 0,-10 Z"',
arrowhead: 'd="M -10 -10 L 0 0 L -10 10"',
asterisk_fill: 'd="M -1.5,-10 L 1.5,-10L 1.5,-3.939 L 6.011,-8.132 L 8.132,-6.011 L 3.939,-1.5 L 10,-1.5 L 10,1.5 L 3.939,1.5 L 8.132,6.011 L 6.011,8.132 L 1.5,3.939 L 1.5,10 L -1.5,10 L -1.5,3.939 L -6.011,8.132 L -8.132,6.011 L -3.939,1.5 L -10,1.5 L -10,-1.5 L -3.939,-1.5 L -8.132,-6.011 L -6.011,-8.132 L -1.5,-3.939 L -1.5,-10 Z"',
backslash: 'd="M -12 -12 L 12 12"',
carrow: 'd="M -10 10 L 0 -10 L 10 10 Z"',
circle: 'cx="0" cy="0" r="10"',
cross: 'd="M -12 0 L 12 0 M 0 -12 L 0 12"',
cross_fill: 'd="M -10,-2 L -10,-2 L -10,2 L -2,2 L -2,10 L 2,10 L 2,2 L 10,2 L 10,-2 L 2,-2 L 2,-10 L -2,-10 L -2,-2 L -10,-2 Z"',
cross2: 'd="M -12 -12 L 12 12 M 12 -12 L -12 12"',
decagon: 'points="5.878,8.09 9.511,3.09 9.511,-3.09 5.878,-8.09 0,-10 -5.878,-8.09 -9.511,-3.09 -9.511,3.09 -5.878,8.09 0,10 5.878,8.09"',
diagonal_half_square: 'points="-10,-10 10,10 -10,10 -10,-10"',
diamond: 'points="-10,0 0,10 10,0 0,-10 -10,0"',
equilateral_triangle: 'points="-8.66,5 8.66,5 0,-10 -8.66,5"',
filled_arrowhead: 'd="M 0,0 L -10,10 L -10,-10 L 0,0 Z"',
half_arc: 'd="M -10 0 A 10 10 0 0 1 10 0"',
half_square: 'points="-10,-10 0,-10 0,10 -10,10 -10,-10"',
heart: 'd="M -9.5 -2 A 1 1 0 0 1 0 -7.5 A 1 1 0 0 1 9.5 -2 L 0 10 Z"',
hexagon: 'points="-8.66,-5 -8.66,5 0,10 8.66,5 8.66,-5 0,-10 -8.66,-5"',
horline: 'd="M -12 0 L 12 0"',
left_half_triangle: 'points="0,10 10,10 0,-10 0,10"',
line: 'd="M 0 -12 L 0 12"',
oarrow: 'd="M -10 10 L 0 -10 L 10 10"',
octagon: 'points="-4.142,10 4.142,10 10,4.142 10,-4.142 4.142,-10 -4.142,-10 -10,-4.142 -10,4.142 -4.142,10"',
parallelogram_left: 'points="10,5 5,-5 -10,-5 -5,5 10,5"',
parallelogram_right: 'points="5,5 10,-5 -5,-5 -10,5 5,5"',
pentagon: 'points="-9.511,-3.09 -5.878,8.09 5.878,8.09 9.511,-3.09 0,-10 -9.511,-3.09"',
quarter_arc: 'd="M 0 -10 A 10 10 0 0 0 -10 0"',
quarter_circle: 'd="M 0 -10 A 10 10 0 0 0 -10 0 L 0 0 Z"',
quarter_square: 'points="-10,-10 0,-10 0,0 -10,0 -10,-10"',
right_half_triangle: 'points="-10,10 0,10 0,-10 -10,10"',
rounded_square: 'x="-10" y="-10" width="20" height="20" rx="2.5" ry="2.5"',
semi_circle: 'd="M -10 0 A 10 10 0 0 1 10 0 L 0 0 Z"',
shield: 'points="10,5 10,-10 -10,-10 -10,5 0,10 10,5"',
slash: 'd="M 12 -12 L -12 12"',
square: 'points="-10,-10 10,-10 10,10 -10,10"',
square_with_corners: 'points="-6.072,10 6.072,10 10,6.072 10,-6.072 6.072,-10 -6.072,-10 -10,-6.072 -10,6.072 -6.072,10"',
star: 'd="M -2.24514,-3.09017 -9.51057,-3.09017 -3.63271,1.18034 -5.87785,8.09017 0,3.81966 5.87785,8.09017 3.63271,1.18034 9.51057,-3.09017 2.24514,-3.09017 0,-10 -2.24514,-3.09017 Z"',
star_diamond: 'd="M -2.70091,-2.70091 -10,0 -2.70091,2.70091 0,10 2.70091,2.70091 10,0 2.70091,-2.70091 0,-10 Z"',
third_arc: 'd="M 0 -10 A 10 10 0 0 0 -5 8.66"',
third_circle: 'd="M 0 -10 A 10 10 0 0 0 -5 8.66 L 0 0 Z"',
trapezoid: 'points="5,-5 10,5 -10,5 -5,-5 5,-5"',
triangle: 'points="-10,10 10,10 0,-10 -10,10"'
}, f = (i) => {
let a = i.replace("shape://", "");
switch (a = a.replace("brush://", ""), a) {
case "dot":
return "circle";
case "plus":
return "cross";
case "times":
case "x":
return "cross2";
case "vertline":
return "line";
default:
return a;
}
}, S = (i) => f(i) in p, Z = (i) => {
const { wellKnownName: a, radius: u = 6, color: c, fillOpacity: d, strokeColor: L, strokeWidth: s, strokeOpacity: h } = i;
if (!S(a))
throw new Error("Unknown wellKnownName: " + a);
const r = f(a), w = s ?? 1, M = N[r], {
minV: _,
sizeV: l,
heightPx: o
} = v(u, w, M), m = '<svg xmlns="http://www.w3.org/2000/svg" width="' + o + '" height="' + o + `" viewBox="${_} ${_} ${l} ${l}">`, q = "</svg>";
let e = p[r] + " ";
e.startsWith("points=") ? e = '<polygon id="' + r + '" ' + e : e.startsWith("x=") ? e = '<rect id="' + r + '" ' + e : e.startsWith("cx=") ? e = '<circle id="' + r + '" ' + e : e = '<path id="' + r + '" ' + e;
let t = "";
if (c && !n.includes(r) ? t += "fill:" + c + "; " : n.includes(r) && (t += "fill:none; "), g.checkOpacity(d) && !n.includes(r) && (t += "fill-opacity:" + d + "; "), L && (t += "stroke:" + L + "; "), s) {
const k = o / l;
t += "stroke-width:" + Number(s) / k + "; ";
}
return g.checkOpacity(h) && (t += "stroke-opacity:" + h + "; "), y.includes(r) && (t = t + "stroke-linejoin: butt"), e += 'style="' + t.trim() + '" />', m + e + q;
};
export {
N as SVG_SIZES,
f as cleanWellKnownName,
Z as getPointSvg,
S as isPointDefinedAsSvg,
p as pointSvgs
};