【openlayers】修改源码支持SLD的graphicfill属性

前段时间一群友有这样一个需求：在ol中画面，但面的填充物为图片，在使用sld样式时ol无法识别图片，经几番搜索原来官方版本暂不支持，可按如下方法解决

需要修改如下三个源码文件：

openlayers/lib/OpenLayers/Renderer/SVG.js

openlayers/lib/OpenLayers/Renderer/VML.js  

openlayers/lib/OpenLayers/Format/SLD/v1.js

详情如下：‘+’后面是新增代码  ‘-’后面是删除代码

openlayers/lib/OpenLayers/Renderer/SVG.js    
  
   
   /**
    * @requires OpenLayers/Renderer/Elements.js
  + * @requires OpenLayers/Console.js
    */
   
  
       setStyle: function(node, style, options) {
  -        style = style  || node._style;
  +        style = style || node._style;
           options = options || node._options;
           var r = parseFloat(node.getAttributeNS(null, "r"));
           var widthFactor = 1;
           }
           
           if (options.isFilled) {
  -            node.setAttributeNS(null, "fill", style.fillColor);
  -            node.setAttributeNS(null, "fill-opacity", style.fillOpacity);
  +            if (style.externalGraphic) {
  +                var pid = this.createImagePattern(style);
  +                node.setAttributeNS(null, "fill", "url(#" + pid + ")");
  +                node.setAttributeNS(null, "fill-opacity", 1);
  +            } else if (style.graphicName && node._geometryClass !== "OpenLayers.Geometry.Point") {
  +                //this can also happen if a rule based style applies to both points and other types of geometries. TODO: better handling of rule based styles!
  +                OpenLayers.Console.error('WellKnownName is not yet supported as GraphicFill by the SVG renderer!');
  +                //var pid = this.createMarkPattern(style);
  +                //node.setAttributeNS(null, "fill", "url(#" + pid + ")");
  +                //node.setAttributeNS(null, "fill-opacity", 1);
  +            } else {
  +                node.setAttributeNS(null, "fill", style.fillColor);
  +                node.setAttributeNS(null, "fill-opacity", style.fillOpacity);
  +            }
           } else {
               node.setAttributeNS(null, "fill", "none");
           }
           this.rendererRoot.appendChild(defs);
           return defs;
       },
  +    
  +    /**
  +     * Method: createImagePattern
  +     *
  +     * Returns:
  +     * {String} The id of the created pattern
  +     */
  +    createImagePattern: function(style) {
  +        // reuse the pattern if the same externalGraphic with the same size has already been used
  +        var id = this.container.id + "-" + style.externalGraphic + ((style.pointRadius) ? "-" + style.pointRadius : "");
  +        var patternNode = OpenLayers.Util.getElement(id);
   
  +        if (!patternNode) {
  +            // to follow SLD spec we need to know image size
  +            // to get the image size we must load the image
  +            var img = new Image();
  +
  +            img.onload = OpenLayers.Function.bind(function() {
  +                if (!this.defs) {
  +                    // create svg defs tag
  +                    this.defs = this.createDefs();
  +                }
  +                
  +                // according to SLD specification image should be scaled by its inherent dimensions if no Size is given
  +                var height = img.height * 72 / 96;
  +                var width = img.width * 72 / 96;
  +                
  +                // if Size is given, it is used as height and width is scaled to original aspect
  +                if (style.pointRadius) {
  +                    var aspect = width / height;
  +                    height = (style.pointRadius * 2) * 72 / 96;
  +                    width = height * aspect;
  +                }
  +                
  +                height = height + "pt";
  +                width = width + "pt";
  +                
  +                patternNode = this.nodeFactory(id, "pattern");
  +                patternNode.setAttributeNS(null, "x", "0");
  +                patternNode.setAttributeNS(null, "y", "0");
  +                patternNode.setAttributeNS(null, "height", height);
  +                patternNode.setAttributeNS(null, "width", width);
  +                patternNode.setAttributeNS(null, "patternUnits", "userSpaceOnUse");
  +                
  +                var imageNode = this.nodeFactory(null, "image");
  +                patternNode.appendChild(imageNode);
  +                imageNode.setAttributeNS(this.xlinkns, "href", style.externalGraphic);
  +                imageNode.setAttributeNS(null, "height", height);
  +                imageNode.setAttributeNS(null, "width", width);
  +                imageNode.setAttributeNS(null, "style", "opacity: " + (style.graphicOpacity || style.fillOpacity || 1));
  +                if (typeof style.rotation != "undefined") {
  +                    var rotation = OpenLayers.String.format("rotate(${0})", [style.rotation]);
  +                    imageNode.setAttributeNS(null, "transform", rotation);
  +                }
  +                this.defs.appendChild(patternNode);
  +            }, this);
  +
  +            img.src = style.externalGraphic;
+        }
+
+        return id;
+    },
+

openlayers/lib/OpenLayers/Renderer/VML.js    
 
  
  /**
   * @requires OpenLayers/Renderer/Elements.js
 + * @requires OpenLayers/Console.js
   */
  
 
  
          // fill 
          if (options.isFilled) { 
 -            node.fillcolor = fillColor; 
 +            if (!style.externalGraphic) {
 +                node.fillcolor = fillColor;
 +            } else {
 +                node.fillcolor = "none";
 +            }
          } else { 
              node.filled = "false"; 
          }
 
              }
              fill.opacity = style.fillOpacity;
  
 -            if (node._geometryClass === "OpenLayers.Geometry.Point" &&
 -                    style.externalGraphic) {
 -
 -                // override fillOpacity
 -                if (style.graphicOpacity) {
 -                    fill.opacity = style.graphicOpacity;
 -                }
 -                
 -                fill.src = style.externalGraphic;
 -                fill.type = "frame";
 -                
 -                if (!(style.graphicWidth && style.graphicHeight)) {
 -                  fill.aspect = "atmost";
 -                }                
 -            }
 +            if (style.externalGraphic) {
 +                // reuse the fill node if the same externalGraphic with the same size has already been used
 +                if (fill.src != style.externalGraphic ||
 +                    ((fill.size) ? parseFloat(fill.size.value.split(",")[1]): 0) != (style.pointRadius * 2) * 72 / 96) {
 +                    // override fillOpacity
 +                    if (style.graphicOpacity) {
 +                        fill.opacity = style.graphicOpacity;
 +                    }
 +                    
 +                    fill.src = style.externalGraphic;
 +                    fill.type = (node._geometryClass === "OpenLayers.Geometry.Point") ? "frame" : "tile";
 +                    
 +                    // to follow SLD spec we need to know image size
 +                    // to get the image size we must load the image
 +                    var img = new Image();
 +                    
 +                    img.onload = OpenLayers.Function.bind(function() {
 +                        var height = img.height * 72 / 96;
 +                        var width = img.width * 72 / 96;
 +                        if (style.pointRadius) {
 +                            var aspect = width / height;
 +                            height = (style.pointRadius * 2) * 72 / 96;
 +                            width = height * aspect;
 +                        }
 +                        fill.size = width + "pt," + height + "pt";
 +                    });
 +                    
 +                    // load the image
 +                    img.src = style.externalGraphic;
 +                    
 +                    if (!(style.graphicWidth && style.graphicHeight)) {
 +                        fill.aspect = "atmost";
 +                    }
 +                }
 +            } else if (style.graphicName && node._geometryClass !== "OpenLayers.Geometry.Point") {
 +                //this can also happen if a rule based style applies to both points and other types of geometries. TODO: better handling of rule based styles!
 +                OpenLayers.Console.error('WellKnownName is not yet supported as GraphicFill by the VML renderer!');
 +            }
              if (fill.parentNode != node) {
                  node.appendChild(fill);
              }


openlayers/lib/OpenLayers/Format/SLD/v1.js    
                     }
                 }
             },
+            "GraphicFill": function(node, symbolizer) {
+                symbolizer.pointRadius = null;
+                this.readChildNodes(node, symbolizer);
+            },
             "Graphic": function(node, symbolizer) {
                 symbolizer.graphic = true;
                 var graphic = {};
             "Fill": function(symbolizer) {
                 var node = this.createElementNSPlus("sld:Fill");
                 
-                // GraphicFill here
-                
-                // add in CssParameters
-                if(symbolizer.fillColor) {
-                    this.writeNode(
-                        "CssParameter",
-                        {symbolizer: symbolizer, key: "fillColor"},
-                        node
-                    );
-                }
-                if(symbolizer.fillOpacity != null) {
-                    this.writeNode(
-                        "CssParameter",
-                        {symbolizer: symbolizer, key: "fillOpacity"},
-                        node
-                    );
-                }
+                // if externalGraphic write a GraphicFill node to the Fill node
+                if (symbolizer.externalGraphic) {
+                    this.writeNode("GraphicFill", symbolizer, node);
+                } else {
+                    // add in CssParameters
+                    if(symbolizer.fillColor) {
+                        this.writeNode(
+                            "CssParameter",
+                            {symbolizer: symbolizer, key: "fillColor"},
+                            node
+                        );
+                    }
+                    if(symbolizer.fillOpacity != null) {
+                        this.writeNode(
+                            "CssParameter",
+                            {symbolizer: symbolizer, key: "fillOpacity"},
+                            node
+                        );
+                    }
+                }
                 return node;
             },
             "PointSymbolizer": function(symbolizer) {
                 this.writeNode("Graphic", symbolizer, node);
                 return node;
             },
+            "GraphicFill": function(symbolizer) {
+                var node = this.createElementNSPlus("sld:GraphicFill");
+                this.writeNode("Graphic", symbolizer, node);
+                return node;
+            },
             "Graphic": function(symbolizer) {
                 var node = this.createElementNSPlus("sld:Graphic");
                 if(symbolizer.externalGraphic != undefined) {

 详细示例见：http://dev.openlayers.org/sandbox/ossipoff/openlayers/examples/graphicfill.html