Adding an args argument to OpenLayers.String.format. This lets you set context properties as functions that will be executed with the given arguments where tokens match. For styles, this means you can specify a context that contains functions that return some value based on the feature being styled. See the styles-context.html example for use. r=ahocevar (closes #1434)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@6512 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
216
examples/styles-context.html
Normal file
216
examples/styles-context.html
Normal file
@@ -0,0 +1,216 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Vector Styles</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map;
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map', {maxResolution:'auto'});
|
||||
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
|
||||
map.addLayer(wms);
|
||||
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
|
||||
|
||||
// Strategy 1: Style features based on some attribute.
|
||||
|
||||
// create 50 random features in the northern hemisphere
|
||||
// give them a "type" attribute that will be used to style
|
||||
// them by size
|
||||
var features = new Array(50);
|
||||
for (var i=0; i<features.length; i++) {
|
||||
features[i] = new OpenLayers.Feature.Vector(
|
||||
new OpenLayers.Geometry.Point(
|
||||
(360 * Math.random()) - 180, 90 * Math.random()
|
||||
), {
|
||||
type: 5 + parseInt(5 * Math.random())
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// create the layer styleMap with a simple symbolizer template
|
||||
var layer1 = new OpenLayers.Layer.Vector('Points', {
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
pointRadius: "${type}", // based on feature.attributes.type
|
||||
fillColor: "#666666"
|
||||
})
|
||||
});
|
||||
layer1.addFeatures(features);
|
||||
|
||||
// Strategy 2: Style features based on something besides attributes.
|
||||
|
||||
// create 50 random features in the southern hemisphere
|
||||
var features = new Array(50);
|
||||
for (var i=0; i<features.length; i++) {
|
||||
features[i] = new OpenLayers.Feature.Vector(
|
||||
new OpenLayers.Geometry.Point(
|
||||
(360 * Math.random()) - 180, -90 * Math.random()
|
||||
), {
|
||||
type: 5 + parseInt(5 * Math.random())
|
||||
}
|
||||
);
|
||||
}
|
||||
// create the layer styleMap by giving the default style a context
|
||||
var colors = ["red", "green", "blue"];
|
||||
var context = {
|
||||
getColor: function(feature) {
|
||||
var region = parseInt((feature.geometry.x + 180) / 120);
|
||||
return colors[region];
|
||||
},
|
||||
getType: function(feature) {
|
||||
return feature.attributes["type"];
|
||||
}
|
||||
};
|
||||
var template = {
|
||||
pointRadius: "${getType}", // using context.getType(feature)
|
||||
fillColor: "${getColor}" // using context.getColor(feature)
|
||||
};
|
||||
var style = new OpenLayers.Style(template, {context: context});
|
||||
var layer2 = new OpenLayers.Layer.Vector('Points', {
|
||||
styleMap: new OpenLayers.StyleMap(style)
|
||||
});
|
||||
layer2.addFeatures(features);
|
||||
|
||||
|
||||
map.addLayers([layer1, layer2]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Feature Styles Example</h1>
|
||||
|
||||
<div id="tags"></div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Shows how to create a feature styles.
|
||||
</p>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>Features in the northern hemisphere are styled according to their
|
||||
"type" attribute. This is accomplished with a simple template that
|
||||
is evaluated with the feature attributes as context.</p>
|
||||
<p>Features in the sourthern hemisphere are styled according to a
|
||||
combination of their attributes and non-attribute properties. This
|
||||
is accomplished using an advanced template that calls functions
|
||||
on the context object passed to the Style constructor.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Vector Styles</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map;
|
||||
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map', {maxResolution:'auto'});
|
||||
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
|
||||
map.addLayer(wms);
|
||||
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
|
||||
|
||||
// Strategy 1: Style features based on some attribute.
|
||||
|
||||
// create 50 random features in the northern hemisphere
|
||||
// give them a "type" attribute that will be used to style
|
||||
// them by size
|
||||
var features = new Array(50);
|
||||
for (var i=0; i<features.length; i++) {
|
||||
features[i] = new OpenLayers.Feature.Vector(
|
||||
new OpenLayers.Geometry.Point(
|
||||
(360 * Math.random()) - 180, 90 * Math.random()
|
||||
), {
|
||||
type: 5 + parseInt(5 * Math.random())
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// create the layer styleMap with a simple symbolizer template
|
||||
var layer1 = new OpenLayers.Layer.Vector('Points', {
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
pointRadius: "${type}", // based on feature.attributes.type
|
||||
fillColor: "#666666"
|
||||
})
|
||||
});
|
||||
layer1.addFeatures(features);
|
||||
|
||||
// Strategy 2: Style features based on something besides attributes.
|
||||
|
||||
// create 50 random features in the southern hemisphere
|
||||
var features = new Array(50);
|
||||
for (var i=0; i<features.length; i++) {
|
||||
features[i] = new OpenLayers.Feature.Vector(
|
||||
new OpenLayers.Geometry.Point(
|
||||
(360 * Math.random()) - 180, -90 * Math.random()
|
||||
), {
|
||||
type: 5 + parseInt(5 * Math.random())
|
||||
}
|
||||
);
|
||||
}
|
||||
// create the layer styleMap by giving the default style a context
|
||||
var colors = ["red", "green", "blue"];
|
||||
var context = {
|
||||
getColor: function(feature) {
|
||||
var region = parseInt((feature.geometry.x + 180) / 120);
|
||||
return colors[region];
|
||||
},
|
||||
getType: function(feature) {
|
||||
return feature.attributes["type"];
|
||||
}
|
||||
};
|
||||
var template = {
|
||||
pointRadius: "${getType}", // using context.getType(feature)
|
||||
fillColor: "${getColor}" // using context.getColor(feature)
|
||||
};
|
||||
var style = new OpenLayers.Style(template, {context: context});
|
||||
var layer2 = new OpenLayers.Layer.Vector('Points', {
|
||||
styleMap: new OpenLayers.StyleMap(style)
|
||||
});
|
||||
layer2.addFeatures(features);
|
||||
|
||||
|
||||
map.addLayers([layer1, layer2]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Feature Styles Example</h1>
|
||||
|
||||
<div id="tags"></div>
|
||||
|
||||
<p id="shortdesc">
|
||||
Shows how to create a feature styles.
|
||||
</p>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>Features in the northern hemisphere are styled according to their
|
||||
"type" attribute. This is accomplished with a simple template that
|
||||
is evaluated with the feature attributes as context.</p>
|
||||
<p>Features in the sourthern hemisphere are styled according to a
|
||||
combination of their attributes and non-attribute properties. This
|
||||
is accomplished using an advanced template that calls functions
|
||||
on the context object passed to the Style constructor.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user