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

Adding example for rule based styling

Browse Source 
For the first time in the history of OpenLayers, we can render
features with multiple symbolizers now, which is also shown in
this new example.
This commit is contained in:
ahocevar
2013-03-03 17:00:20 +01:00
parent d3c4869917
commit d4ecf53801
2 changed files with 149 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
examples/style-rules.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
html, body, #map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#text {
position: absolute;
top: 8px;
right: 8px;
z-index: 20000;
background-color: white;
padding: 0 0.5em 0.5em 0.5em;
border-radius: 4px;
}
@media only screen and (max-width: 600px) {
#text {
display: none;
}
}
</style>
<title>Vector Layer Example</title>
</head>
<body>
<div id="map">
<div id="text">
<h1 id="title">Style rules example</h1>
<div id="shortdesc">Draws features with rule based styles.</div>
<div id="docs">
<p>See the
<a href="style-rules.js" target="_blank">style-rules.js source</a>
to see how this is done.</p>
</div>
</div>
</div>
<div id="tags">vector, feature, canvas</div>
<script src="loader.js?id=style-rules" type="text/javascript"></script>
</body>
</html>

102
examples/style-rules.js Normal file
View File

@@ -0,0 +1,102 @@
goog.require('ol.Collection');
goog.require('ol.Coordinate');
goog.require('ol.Expression');
goog.require('ol.Feature');
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
goog.require('ol.filter.Filter');
goog.require('ol.geom.LineString');
goog.require('ol.layer.Vector');
goog.require('ol.projection');
goog.require('ol.source.Vector');
goog.require('ol.style.Line');
goog.require('ol.style.Rule');
goog.require('ol.style.Style');
var source = new ol.source.Vector({
projection: ol.projection.getFromCode('EPSG:3857')
});
source.addFeatures([
new ol.Feature({
g: new ol.geom.LineString([[-10000000, -10000000], [10000000, 10000000]]),
'color': '#BADA55',
'where': 'inner'
}),
new ol.Feature({
g: new ol.geom.LineString([[-10000000, 10000000], [10000000, -10000000]]),
'color': '#BADA55',
'where': 'inner'
}),
new ol.Feature({
g: new ol.geom.LineString([[-10000000, -10000000], [-10000000, 10000000]]),
'color': '#013',
'where': 'outer'
}),
new ol.Feature({
g: new ol.geom.LineString([[-10000000, 10000000], [10000000, 10000000]]),
'color': '#013',
'where': 'outer'
}),
new ol.Feature({
g: new ol.geom.LineString([[10000000, 10000000], [10000000, -10000000]]),
'color': '#013',
'where': 'outer'
}),
new ol.Feature({
g: new ol.geom.LineString([[10000000, -10000000], [-10000000, -10000000]]),
'color': '#013',
'where': 'outer'
})
]);
var style = new ol.style.Style({
rules: [
new ol.style.Rule({
filter: new ol.filter.Filter(function(feature) {
return feature.get('where') == 'outer';
}),
symbolizers: [
new ol.style.Line({
strokeStyle: new ol.Expression('color'),
strokeWidth: 4,
opacity: 1
})
]
}),
new ol.style.Rule({
filter: new ol.filter.Filter(function(feature) {
return feature.get('where') == 'inner';
}),
symbolizers: [
new ol.style.Line({
strokeStyle: '#013',
strokeWidth: 4,
opacity: 1
}),
new ol.style.Line({
strokeStyle: new ol.Expression('color'),
strokeWidth: 2,
opacity: 1
})
]
})
]
});
var vector = new ol.layer.Vector({
source: source,
style: style
});
var map = new ol.Map({
layers: new ol.Collection([vector]),
renderer: ol.RendererHint.CANVAS,
target: 'map',
view: new ol.View2D({
center: new ol.Coordinate(0, 0),
zoom: 2
})
});