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

Update example to use expression parsing

Browse Source
This commit is contained in:
Tim Schaub
2013-06-26 17:51:02 -06:00
parent b7412552a5
commit aab5c8472c
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/kml-timezones.html
View File

@@ -39,7 +39,7 @@
<h4 id="title">Timezones in KML</h4> <h4 id="title">Timezones in KML</h4>
<p id="shortdesc">Demonstrates rendering timezones from KML.</p> <p id="shortdesc">Demonstrates rendering timezones from KML.</p>
<div id="docs"> <div id="docs">
<p>This example parses a KML file and renders the features as a vector layer. Note that currently the <code>kml:StyleMap</code> elements are not parsed, so the layer is given a <code>ol.style.Style</code> manually. The timezones are filled yellow with an opacity calculated based on the current offset to local noon.</p> <p>This example parses a KML file and renders the features as a vector layer. The layer is given a <code>ol.style.Style</code> that fills timezones yellow with an opacity calculated based on the current offset to local noon.</p>
<p>See the <a href="kml-timezones.js" target="_blank">kml-timezones.js source</a> to see how this is done.</p> <p>See the <a href="kml-timezones.js" target="_blank">kml-timezones.js source</a> to see how this is done.</p>
</div> </div>
<div id="tags">KML, vector, style</div> <div id="tags">KML, vector, style</div>

17
examples/kml-timezones.js
View File

@@ -1,7 +1,7 @@
goog.require('ol.Expression');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.RendererHint'); goog.require('ol.RendererHint');
goog.require('ol.View2D'); goog.require('ol.View2D');
goog.require('ol.expr');
goog.require('ol.layer.TileLayer'); goog.require('ol.layer.TileLayer');
goog.require('ol.layer.Vector'); goog.require('ol.layer.Vector');
goog.require('ol.parser.KML'); goog.require('ol.parser.KML');
@@ -12,8 +12,15 @@ goog.require('ol.style.Polygon');
goog.require('ol.style.Rule'); goog.require('ol.style.Rule');
goog.require('ol.style.Style'); goog.require('ol.style.Style');
// calculate opacity based on difference from local noon
function getOpacity(feature) { /**
* Register a function to be used in a symbolizer. Here we want the opacity
* of polygons to be based on the offset from local noon. For example, a
* timezone where it is currently noon would have an opacity of 1. And a
* timezone where it is currently 6:00am would have an opacity of 0.5.
*/
ol.expr.register('getOpacity', function() {
var feature = this;
var opacity = 0; var opacity = 0;
var name = feature.get('name'); // e.g. GMT -08:30 var name = feature.get('name'); // e.g. GMT -08:30
var match = name.match(/([-+]\d{2}):(\d{2})$/); var match = name.match(/([-+]\d{2}):(\d{2})$/);
@@ -31,7 +38,7 @@ function getOpacity(feature) {
opacity = 1 - offset / 12; opacity = 1 - offset / 12;
} }
return opacity; return opacity;
} });
var style = new ol.style.Style({rules: [ var style = new ol.style.Style({rules: [
new ol.style.Rule({ new ol.style.Rule({
@@ -39,7 +46,7 @@ var style = new ol.style.Style({rules: [
new ol.style.Polygon({ new ol.style.Polygon({
fillColor: '#ffff33', fillColor: '#ffff33',
strokeColor: '#ffffff', strokeColor: '#ffffff',
opacity: new ol.Expression('getOpacity(this)') opacity: ol.expr.parse('getOpacity()')
}) })
] ]
}) })