added new graphicName symbolizer property, which allows to render well-known graphic symbols named "square", "cross", "x" and "triangle", in addition to the existing "circle". Thanks Tim for the tweaks and the example. r=tschaub,elemoine (closes #1398)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@7634 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
83
examples/graphic-name.html
Normal file
83
examples/graphic-name.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<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">
|
||||
var map;
|
||||
|
||||
function init() {
|
||||
map = new OpenLayers.Map('map');
|
||||
|
||||
// list of well-known graphic names
|
||||
var graphics = ["star", "cross", "x", "square", "triangle", "circle"];
|
||||
|
||||
// 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
|
||||
}
|
||||
});
|
||||
|
||||
// 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"></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>
|
||||
@@ -23,4 +23,18 @@
|
||||
<topp:POP_CLASS>100,000 to 250,000</topp:POP_CLASS>
|
||||
</topp:tasmania_cities>
|
||||
</gml:featureMember>
|
||||
<gml:featureMember>
|
||||
<topp:tasmania_cities fid="tasmania_cities.2">
|
||||
<topp:the_geom>
|
||||
<gml:MultiPoint srsName="http://www.opengis.net/gml/srs/epsg.xml#4326">
|
||||
<gml:pointMember>
|
||||
<gml:Point>
|
||||
<gml:coordinates xmlns:gml="http://www.opengis.net/gml" decimal="." cs="," ts=" ">147,-41.1</gml:coordinates>
|
||||
</gml:Point>
|
||||
</gml:pointMember>
|
||||
</gml:MultiPoint>
|
||||
</topp:the_geom>
|
||||
<topp:CNTRY_NAME>Australia</topp:CNTRY_NAME>
|
||||
</topp:tasmania_cities>
|
||||
</gml:featureMember>
|
||||
</wfs:FeatureCollection>
|
||||
|
||||
@@ -528,13 +528,27 @@
|
||||
<sld:IsDefault>1</sld:IsDefault>
|
||||
<sld:FeatureTypeStyle>
|
||||
<sld:Rule>
|
||||
<ogc:Filter>
|
||||
<ogc:FeatureId fid="tasmania_cities.1"/>
|
||||
</ogc:Filter>
|
||||
<sld:PointSymbolizer>
|
||||
<sld:Graphic>
|
||||
<sld:ExternalGraphic>
|
||||
<sld:OnlineResource xlink:href="../img/marker.png" />
|
||||
<sld:Format>image/png</sld:Format>
|
||||
</sld:ExternalGraphic>
|
||||
<sld:Opacity>0.5</sld:Opacity>
|
||||
<sld:Opacity>0.7</sld:Opacity>
|
||||
<sld:Size>14</sld:Size>
|
||||
</sld:Graphic>
|
||||
</sld:PointSymbolizer>
|
||||
</sld:Rule>
|
||||
<sld:Rule>
|
||||
<sld:ElseFilter/>
|
||||
<sld:PointSymbolizer>
|
||||
<sld:Graphic>
|
||||
<sld:Mark>
|
||||
<sld:WellKnownName>cross</sld:WellKnownName>
|
||||
</sld:Mark>
|
||||
<sld:Size>10</sld:Size>
|
||||
</sld:Graphic>
|
||||
</sld:PointSymbolizer>
|
||||
|
||||
@@ -26,6 +26,11 @@
|
||||
var style_blue = OpenLayers.Util.extend({}, layer_style);
|
||||
style_blue.strokeColor = "blue";
|
||||
style_blue.fillColor = "blue";
|
||||
style_blue.graphicName = "star";
|
||||
style_blue.pointRadius = 10;
|
||||
style_blue.strokeWidth = 3;
|
||||
style_blue.rotation = 45;
|
||||
style_blue.strokeLinecap = "butt";
|
||||
|
||||
/*
|
||||
* Green style
|
||||
|
||||
Reference in New Issue
Block a user