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

130
examples/graphic-name.html
View File

@@ -1,91 +1,39 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Graphic Names</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"></script>
<script type="text/javascript">
// user custom graphicname
OpenLayers.Renderer.symbol.lightning = [0,0, 4,2, 6,0, 10,5, 6,3, 4,5, 0,0];
OpenLayers.Renderer.symbol.rectangle = [0,0, 4,0, 4,10, 0,10, 0,0];
var map;
function init() {
map = new OpenLayers.Map('map');
// list of well-known graphic names
var graphics = ["star", "cross", "x", "square", "triangle", "circle", "lightning", "rectangle"];
// Create one feature for each well known graphic.
// Give features a type attribute with the graphic name.
var num = graphics.length;
var slot = map.maxExtent.getWidth() / num;
var features = Array(num);
for(var i=0; i<graphics.length; ++i) {
lon = map.maxExtent.left + (i * slot) + (slot / 2);
features[i] = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(
map.maxExtent.left + (i * slot) + (slot / 2), 0
), {
type: graphics[i]
}
);
}
// Create a style map for painting the features.
// The graphicName property of the symbolizer is evaluated using
// 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>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers Graphic Names</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 src="./graphic-name.js" type="text/javascript"></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">
<p>
OpenLayers supports well-known names for a few graphics. You
can use the names &quot;star&quot;, &quot;cross&quot;,
&quot;x&quot;, &quot;square&quot;, &quot;triangle&quot;, and
&quot;circle&quot; as value for the graphicName property of a
symbolizer.
</p>
<p>
The named symbols &quot;lightning&quot;, &quot;rectangle&quot;
and &quot;church&quot; are user defined.
</p>
<p>
See <a href="./graphic-name.js">graphic-name.js</a>
for the source code of this example.
</p>
</div>
</body>
</html>

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

@@ -49,14 +49,6 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
*/
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
*
@@ -70,7 +62,6 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
OpenLayers.Renderer.Elements.prototype.initialize.apply(this,
arguments);
this.translationParameters = {x: 0, y: 0};
this.supportUse = (navigator.userAgent.toLowerCase().indexOf("applewebkit/5") == -1);
this.symbolMetrics = {};
},
@@ -215,7 +206,7 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
if (style.externalGraphic) {
nodeType = "image";
} else if (this.isComplexSymbol(style.graphicName)) {
nodeType = this.supportUse === false ? "svg" : "use";
nodeType = "svg";
} else {
nodeType = "circle";
}
@@ -306,17 +297,17 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
parent.removeChild(node);
}
if(this.supportUse === false) {
// workaround for webkit versions that cannot do defs/use
// (see https://bugs.webkit.org/show_bug.cgi?id=33322):
// copy the symbol instead of referencing it
var src = document.getElementById(id);
node.firstChild && node.removeChild(node.firstChild);
node.appendChild(src.firstChild.cloneNode(true));
node.setAttributeNS(null, "viewBox", src.getAttributeNS(null, "viewBox"));
} else {
node.setAttributeNS(this.xlinkns, "href", "#" + id);
}
// The more appropriate way to implement this would be use/defs,
// but due to various issues in several browsers, it is safer to
// copy the symbols instead of referencing them.
// See e.g. ticket http://trac.osgeo.org/openlayers/ticket/2985
// and this email thread
// http://osgeo-org.1803224.n2.nabble.com/Select-Control-Ctrl-click-on-Feature-with-a-graphicName-opens-new-browser-window-tc5846039.html
var src = document.getElementById(id);
node.firstChild && node.removeChild(node.firstChild);
node.appendChild(src.firstChild.cloneNode(true));
node.setAttributeNS(null, "viewBox", src.getAttributeNS(null, "viewBox"));
node.setAttributeNS(null, "width", size);
node.setAttributeNS(null, "height", size);
node.setAttributeNS(null, "x", pos.x - offset);
@@ -334,19 +325,15 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
}
var rotation = style.rotation;
if ((rotation !== undefined || node._rotation !== undefined) && pos) {
node._rotation = rotation;
rotation |= 0;
if(node.nodeName !== "svg") {
node.setAttributeNS(null, "transform",
"rotate(" + rotation + " " + pos.x + " " +
pos.y + ")");
} else {
var metrics = this.symbolMetrics[id];
node.firstChild.setAttributeNS(null, "transform",
"rotate(" + style.rotation + " " + metrics[1] +
" " + metrics[2] + ")");
}
var metrics = this.symbolMetrics[id];
node.firstChild.setAttributeNS(null, "transform", "rotate("
+ rotation + " "
+ metrics[1] + " "
+ metrics[2] + ")");
}
}
@@ -951,7 +938,7 @@ OpenLayers.Renderer.SVG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
*/
getFeatureIdFromEvent: function(evt) {
var featureId = OpenLayers.Renderer.Elements.prototype.getFeatureIdFromEvent.apply(this, arguments);
if(this.supportUse === false && !featureId) {
if(!featureId) {
var target = evt.target;
featureId = target.parentNode && target != this.rendererRoot &&
target.parentNode._featureId;

16
tests/Renderer/SVG.html
View File

@@ -378,22 +378,6 @@
var string = r.getShortString(point);
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) {
if (!OpenLayers.Renderer.SVG.prototype.supported()) {