<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns="*"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:os="http://openscales.org"
creationComplete="initMap();">
<os:Map id="fxmap"
width="100%"
height="100%"
zoom="5"
centerLonLat="4.84479575848897,45.7531798723947">
<os:TraceInfo id="traceInfo"
x="{width-200}"
y="0"
visible="{displayTrace}"/>
<os:Mapnik name="Mapnik"
isBaseLayer="true"
proxy="http://openscales.org/proxy.php?url="/>
<os:WheelHandler/>
<os:Spinner id="spinner"
x="{width / 2}"
y="{height / 2}"/>
<os:MousePosition x="10"
y="{height-20}"
displayProjection="EPSG:4326"/>
<os:WFS id="ignGeoplaFrance"
name="IGN - Geopla (France)"
url="http://openscales.org/geoserver/wfs"
typename="pg:simplif_france"
projection="EPSG:2154"
version="1.0.0"
style="{this.createBitmapStyle()}"/>
<os:WFS id="ignGeoplaRegion"
name="IGN - Geopla (Region)"
url="http://openscales.org/geoserver/wfs"
typename="pg:simplif_dept"
projection="EPSG:2154"
version="1.0.0"
style="{this.createBitmapStyle()}"/>
<os:SelectFeaturesHandler id="selectFeatureHandler"
active="true"/>
</os:Map>
<os:ControlPanel x="10"
y="10"
width="140"
title="Navigation">
<os:PanComponent map="{map}"/>
<mx:HBox width="100%" paddingLeft="5" paddingRight="5">
<os:ZoomComponent map="{map}"/>
<mx:Spacer width="100%" />
<os:ZoomBoxComponent map="{map}"
width="32"
height="32"/>
</mx:HBox>
</os:ControlPanel>
<mx:Panel title="Legend"
id="legends"
layout="vertical"
bottom="0">
</mx:Panel>
<mx:Panel title="featureInfos"
bottom="0"
right="0">
<os:FeatureInfoComponent id="featureInfoComponent"
creationComplete="(selectFeatureHandler.handler as SelectFeaturesHandler).onSelectedFeature = featureInfoComponent.showInfo"/>
</mx:Panel>
<mx:Button id="switchStyleButton"
label="Switch style"
x="{width-switchStyleButton.width-10}"
y="10"
click="switchStyle();"/>
<mx:Script>
<![CDATA[
import mx.containers.VBox;
import org.openscales.core.filter.ContainsFilter;
import org.openscales.core.filter.ElseFilter;
import org.openscales.core.filter.IntersectsFilter;
import styleexample.CentroidYFilter;
import org.openscales.core.style.stroke.Stroke;
import org.openscales.core.style.fill.SolidFill;
import org.openscales.core.style.fill.BitmapFill;
import org.openscales.core.style.symbolizer.PolygonSymbolizer;
import org.openscales.core.style.symbolizer.Symbolizer;
import org.openscales.core.handler.feature.SelectFeaturesHandler;
import mx.core.UIComponent;
import org.openscales.core.style.Rule;
import mx.controls.Label;
import mx.containers.HBox;
import org.openscales.core.Map;
import org.openscales.core.Trace;
import org.openscales.core.style.Style;
import org.openscales.core.basetypes.Bounds;
[Bindable] private var map:Map = null;
[Bindable] public var displayTrace:Boolean = false;
[Bindable] public var displayFirebugTrace:Boolean = false;
[Bindable]
private var styles:Array = [];
[Bindable]
[Embed(source='/assets/images/pattern.png')]
private var Pattern:Class;
private function initMap():void {
Trace.useFireBugConsole = displayFirebugTrace;
map = fxmap.map;
this.createStyleLatitude();
this.generateLegend();
}
private function generateLegend():void {
this.legends.removeAllChildren();
for each (var style:Style in this.styles) {
var vb:VBox = new VBox();
var label:Label = new Label();
label.text = style.name;
label.setStyle("fontWeight", "bold");
vb.addChild(label);
var legendType:String;
switch (style.name) {
case "Default circle style":
case "Default point style": {
legendType = Rule.LEGEND_POINT;
break;
}
case "Draw linear style":
case "Default line style": {
legendType = Rule.LEGEND_LINE;
break;
}
default: {
legendType = Rule.LEGENT_POLYGON;
}
}
for each (var rule:Rule in style.rules) {
var hb:HBox = new HBox();
hb.setStyle("verticalAlign", "middle");
var leg:UIComponent = new UIComponent();
leg.height = 30;
leg.width = 30;
leg.addChild(rule.getLegendGraphic(legendType));
hb.addChild(leg);
var ruleLabel:Label = new Label();
ruleLabel.text = rule.name;
hb.addChild(ruleLabel);
vb.addChild(hb);
}
this.legends.addChild(vb);
}
}
private function switchStyle():void {
var currentStyleName:String = "";
if (this.styles.length > 1) {
currentStyleName = (this.styles[1] as Style).name;
this.styles.splice(1, this.styles.length);
}
switch (currentStyleName) {
case "Latitude related coloration":
Trace.info("Use the 'Geographical coloration' style");
this.createStyleGeographical();
break;
case "Geographical coloration":
Trace.info("Use the 'Latitude related coloration' style");
this.createStyleLatitude();
break;
default:
Trace.warning("Error in the style's names used => use the 'Latitude related coloration' style");
this.createStyleLatitude();
}
this.generateLegend();
}
private function createStyleLatitude():void {
var style:Style = new Style();
style.name = "Latitude related coloration";
var fill:SolidFill, stroke:Stroke, symbolizer:Symbolizer, rule:Rule;
rule = new Rule();
rule.name = "Centroid Y-coordinate in [70000;75000]";
fill = new SolidFill(0x176273, .8);
stroke = new Stroke(0x0A2C33, 2);
symbolizer = new PolygonSymbolizer(fill, stroke);
rule.symbolizers.push(symbolizer);
rule.filter = new CentroidYFilter(70000, 75000);
style.rules.push(rule);
rule = new Rule();
rule.name = "Centroid Y-coordinate in [65000;70000]";
fill = new SolidFill(0xD8F20F, .8);
stroke = new Stroke(0x2D3303, 2);
symbolizer = new PolygonSymbolizer(fill, stroke);
rule.symbolizers.push(symbolizer);
rule.filter = new CentroidYFilter(65000, 70000);
style.rules.push(rule);
rule = new Rule();
rule.name = "Centroid Y-coordinate out of previous ranges";
fill = new SolidFill(0x84BF7A, .8);
stroke = new Stroke(0x233321, 2);
symbolizer = new PolygonSymbolizer(fill, stroke);
rule.symbolizers.push(symbolizer);
rule.filter = new ElseFilter();
style.rules.push(rule);
this.styles.push(style);
this.ignGeoplaRegion.style = style;
this.ignGeoplaRegion.layer.redraw();
}
private function createStyleGeographical():void {
var style:Style = new Style();
style.name = "Geographical coloration";
var fill:SolidFill, stroke:Stroke, symbolizer:Symbolizer, rule:Rule;
var bounds:Bounds;
rule = new Rule();
rule.name = "Departements of Bourgogne";
fill = new SolidFill(0x176273, .8);
stroke = new Stroke(0x0A2C33, 2);
symbolizer = new PolygonSymbolizer(fill, stroke);
rule.symbolizers.push(symbolizer);
bounds = new Bounds(682105, 6558859, 892780, 6816381);
rule.filter = new ContainsFilter(bounds.toGeometry(), "EPSG:2154");
style.rules.push(rule);
rule = new Rule();
rule.name = "Other departements of France";
fill = new SolidFill(0x84BF7A, .8);
stroke = new Stroke(0x233321, 2);
symbolizer = new PolygonSymbolizer(fill, stroke);
rule.symbolizers.push(symbolizer);
rule.filter = new ElseFilter();
style.rules.push(rule);
this.styles.push(style);
this.ignGeoplaRegion.style = style;
this.ignGeoplaRegion.layer.redraw();
}
private function createBitmapStyle():Style {
var style:Style = new Style();
style.name = "France";
var fill:BitmapFill, stroke:Stroke, symbolizer:Symbolizer, rule:Rule;
var bounds:Bounds;
rule = new Rule();
rule.name = "France";
fill = new BitmapFill((new Pattern().bitmapData as BitmapData));
stroke = new Stroke(0xECF2BA, 6);
symbolizer = new PolygonSymbolizer(fill, stroke);
rule.symbolizers.push(symbolizer);
style.rules.push(rule);
this.styles[0] = style;
return style;
}
private function mouseOverDepartement(evt:MouseEvent):void {
}
]]>
</mx:Script>
</mx:Canvas>