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

Always copy graphicName symbols, because there were too many issues with use/defs. Ctrl-Click and Shift-Click now works as expected on graphicName symbols. p=marcjansen, r=me (closes #2985)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@10976 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2010-12-29 12:06:46 +00:00
parent 1b9996d62c
commit fe6047859f
3 changed files with 58 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/graphic-name.html
+38 -90
View File
@@ -1,91 +1,39 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <!DOCTYPE html>
<head> <html>
<title>OpenLayers Graphic Names</title> <head>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" /> <title>OpenLayers Graphic Names</title>
<script src="../lib/OpenLayers.js"></script> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<script type="text/javascript"> <link rel="stylesheet" href="style.css" type="text/css" />
// user custom graphicname <script src="../lib/OpenLayers.js" type="text/javascript"></script>
<script src="./graphic-name.js" type="text/javascript"></script>
OpenLayers.Renderer.symbol.lightning = [0,0, 4,2, 6,0, 10,5, 6,3, 4,5, 0,0]; </head>
OpenLayers.Renderer.symbol.rectangle = [0,0, 4,0, 4,10, 0,10, 0,0]; <body onload="init();">
<h1 id="title">Named Graphics Example</h1>
var map; <div id="tags">
vector, named graphic, star, cross, x, square, triangle, circle, style
function init() { </div>
map = new OpenLayers.Map('map'); <p id="shortdesc">
Shows how to use well-known graphic names.
// list of well-known graphic names </p>
var graphics = ["star", "cross", "x", "square", "triangle", "circle", "lightning", "rectangle"]; <div id="map" class="smallmap">
</div>
// Create one feature for each well known graphic. <div id="docs">
// Give features a type attribute with the graphic name. <p>
var num = graphics.length; OpenLayers supports well-known names for a few graphics. You
var slot = map.maxExtent.getWidth() / num; can use the names &quot;star&quot;, &quot;cross&quot;,
var features = Array(num); &quot;x&quot;, &quot;square&quot;, &quot;triangle&quot;, and
for(var i=0; i<graphics.length; ++i) { &quot;circle&quot; as value for the graphicName property of a
lon = map.maxExtent.left + (i * slot) + (slot / 2); symbolizer.
features[i] = new OpenLayers.Feature.Vector( </p>
new OpenLayers.Geometry.Point( <p>
map.maxExtent.left + (i * slot) + (slot / 2), 0 The named symbols &quot;lightning&quot;, &quot;rectangle&quot;
), { and &quot;church&quot; are user defined.
type: graphics[i] </p>
} <p>
); See <a href="./graphic-name.js">graphic-name.js</a>
} for the source code of this example.
</p>
// Create a style map for painting the features. </div>
// The graphicName property of the symbolizer is evaluated using </body>
// the type attribute on each feature (set above).
var styles = new OpenLayers.StyleMap({
"default": {
graphicName: "${type}",
pointRadius: 10,
strokeColor: "fuchsia",
strokeWidth: 2,
fillColor: "lime",
fillOpacity: 0.6
},
"select": {
pointRadius: 20,
fillOpacity: 1,
rotation: 45
}
});
// Create a vector layer and give it your style map.
var layer = new OpenLayers.Layer.Vector(
"Graphics", {styleMap: styles, isBaseLayer: true}
);
layer.addFeatures(features);
map.addLayer(layer);
// Create a select feature control and add it to the map.
var select = new OpenLayers.Control.SelectFeature(layer, {hover: true});
map.addControl(select);
select.activate();
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Named Graphics Example</h1>
<div id="tags">
vector, named graphic, star, cross, x, square, triangle, circle, style
</div>
<p id="shortdesc">
Shows how to use well-known graphic names.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
OpenLayers supports well-known names for a few graphics. You can use
the names "star", "cross", "x", "square", "triangle", and "circle" as
the value for the graphicName property of a symbolizer.
</div>
</body>
</html> </html>
lib/OpenLayers/Renderer/SVG.js
+19 -32
View File
@@ -49,14 +49,6 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
*/ */
symbolMetrics: null, symbolMetrics: null,
/**
* Property: supportUse
* {Boolean} true if defs/use is supported - known to not work as expected
* at least in some applewebkit/5* builds.
* See https://bugs.webkit.org/show_bug.cgi?id=33322
*/
supportUse: null,
/** /**
* Constructor: OpenLayers.Renderer.SVG * Constructor: OpenLayers.Renderer.SVG
* *
@@ -70,7 +62,6 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
OpenLayers.Renderer.Elements.prototype.initialize.apply(this, OpenLayers.Renderer.Elements.prototype.initialize.apply(this,
arguments); arguments);
this.translationParameters = {x: 0, y: 0}; this.translationParameters = {x: 0, y: 0};
this.supportUse = (navigator.userAgent.toLowerCase().indexOf("applewebkit/5") == -1);
this.symbolMetrics = {}; this.symbolMetrics = {};
}, },
@@ -215,7 +206,7 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
if (style.externalGraphic) { if (style.externalGraphic) {
nodeType = "image"; nodeType = "image";
} else if (this.isComplexSymbol(style.graphicName)) { } else if (this.isComplexSymbol(style.graphicName)) {
nodeType = this.supportUse === false ? "svg" : "use"; nodeType = "svg";
} else { } else {
nodeType = "circle"; nodeType = "circle";
} }
@@ -306,17 +297,17 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
parent.removeChild(node); parent.removeChild(node);
} }
if(this.supportUse === false) { // The more appropriate way to implement this would be use/defs,
// workaround for webkit versions that cannot do defs/use // but due to various issues in several browsers, it is safer to
// (see https://bugs.webkit.org/show_bug.cgi?id=33322): // copy the symbols instead of referencing them.
// copy the symbol instead of referencing it // See e.g. ticket http://trac.osgeo.org/openlayers/ticket/2985
var src = document.getElementById(id); // and this email thread
node.firstChild && node.removeChild(node.firstChild); // http://osgeo-org.1803224.n2.nabble.com/Select-Control-Ctrl-click-on-Feature-with-a-graphicName-opens-new-browser-window-tc5846039.html
node.appendChild(src.firstChild.cloneNode(true)); var src = document.getElementById(id);
node.setAttributeNS(null, "viewBox", src.getAttributeNS(null, "viewBox")); node.firstChild && node.removeChild(node.firstChild);
} else { node.appendChild(src.firstChild.cloneNode(true));
node.setAttributeNS(this.xlinkns, "href", "#" + id); node.setAttributeNS(null, "viewBox", src.getAttributeNS(null, "viewBox"));
}
node.setAttributeNS(null, "width", size); node.setAttributeNS(null, "width", size);
node.setAttributeNS(null, "height", size); node.setAttributeNS(null, "height", size);
node.setAttributeNS(null, "x", pos.x - offset); node.setAttributeNS(null, "x", pos.x - offset);
@@ -334,19 +325,15 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
} }
var rotation = style.rotation; var rotation = style.rotation;
if ((rotation !== undefined || node._rotation !== undefined) && pos) { if ((rotation !== undefined || node._rotation !== undefined) && pos) {
node._rotation = rotation; node._rotation = rotation;
rotation |= 0; rotation |= 0;
if(node.nodeName !== "svg") { var metrics = this.symbolMetrics[id];
node.setAttributeNS(null, "transform", node.firstChild.setAttributeNS(null, "transform", "rotate("
"rotate(" + rotation + " " + pos.x + " " + + rotation + " "
pos.y + ")"); + metrics[1] + " "
} else { + metrics[2] + ")");
var metrics = this.symbolMetrics[id];
node.firstChild.setAttributeNS(null, "transform",
"rotate(" + style.rotation + " " + metrics[1] +
" " + metrics[2] + ")");
}
} }
} }
@@ -951,7 +938,7 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
*/ */
getFeatureIdFromEvent: function(evt) { getFeatureIdFromEvent: function(evt) {
var featureId = OpenLayers.Renderer.Elements.prototype.getFeatureIdFromEvent.apply(this, arguments); var featureId = OpenLayers.Renderer.Elements.prototype.getFeatureIdFromEvent.apply(this, arguments);
if(this.supportUse === false && !featureId) { if(!featureId) {
var target = evt.target; var target = evt.target;
featureId = target.parentNode && target != this.rendererRoot && featureId = target.parentNode && target != this.rendererRoot &&
target.parentNode._featureId; target.parentNode._featureId;
tests/Renderer/SVG.html
-16
View File
@@ -379,22 +379,6 @@
t.eq(string, "2,-4", "returned string is correct"); t.eq(string, "2,-4", "returned string is correct");
} }
function test_svg_getnodetype(t) {
if (!OpenLayers.Renderer.SVG.prototype.supported()) {
t.plan(0);
return;
}
t.plan(1);
var r = new OpenLayers.Renderer.SVG(document.body);
var g = {CLASS_NAME: "OpenLayers.Geometry.Point"}
var s = {graphicName: "square"};
t.eq(r.getNodeType(g, s), r.supportUse ? "use" : "svg", "Correct node type for well known symbols");
}
function test_svg_importsymbol(t) { function test_svg_importsymbol(t) {
if (!OpenLayers.Renderer.SVG.prototype.supported()) { if (!OpenLayers.Renderer.SVG.prototype.supported()) {
t.plan(0); t.plan(0);