forked from MTSR/mapserver
54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
/* exported LabelOverlay */
|
|
/* globals AbstractIconOverlay: true */
|
|
|
|
var LabelIcon = L.Icon.extend({
|
|
initialize: function(options) {
|
|
L.Icon.prototype.initialize.call(this, options);
|
|
},
|
|
|
|
createIcon: function() {
|
|
var div = document.createElement('div'),
|
|
options = this.options;
|
|
|
|
div.innerHTML = options.html || "";
|
|
div.style.width = "200px";
|
|
div.style.height = "200px";
|
|
div.style.marginLeft = "-100px";
|
|
div.style.marginTop = "-175px";
|
|
|
|
return div;
|
|
}
|
|
});
|
|
|
|
var LabelOverlay = AbstractIconOverlay.extend({
|
|
initialize: function(wsChannel, layerMgr) {
|
|
AbstractIconOverlay.prototype.initialize.call(this, wsChannel, layerMgr, "label");
|
|
},
|
|
|
|
getIcon: function(lbl){
|
|
|
|
var height = 200;
|
|
var width = 200;
|
|
var fontSize = Math.min(lbl.attributes.size, 20);
|
|
|
|
const html = `
|
|
<svg height='${height}' width='${width}' text-anchor='middle' font-size='${fontSize}px'>
|
|
<text x='${width/2}' y='${height/2}'
|
|
fill='${lbl.attributes.color}'
|
|
dominant-baseline="central"
|
|
transform="rotate(${lbl.attributes.direction}, 100, 100)">
|
|
${lbl.attributes.text}
|
|
</text>
|
|
</svg>
|
|
`;
|
|
|
|
return new LabelIcon({
|
|
html: html,
|
|
height: height,
|
|
width: width
|
|
});
|
|
},
|
|
|
|
createPopup: function(){}
|
|
});
|