More

Multi label with mulit placement in OpenLayers

Multi label with mulit placement in OpenLayers


I have a vector layer inOpenLayers. It has some attributes likeleft,right,top,bottom, etc. I want every feature to be multi-label (to have more than one label).
The javascript code is as follows:

style = new OpenLayers.Style(); rule = new OpenLayers.Rule({ filter: new OpenLayers.Filter.Comparison({… }), symbolizer: { fillColor: 'blue', label: ?????, } }); style.addRules([rule]); styleMap = new OpenLayers.StyleMap({ 'default': style }); myLayer.styleMap = styleMap

I want my style to be like this:

How do I do?

note: I know that I will be able to do this by "SLD", but I have to use style map in OpnenLayers.


The label is a SVG text element. I suggest you to make an override forOpenLayers.Renderer.SVG.prototype.drawTextfunction.

Open your OpenLayers install package and find it here:libOpenLayersRendererSVG.js:649

Take the function and override it in your own code like this:

// My drawText override OpenLayers.Renderer.SVG.prototype.drawText = function (featureId, style, location) { // Original code here }

The override must be read later than the OpenLayers library by the browser. In the override, you have to test whether thestyleobject contains your additive attributes likeleft,top, or whatever you name it and if yes, apply a transform to the label. For left, it will be

var translate = 'translate(' + -shift + ',' + 0 + ')'; label.setAttributeNS(null, "transform", translate);

whereshiftis desired shift in pixels.

I did similar override for label rotation, but your case is a bit more complicated, because if I understood right, you want to be able to add four labels for one feature. It means your override will have to be able add four labels instead of one.


I'm interested in the response of this because i had the same problem.

I solved it(but it's not really a good solution) publishing several Vectors using the same entring data and giving them a different style.


Watch the video: Openlayers 6 # - Debugging Techniques