ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

* added stroke, fill and graphic symbolizer properties (all boolean) to

Browse Source 
control whether or not to render a stroke, fill and graphic.
 * added a defaultsPerSymbolizer property to OpenLayers.Style to allow 
for extending incomplete symbolizers with defaults for stroke, fill or 
graphic. This also makes Format.SLD read/write round trips possible 
without modifying empty or incomplete <Stroke/>, <Fill/> and <Graphic/> 
constructs. r=tschaub (closes #1876)


git-svn-id: http://svn.openlayers.org/trunk/openlayers@9278 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2009-04-13 13:35:13 +00:00
parent 13e42ec59b
commit 2aa7f22926
7 changed files with 327 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
examples/symbolizers-fill-stroke-graphic.html Normal file
View File

@@ -0,0 +1,122 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Fill, Stroke, and Graphic Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
function init() {
map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap: new OpenLayers.StyleMap({
'default': new OpenLayers.Style(null, {
rules: [
new OpenLayers.Rule({
symbolizer: {
graphic: false,
label: "Label for invisible point"
},
filter: new OpenLayers.Filter.Comparison({
type: "==",
property: "topic",
value: "point_invisible"
})
}),
new OpenLayers.Rule({
symbolizer: {
stroke: true,
fill: true,
label: "Polygon with stroke and fill defaults"
},
filter: new OpenLayers.Filter.Comparison({
type: "==",
property: "topic",
value: "polygon_defaults"
})
}),
new OpenLayers.Rule({
symbolizer: {
stroke: true,
fill: false,
label: "Point without fill",
labelAlign: "rb"
},
filter: new OpenLayers.Filter.Comparison({
type: "==",
property: "topic",
value: "point_nofill"
})
})
]
})
}),
renderers: renderer
});
// create a point feature
var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
var pointFeature = new OpenLayers.Feature.Vector(point);
pointFeature.attributes = {
topic: "point_invisible"
};
// create a polygon feature from a linear ring of points
var pointList = [];
for(var p=0; p<6; ++p) {
var a = p * (2 * Math.PI) / 7;
var r = Math.random(1) + 1;
var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)),
point.y + 5 + (r * Math.sin(a)));
pointList.push(newPoint);
}
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing]));
polygonFeature.attributes = {
topic: "polygon_defaults"
};
multiFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Collection([
new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(-105,40),
new OpenLayers.Geometry.Point(-95,45)
]),
new OpenLayers.Geometry.Point(-105, 40)
]),
{
topic: "point_nofill"
});
map.addLayer(vectorLayer);
vectorLayer.drawFeature(multiFeature);
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 4);
vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature]);
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrate fill, stroke, and graphic property of symbolizers.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
This example shows how to use symbolizers with defaults for stroke, fill, and graphic.
</div>
</body>
</html>

5
lib/OpenLayers/Format/SLD/v1.js
View File

@@ -137,7 +137,7 @@ OpenLayers.Format.SLD.v1 = OpenLayers.Class(OpenLayers.Format.Filter.v1_0_0, {
); );
}, },
"UserStyle": function(node, layer) { "UserStyle": function(node, layer) {
var obj = {rules: []}; var obj = {defaultsPerSymbolizer: true, rules: []};
this.readChildNodes(node, obj); this.readChildNodes(node, obj);
var style = new OpenLayers.Style(this.defaultSymbolizer, obj); var style = new OpenLayers.Style(this.defaultSymbolizer, obj);
layer.userStyles.push(style); layer.userStyles.push(style);
@@ -232,9 +232,11 @@ OpenLayers.Format.SLD.v1 = OpenLayers.Class(OpenLayers.Format.Filter.v1_0_0, {
rule.symbolizer["Point"] = symbolizer; rule.symbolizer["Point"] = symbolizer;
}, },
"Stroke": function(node, symbolizer) { "Stroke": function(node, symbolizer) {
symbolizer.stroke = true;
this.readChildNodes(node, symbolizer); this.readChildNodes(node, symbolizer);
}, },
"Fill": function(node, symbolizer) { "Fill": function(node, symbolizer) {
symbolizer.fill = true;
this.readChildNodes(node, symbolizer); this.readChildNodes(node, symbolizer);
}, },
"CssParameter": function(node, symbolizer) { "CssParameter": function(node, symbolizer) {
@@ -250,6 +252,7 @@ OpenLayers.Format.SLD.v1 = OpenLayers.Class(OpenLayers.Format.Filter.v1_0_0, {
} }
}, },
"Graphic": function(node, symbolizer) { "Graphic": function(node, symbolizer) {
symbolizer.graphic = true;
var graphic = {}; var graphic = {};
// painter's order not respected here, clobber previous with next // painter's order not respected here, clobber previous with next
this.readChildNodes(node, graphic); this.readChildNodes(node, graphic);

94
lib/OpenLayers/Renderer/Canvas.js
View File

@@ -244,21 +244,27 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
* style - {Object} * style - {Object}
*/ */
drawPoint: function(geometry, style) { drawPoint: function(geometry, style) {
var pt = this.getLocalXY(geometry); if(style.graphic !== false) {
var pt = this.getLocalXY(geometry);
if (style.externalGraphic) {
this.drawExternalGraphic(pt, style);
} else {
this.setCanvasStyle("fill", style);
this.canvas.beginPath();
this.canvas.arc(pt[0], pt[1], 6, 0, Math.PI*2, true);
this.canvas.fill();
this.setCanvasStyle("stroke", style); if (style.externalGraphic) {
this.canvas.beginPath(); this.drawExternalGraphic(pt, style);
this.canvas.arc(pt[0], pt[1], 6, 0, Math.PI*2, true); } else {
this.canvas.stroke(); if(style.fill !== false) {
this.setCanvasStyle("reset"); this.setCanvasStyle("fill", style);
this.canvas.beginPath();
this.canvas.arc(pt[0], pt[1], 6, 0, Math.PI*2, true);
this.canvas.fill();
}
if(style.stroke !== false) {
this.setCanvasStyle("stroke", style);
this.canvas.beginPath();
this.canvas.arc(pt[0], pt[1], 6, 0, Math.PI*2, true);
this.canvas.stroke();
this.setCanvasStyle("reset");
}
}
} }
}, },
@@ -271,15 +277,17 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
* style - {Object} * style - {Object}
*/ */
drawLineString: function(geometry, style) { drawLineString: function(geometry, style) {
this.setCanvasStyle("stroke", style); if(style.stroke !== false) {
this.canvas.beginPath(); this.setCanvasStyle("stroke", style);
var start = this.getLocalXY(geometry.components[0]); this.canvas.beginPath();
this.canvas.moveTo(start[0], start[1]); var start = this.getLocalXY(geometry.components[0]);
for(var i = 1; i < geometry.components.length; i++) { this.canvas.moveTo(start[0], start[1]);
var pt = this.getLocalXY(geometry.components[i]); for(var i = 1; i < geometry.components.length; i++) {
this.canvas.lineTo(pt[0], pt[1]); var pt = this.getLocalXY(geometry.components[i]);
this.canvas.lineTo(pt[0], pt[1]);
}
this.canvas.stroke();
} }
this.canvas.stroke();
this.setCanvasStyle("reset"); this.setCanvasStyle("reset");
}, },
@@ -292,26 +300,30 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
* style - {Object} * style - {Object}
*/ */
drawLinearRing: function(geometry, style) { drawLinearRing: function(geometry, style) {
this.setCanvasStyle("fill", style); if(style.fill !== false) {
this.canvas.beginPath(); this.setCanvasStyle("fill", style);
var start = this.getLocalXY(geometry.components[0]); this.canvas.beginPath();
this.canvas.moveTo(start[0], start[1]); var start = this.getLocalXY(geometry.components[0]);
for(var i = 1; i < geometry.components.length - 1 ; i++) { this.canvas.moveTo(start[0], start[1]);
var pt = this.getLocalXY(geometry.components[i]); for(var i = 1; i < geometry.components.length - 1 ; i++) {
this.canvas.lineTo(pt[0], pt[1]); var pt = this.getLocalXY(geometry.components[i]);
this.canvas.lineTo(pt[0], pt[1]);
}
this.canvas.fill();
} }
this.canvas.fill();
var oldWidth = this.canvas.lineWidth; if(style.stroke !== false) {
this.setCanvasStyle("stroke", style); var oldWidth = this.canvas.lineWidth;
this.canvas.beginPath(); this.setCanvasStyle("stroke", style);
var start = this.getLocalXY(geometry.components[0]); this.canvas.beginPath();
this.canvas.moveTo(start[0], start[1]); var start = this.getLocalXY(geometry.components[0]);
for(var i = 1; i < geometry.components.length; i++) { this.canvas.moveTo(start[0], start[1]);
var pt = this.getLocalXY(geometry.components[i]); for(var i = 1; i < geometry.components.length; i++) {
this.canvas.lineTo(pt[0], pt[1]); var pt = this.getLocalXY(geometry.components[i]);
this.canvas.lineTo(pt[0], pt[1]);
}
this.canvas.stroke();
} }
this.canvas.stroke();
this.setCanvasStyle("reset"); this.setCanvasStyle("reset");
}, },
@@ -345,6 +357,10 @@ OpenLayers.Renderer.Canvas = OpenLayers.Class(OpenLayers.Renderer, {
* style - {Object} * style - {Object}
*/ */
drawText: function(location, style) { drawText: function(location, style) {
style = OpenLayers.Util.extend({
fontColor: "#000000",
labelAlign: "cm"
}, style);
var pt = this.getLocalXY(location); var pt = this.getLocalXY(location);
this.setCanvasStyle("reset"); this.setCanvasStyle("reset");

12
lib/OpenLayers/Renderer/Elements.js
View File

@@ -661,12 +661,20 @@ OpenLayers.Renderer.Elements = OpenLayers.Class(OpenLayers.Renderer, {
OpenLayers.Util.applyDefaults(style, this.minimumSymbolizer); OpenLayers.Util.applyDefaults(style, this.minimumSymbolizer);
var options = { var options = {
'isFilled': true, 'isFilled': style.fill === undefined ?
'isStroked': !!style.strokeWidth true :
style.fill,
'isStroked': style.stroke === undefined ?
!!style.strokeWidth :
style.stroke
}; };
var drawn; var drawn;
switch (geometry.CLASS_NAME) { switch (geometry.CLASS_NAME) {
case "OpenLayers.Geometry.Point": case "OpenLayers.Geometry.Point":
if(style.graphic === false) {
options.isFilled = false;
options.isStroked = false;
}
drawn = this.drawPoint(node, geometry); drawn = this.drawPoint(node, geometry);
break; break;
case "OpenLayers.Geometry.LineString": case "OpenLayers.Geometry.LineString":

5
lib/OpenLayers/Renderer/SVG.js
View File

@@ -254,7 +254,10 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
var widthFactor = 1; var widthFactor = 1;
var pos; var pos;
if (node._geometryClass == "OpenLayers.Geometry.Point" && r) { if (node._geometryClass == "OpenLayers.Geometry.Point" && r) {
if (style.externalGraphic) { node.style.visibility = "";
if (style.graphic === false) {
node.style.visibility = "hidden";
} else if (style.externalGraphic) {
pos = this.getPosition(node); pos = this.getPosition(node);
if (style.graphicTitle) { if (style.graphicTitle) {

49
lib/OpenLayers/Style.js
View File

@@ -64,10 +64,21 @@ OpenLayers.Style = OpenLayers.Class({
* Property: defaultStyle * Property: defaultStyle
* {Object} hash of style properties to use as default for merging * {Object} hash of style properties to use as default for merging
* rule-based style symbolizers onto. If no rules are defined, * rule-based style symbolizers onto. If no rules are defined,
* createSymbolizer will return this style. * createSymbolizer will return this style. If <defaultsPerSymbolizer> is set to
* true, the defaultStyle will only be taken into account if there are
* rules defined.
*/ */
defaultStyle: null, defaultStyle: null,
/**
* Property: defaultsPerSymbolizer
* {Boolean} If set to true, the <defaultStyle> will extend the symbolizer
* of every rule. Properties of the <defaultStyle> will also be used to set
* missing symbolizer properties if the symbolizer has stroke, fill or
* graphic set to true. Default is false.
*/
defaultsPerSymbolizer: false,
/** /**
* Property: propertyStyles * Property: propertyStyles
* {Hash of Boolean} cache of style properties that need to be parsed for * {Hash of Boolean} cache of style properties that need to be parsed for
@@ -135,7 +146,7 @@ OpenLayers.Style = OpenLayers.Class({
* {Object} symbolizer hash * {Object} symbolizer hash
*/ */
createSymbolizer: function(feature) { createSymbolizer: function(feature) {
var style = this.createLiterals( var style = this.defaultsPerSymbolizer ? {} : this.createLiterals(
OpenLayers.Util.extend({}, this.defaultStyle), feature); OpenLayers.Util.extend({}, this.defaultStyle), feature);
var rules = this.rules; var rules = this.rules;
@@ -191,6 +202,40 @@ OpenLayers.Style = OpenLayers.Class({
OpenLayers.Style.SYMBOLIZER_PREFIXES[0]; OpenLayers.Style.SYMBOLIZER_PREFIXES[0];
var symbolizer = rule.symbolizer[symbolizerPrefix] || rule.symbolizer; var symbolizer = rule.symbolizer[symbolizerPrefix] || rule.symbolizer;
if(this.defaultsPerSymbolizer === true) {
var defaults = this.defaultStyle;
OpenLayers.Util.applyDefaults(symbolizer, {
pointRadius: defaults.pointRadius
})
if(symbolizer.stroke === true || symbolizer.graphic === true) {
OpenLayers.Util.applyDefaults(symbolizer, {
strokeWidth: defaults.strokeWidth,
strokeColor: defaults.strokeColor,
strokeOpacity: defaults.strokeOpacity,
strokeDashstyle: defaults.strokeDashstyle,
strokeLinecap: defaults.strokeLinecap
});
}
if(symbolizer.fill === true || symbolizer.graphic === true) {
OpenLayers.Util.applyDefaults(symbolizer, {
fillColor: defaults.fillColor,
fillOpacity: defaults.fillOpacity
});
}
if(symbolizer.graphic === true) {
OpenLayers.Util.applyDefaults(symbolizer, {
pointRadius: this.defaultStyle.pointRadius,
externalGraphic: this.defaultStyle.externalGraphic,
graphicName: this.defaultStyle.graphicName,
graphicOpacity: this.defaultStyle.graphicOpacity,
graphicWidth: this.defaultStyle.graphicWidth,
graphicHeight: this.defaultStyle.graphicHeight,
graphicXOffset: this.defaultStyle.graphicXOffset,
graphicYOffset: this.defaultStyle.graphicYOffset
});
}
}
// merge the style with the current style // merge the style with the current style
return this.createLiterals( return this.createLiterals(

85
tests/Style.html
View File

@@ -151,6 +151,91 @@
style.createSymbolizer(new OpenLayers.Feature.Vector()); style.createSymbolizer(new OpenLayers.Feature.Vector());
} }
function test_Style_applySymbolizer(t) {
t.plan(15);
var feature = new OpenLayers.Feature.Vector();
var defaults = OpenLayers.Feature.Vector.style["default"];
var style, symbolizer;
style = new OpenLayers.Style();
symbolizer = style.createSymbolizer(feature);
t.eq(symbolizer.pointRadius, defaults.pointRadius, "symbolizer has the correct pointRadius");
t.eq(symbolizer.strokeWidth, defaults.strokeWidth, "symbolizer has the correct strokeWidth");
t.eq(symbolizer.fillColor, defaults.fillColor, "symbolizer has the correct fillColor");
t.eq(symbolizer.graphicName, defaults.graphicName, "symbolizer has the correct graphicName");
style = new OpenLayers.Style(null, {
defaultsPerSymbolizer: true,
rules: [
new OpenLayers.Rule({
symbolizer: {
stroke: true
}
})
]
});
symbolizer = style.createSymbolizer(feature);
t.eq(symbolizer.strokeWidth, defaults.strokeWidth, "symbolizer has the correct strokeWidth");
t.ok(symbolizer.fillColor == undefined, "fillColor is undefined");
style = new OpenLayers.Style(null, {
defaultsPerSymbolizer: true,
rules: [
new OpenLayers.Rule({
symbolizer: {
}
})
]
});
symbolizer = style.createSymbolizer(feature);
t.eq(symbolizer.pointRadius, defaults.pointRadius, "symbolizer has the correct pointRadius");
t.ok(symbolizer.strokeWidth == undefined, "strokeWidth is undefined");
t.ok(symbolizer.fillColor == undefined, "fillColor is undefined");
t.ok(symbolizer.graphicName == undefined, "graphicName is undefined");
style = new OpenLayers.Style(null, {
defaultsPerSymbolizer: true,
rules: [
new OpenLayers.Rule({
symbolizer: {
stroke: true
}
})
]
});
symbolizer = style.createSymbolizer(feature);
t.eq(symbolizer.strokeWidth, defaults.strokeWidth, "symbolizer has the correct strokeWidth");
t.ok(symbolizer.fillColor == undefined, "fillColor is undefined");
style = new OpenLayers.Style(null, {
defaultsPerSymbolizer: true,
rules: [
new OpenLayers.Rule({
symbolizer: {
fill: true
}
})
]
});
symbolizer = style.createSymbolizer(feature);
t.eq(symbolizer.fillColor, defaults.fillColor, "symbolizer has the correct fillColor");
t.ok(symbolizer.strokeWidth == undefined, "strokeWidth is undefined");
style = new OpenLayers.Style(null, {
defaultsPerSymbolizer: true,
rules: [
new OpenLayers.Rule({
symbolizer: {
graphic: true
}
})
]
});
symbolizer = style.createSymbolizer(feature);
t.eq(symbolizer.graphicName, defaults.graphicName, "symbolizer has the correct graphicName");
}
function test_Style_context(t) { function test_Style_context(t) {
t.plan(2); t.plan(2);
var rule = new OpenLayers.Rule({ var rule = new OpenLayers.Rule({