[OpenLayers-Trac] [OpenLayers] #3651: rotating labels with SVG

OpenLayers trac-20090302 at openlayers.org
Thu Apr 26 14:32:16 EDT 2012


#3651: rotating labels with SVG
------------------------------------------------+---------------------------
 Reporter:  bennos                              |       Owner:      
     Type:  feature                             |      Status:  new 
 Priority:  minor                               |   Milestone:      
Component:  Renderer                            |     Version:  2.11
 Keywords:  labels, renderer, rotate, SVG, VML  |       State:      
------------------------------------------------+---------------------------
 Hi,

 for a map i needed rotated labels and after some research i found
 thachun's post on the mailing list [http://osgeo-org.1560.n6.nabble.com
 /How-to-rotate-a-label-in-IE-td3923751.html]. He uses a modified version
 of the SVG-Renderer and the VML-Renderer in OL 2.8. I couldn't use the
 VML-Renderer, because it is for line features, but I modified the OL 2.11
 SVG-Renderer to rotate labels (point or line, no difference). This works
 in all Browsers except Internet explorer below 9. You can see a working
 example at [http://www.gorjanci.at/zemljevid/karta.html]

 Maybe there is someone interested in developing it further, especially for
 VML to obtain browser compatibility.

 The Changes in the SVG.js would be:

 {{{
 /**
 * Method: drawText
 * This method is only called by the renderer itself.
 *
 * Parameters:
 * featureId - {String}
 * style -
 * location - {<OpenLayers.Geometry.Point>}
 */
 drawText: function(featureId, style, location) {
 var resolution = this.getResolution();

 //add this for rotation----------------------------------------
 var layer = this.map.getLayer(this.container.id);
 var feature = layer.getFeatureById(featureId);
 location = (feature.attributes.centroid ? feature.attributes.centroid :
 location);
 /////////////////////////----------------------------------------

 var x = (location.x / resolution + this.left);
 var y = (location.y / resolution - this.top);

 var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "text");

 label.setAttributeNS(null, "x", x);
 label.setAttributeNS(null, "y", -y);

 //add this for rotation----------------------------------------
 if (style.angle || style.angle == 0) {
 var rotate = 'rotate(' + style.angle + ',' + x + "," + -y + ')';
 label.setAttributeNS(null, "transform", rotate);
 }
 /////////////////////////----------------------------------------

 if (style.fontColor) {
 label.setAttributeNS(null, "fill", style.fontColor);
 }
 if (style.fontOpacity) {
 label.setAttributeNS(null, "opacity", style.fontOpacity);
 }
 if (style.fontFamily) {
 label.setAttributeNS(null, "font-family", style.fontFamily);
 }

 .
 .
 .
 }}}

 StyleMap with angle-Attribute:

 {{{
 var styleMap = new OpenLayers.StyleMap({
 label : "${label}",
 cursor: "pointer",
 labelXOffset: 0,
 labelYOffset: 0,
 fontColor: "black",
 fontSize: "24px",
 fontFamily: "Arial",
 labelSelect: true,
 labelAlign: "cm",
 angle: "${angle}"
 });

 }}}

 And the Layer with the new renderer:

 {{{
 var vectorLayer = new OpenLayers.Layer.Vector("newLayer", {
 styleMap: myStylemap,
 strategies: [myStrategy],
 renderers: ["CustomSVG", "VML"], //VML only for IE <= 8, labels are not
 rotated
 protocol: new OpenLayers.Protocol.HTTP({
 url: "gml/myGML.gml", // or some other source
 format: new OpenLayers.Format.GML()
 })
 });

 }}}



 I created a patch for OL 2.11, additionally I am attaching thachun's
 original files.

 Cheers,
 Benjamin

-- 
Ticket URL: <http://trac.openlayers.org/ticket/3651>
OpenLayers <http://openlayers.org/>
A free AJAX map viewer


More information about the Trac mailing list