[OpenLayers-Dev] vector labels

Zer hcan at hotmail.com
Mon Jun 30 19:45:32 EDT 2008


Thanks Piebe!

I tried your code and that turned out to be a bi surprise! At first i could
not see any lables at all. But when I zoomed in, the labels where there. Not
placed on the vectors, but still there.... What really confused me was how
they all were written in Russian! :-) That was... until I took a closer look
and saw that all labels were mirrored and upside-down! Hehe..... Kind of
fun!

I think there must be something wrong, or something missing, with your code.
I will take another look into it tomorrow!

-Z



Piebe de Vries wrote:
> 
> 
> 
> 
>   
> 
> 
> Besides its speed, I found the rendering of labels to work fine. 
> 
> I have extracted the needed changes from the sandbox, I am not
> completely sure but I think the attached diff includes all the
> adjustments needed to get labeling going. However it also includes a
> quick hack: labels will only be drawn if labelsVisible is true. I had
> to include this since rendering the labels (as is all the vector
> rendering) is awfully slow especially in IE, so I had to give the user
> the option to turn of labeling. 
> 
> Enable labeling by doing something like: 
> 
> var context = { 
>            
>     getTitle: function(feature) { 
>            
>             return "blabla "
> + feature.attributes['titel']; 
>            
>     } 
>             }; 
>             var
> template = { 
>                ,
> label : "${getTitle}" 
>            
>     , fontColor: "yellow" 
>                
> , fontWeight: "bold" 
>             }; 
>            var style = new
> OpenLayers.Style(template, {context:
> context}); 
>             var styleMap =
> new OpenLayers.StyleMap( 
>            
>     { 
>            
>      'default': style, 
>            
>      select: { fillColor: '#ff0000',
> externalGraphic:"blabla.png", graphicHeight: 20} 
>            
>      } 
>             ); 
>             
>             
>     layer = new OpenLayers.Layer.WFS( "Blabla", 
>                    
> host + "geoserver/wfs", {typename: 'bla:bla'}, 
>               
> { 
>                      
> typename: 'bla', 
>                       
> featureNS: ' http://bla.bla.bla ', 
>                      
> extractAttributes: true, 
>            
>           styleMap: styleMap 
>               
> } ); 
> 
> 
> Good luck, 
>  Piebe 
> 
> Zer wrote:
> 
>   Hi!
> 
> I also need this function. Has anything more been done since April? What
> is
> left to be done?
> 
> -Z
> 
> 
> Pierre GIRAUD wrote:
>   
>   
>     Hi Piebe,
> 
> You're right, there was no activity on this feature since december.
> In my opinion, there won't be any if there is no clear and loud demand
> for that, or if there's no fund given.
> Though, I think the code doesn't require much work to be ready to go into
> trunk.
> 
> It's currently available in a sandbox. Don't hesitate to try a merge
> against current trunk version and to play with it !
> 
> Regards,
> Pierre
> 
> 
>     
>   
>   
>   
> 
> 
> 
> 
> 
> Index: Elements.js
> ===================================================================
> --- Elements.js	(revision 6549)
> +++ Elements.js	(working copy)
> @@ -151,6 +151,9 @@
>  	            this.root.appendChild(node); 
>  	        }
>              this.postDraw(node);
> +			
> +	        // draw potential label
> +			this.drawLabel(node, geometry, style);
>          } else {
>              node = OpenLayers.Util.getElement(geometry.id);
>              if (node) {
> @@ -210,6 +213,32 @@
>          return this.setStyle(node, style, options, geometry);
>      },
>      
> +	   /**
> +     * Method: drawLabel
> +     * Draws a potential label if set in style
> +     * 
> +     * Parameters:
> +     * node - {DOMElement}
> +     * geometry - {<OpenLayers.Geometry>}
> +     * style - {Object}
> +     */
> +    drawLabel: function(node, geometry, style) {
> +        if (labelsVisible) // HACK
> +		{
> +			if (style.label) 
> +			{
> +				this.drawText(node, style, geometry.getBounds().getCenterPixel());
> +			}
> +		}
> +		else
> +		{
> +			if (style.label) 
> +			{
> +				this.removeText(node, style)
> +			}			
> +		}
> +    },
> +	
>      /**
>       * Method: postDraw
>       * Things that have do be done after the geometry node is appended
> Index: SVG.js
> ===================================================================
> --- SVG.js	(revision 6549)
> +++ SVG.js	(working copy)
> @@ -464,6 +464,50 @@
>              node.setAttributeNS(null, "d", "");
>          }    
>      },
> +    
> +    /**
> +     * Method: drawText
> +     * This method is only called by the renderer itself.
> +     * 
> +     * Parameters: 
> +     * node - {DOMElement}
> +     * style -
> +     * location - {<OpenLayers.Geometry.Point>}
> +     */
> +    drawText: function(node, style, location) {
> +        var resolution = this.getResolution();
> +        
> +        var x = (location.x / resolution + this.left);
> +        var y = (location.y / resolution - this.top);
> +        
> +        var label = this.nodeFactory("label" + node.id, "text");
> +        label.setAttributeNS(null, "x", x);
> +        label.setAttributeNS(null, "y", -y);
> +        
> +        if (style.fontColor) {
> +            label.setAttributeNS(null, "fill", style.fontColor);
> +        }
> +        if (style.fontFamily) {
> +            label.setAttributeNS(null, "font-family", style.fontFamily);
> +        }
> +        if (style.fontSize) {
> +            label.setAttributeNS(null, "font-size", style.fontSize);
> +        }
> +        if (style.fontWeight) {
> +            label.setAttributeNS(null, "font-weight", style.fontWeight);
> +        }
> +        
> +        /* No need to scale Text... */
> +        label.setAttributeNS(null, "transform", "scale(1, -1)");
> +        
> +        // prevent label duplication
> +        if (label.firstChild) {
> +            label.removeChild(label.firstChild);
> +        }
> +        var data = document.createTextNode(style.label);
> +        label.appendChild(data);
> +        node.parentNode.appendChild(label);
> +    },
>  
>      /** 
>       * Method: getComponentString
> Index: VML.js
> ===================================================================
> --- VML.js	(revision 6549)
> +++ VML.js	(working copy)
> @@ -552,6 +552,52 @@
>  
>          node.path = path.join("");
>      },
> +    /**
> +     * Method: drawText
> +     * This method is only called by the renderer itself and must only
> +     *    be called after the node is append to renderer.root
> +     * 
> +     * Parameters: 
> +     * node - {DOMElement}
> +     * style -
> +     * location - {<OpenLayers.Geometry.Point>}
> +     */
> +    drawText: function(node, style, location) {
> +        
> +        var label = this.nodeFactory("label" + node.id, "v:oval");
> +        
> +        var resolution = this.getResolution();
> +    
> +        label.style.left = (location.x /resolution).toFixed() ;
> +        label.style.top = (location.y /resolution).toFixed();
>  
> +        var textbox = this.createNode("v:textbox");
> +        
> +        var span = document.createElement('span');
> +        if (style.fontColor) {
> +            span.style.color = style.fontColor;
> +        }
> +        if (style.fontFamily) {
> +            span.style.fontFamily = style.fontFamily;
> +        }
> +        if (style.fontSize) {
> +            span.style.fontSize = style.fontSize;
> +        }
> +        if (style.fontWeight) {
> +            span.style.fontWeight = style.fontWeight;
> +        }
> +
> +        span.innerHTML = style.label;
> +        
> +        textbox.appendChild(span);
> +        
> +        // prevent label duplication
> +        if (label.firstChild) {
> +            label.removeChild(label.firstChild);
> +        }
> +        
> +        label.appendChild(textbox);
> +        node.parentNode.appendChild(label);
> +    },
>      CLASS_NAME: "OpenLayers.Renderer.VML"
>  });
> 
> _______________________________________________
> Dev mailing list
> Dev at openlayers.org
> http://openlayers.org/mailman/listinfo/dev
> 
> 

-- 
View this message in context: http://www.nabble.com/vector-labels-tp16589123p18206561.html
Sent from the OpenLayers Dev mailing list archive at Nabble.com.




More information about the Dev mailing list