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>