前段時間一群友有這樣一個需求：在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

?

?

轉載于:https://www.cnblogs.com/shitao/archive/2012/08/14/2636874.html

總結

以上是生活随笔為你收集整理的【openlayers】修改源码支持SLD的graphicfill属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。