OpenLayers OpenLayers

Ticket #736: externalGraphic.diff

File externalGraphic.diff, 6.2 kB (added by ahocevar, 1 year ago)

New, improved version. Implemented for both SVG and VML.

  • /mnt/d/eclipse/workspace/openlayers/examples/vector-features.html

    old new  
    2121            var style_blue = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); 
    2222            style_blue.strokeColor = "blue";  
    2323            style_blue.fillColor = "blue";  
     24            style_blue.externalGraphic = "../img/marker.png"; 
     25            style_blue.pointRadius = 12; 
    2426            var style_green = { 
    2527                strokeColor: "#00FF00", 
    2628                strokeOpacity: 1, 
    …… 
    3436            // create a point feature 
    3537            var point = new OpenLayers.Geometry.Point(-111.04, 45.68); 
    3638            var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue); 
     39            var point2 = new OpenLayers.Geometry.Point(-105.04, 49.68); 
     40            var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green); 
     41            var point3 = new OpenLayers.Geometry.Point(-105.04, 49.68); 
     42            var pointFeature3 = new OpenLayers.Feature.Vector(point3,null,style_blue); 
    3743             
    3844            // create a line feature from a list of points 
    3945            var pointList = []; 
    …… 
    6470             
    6571            map.addLayer(vectorLayer); 
    6672            map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5); 
    67             vectorLayer.addFeatures([pointFeature, lineFeature, polygonFeature]); 
     73            vectorLayer.addFeatures([pointFeature, pointFeature3, pointFeature2, lineFeature, polygonFeature]); 
    6874        } 
    6975        // --> 
    7076    </script> 

  • /mnt/d/eclipse/workspace/openlayers/lib/OpenLayers/Renderer/SVG.js

    old new  
    165165        options = options || node._options; 
    166166 
    167167        if (node._geometryClass == "OpenLayers.Geometry.Point") { 
    168             node.setAttributeNS(null, "r", style.pointRadius); 
     168            if (style.externalGraphic) { 
     169                // remove old node 
     170                var id = node.getAttributeNS(null, "id"); 
     171                var x = node.getAttributeNS(null, "cx"); 
     172                var y = node.getAttributeNS(null, "cy"); 
     173                var _featureId = node._featureId; 
     174                var _geometryClass = node._geometryClass; 
     175                var _style = node._style; 
     176                this.root.removeChild(node); 
     177                 
     178                // create new image node 
     179                var node = this.createNode("image", id); 
     180                node._featureId = _featureId; 
     181                node._geometryClass = _geometryClass; 
     182                node._style = _style; 
     183                this.root.appendChild(node); 
     184 
     185                // now style the new node 
     186                var radius = style.pointRadius; 
     187                node.setAttributeNS(null, "x", x-radius); 
     188                node.setAttributeNS(null, "y", -y-radius); 
     189                node.setAttributeNS(null, "width", 2*radius); 
     190                node.setAttributeNS(null, "height", 2*radius); 
     191                node.setAttributeNS("http://www.w3.org/1999/xlink", "href", style.externalGraphic); 
     192                node.setAttributeNS(null, "transform", "scale(1,-1)"); 
     193                node.setAttributeNS(null, "style", "opacity: "+style.fillOpacity); 
     194            } else { 
     195                node.setAttributeNS(null, "r", style.pointRadius); 
     196            } 
    169197        } 
    170198         
    171199        if (options.isFilled) { 

  • /mnt/d/eclipse/workspace/openlayers/lib/OpenLayers/Renderer/VML.js

    old new  
    129129        options = options || node._options; 
    130130         
    131131        if (node._geometryClass == "OpenLayers.Geometry.Point") { 
    132             this.drawCircle(node, geometry, style.pointRadius); 
     132            if (style.externalGraphic) { 
     133                // remove old node 
     134                var id = node.id; 
     135                var _featureId = node._featureId; 
     136                var _geometryClass = node._geometryClass; 
     137                var _style = node._style; 
     138                this.root.removeChild(node); 
     139                 
     140                // create new image node 
     141                var node = this.createNode("v:rect", id); 
     142                var fill = this.createNode("v:fill", id+"_image"); 
     143                node.appendChild(fill); 
     144                node._featureId = _featureId; 
     145                node._geometryClass = _geometryClass; 
     146                node._style = _style; 
     147                this.root.appendChild(node); 
     148                 
     149                fill.src = style.externalGraphic; 
     150                fill.type = "frame"; 
     151                fill.aspect = "atmost"; 
     152                node.style.flip = "y";  
     153                 
     154                // now style the new node 
     155                var radius = style.pointRadius; 
     156                var resolution = this.getResolution(); 
     157                node.style.left = (geometry.x/resolution-radius).toFixed(); 
     158                node.style.top = (geometry.y/resolution-radius).toFixed(); 
     159                node.style.width = 2*radius; 
     160                node.style.height = 2*radius;      
     161                 
     162                // modify fill style for rect styling below 
     163                style.fillColor = "none"; 
     164                style.strokeColor = "none"; 
     165                          
     166            } else { 
     167                this.drawCircle(node, geometry, style.pointRadius); 
     168            } 
    133169        } 
    134170 
    135171      //fill 
    …… 
    146182                fill = this.createNode('v:fill', node.id + "_fill"); 
    147183                node.appendChild(fill); 
    148184            } 
    149             fill.setAttribute("opacity", style.fillOpacity); 
     185            if (style.fillOpacity) { 
     186                fill.setAttribute("opacity", style.fillOpacity); 
     187            } 
    150188        } 
    151189 
    152190