[OpenLayers-Dev] vector labels

Zer hcan at hotmail.com
Tue Jul 1 15:51:33 EDT 2008


Thanks,

I have taken another look into this, but can not get it to work. Are there
any more files that need to be edited? Or are there somthings else wrong?
Are the files in the sandbox 2.6? 

.Z



Zer wrote:
> 
> 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-tp16589123p18223961.html
Sent from the OpenLayers Dev mailing list archive at Nabble.com.




More information about the Dev mailing list