[OpenLayers-Dev] What if I extend the OpenLayers.Style class??
Tim Schaub
tschaub at opengeo.org
Wed Jan 21 04:58:58 EST 2009
Hey-
Milan Antonovic wrote:
> Thanks for your help,
> My idea was just to group many rule in a specialized class, so I don't
> need to put all the code in the initialization script of the map, but in
> a separate file.
>
Are you modifying each style instance?
If not, why not just have one?
Tim
> So in the initialization of the map I just write:
>
> var sRain = new OpenLayers.Style.Rain();
>
> var pioggia = new OpenLayers.Layer.PySOS(
> 'rain',
> SOS_url,
> {
> 'offering': 'weather',
> 'eventTime': sTime.toTimestamp(4)+'/'+eTime.toTimestamp(4),
> 'observedProperty': ['rain']
> },
> {
> eventTime: new Date(),
> formatOptions: {
> internalProjection: pro,
> externalProjection: dis
> },
> styleMap: new OpenLayers.StyleMap(sRain)
> }
> );
>
> Here is my OpenLayers.Style.Rain code:
>
> ******************************************************************************************
> ******************************************************************************************
>
> OpenLayers.Style.Rain = OpenLayers.Class(OpenLayers.Style,{
> sunny: "images/marker/sunny.png",
> cloudy: "images/marker/cloudy.png",
> rainy: "images/marker/rainy.png",
> none: "images/marker/none.png",
> graphicWidth: 40,
> graphicHeight: 40,
> graphicOpacity: 1,
> initialize: function() {
> this.rules = [];
> this.setDefaultStyle(OpenLayers.Feature.Vector.style["default"]);
>
> var noData = new OpenLayers.Rule(
> {
> filter: new OpenLayers.Filter.Logical(
> {
> type: OpenLayers.Filter.Logical.OR,
> filters: [
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.LESS_THAN,
> property: "eventTime",
> value: "beginPosition",
> binaryCompare: function(context,
> eventTime, beginPosition) {
> var et = new
> Date((context[eventTime]).getTime());
> var bp = new
> Date((context[beginPosition]).getTime());
> return et < bp;
> }
> }
> ),
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.GREATER_THAN,
> property: "eventTime",
> value: "endPosition",
> binaryCompare: function(context,
> eventTime, endPosition) {
> var et = new
> Date((context[eventTime]).getTime());
> var ep = new
> Date((context[endPosition]).getTime());
> return et > ep;
> }
> }
> )
> ]
> }
> ),
> symbolizer: {
> graphicWidth: 15,
> graphicHeight: 15,
> graphicOpacity: this.graphicOpacity,
> externalGraphic: this.none
> }
> }
> );
>
> var ruleSunny = new OpenLayers.Rule(
> {
> filter: new OpenLayers.Filter.Logical(
> {
> type: OpenLayers.Filter.Logical.AND,
> filters: [
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.EQUAL_TO,
> property: "sum",
> value: 0
> }
> ),
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.EQUAL_TO,
> property: "measure",
> value: "-"
> }
> )
> ]
> }
> ),
> symbolizer: {
> graphicWidth: this.graphicWidth,
> graphicHeight: this.graphicHeight,
> graphicOpacity: this.graphicOpacity,
> externalGraphic: this.sunny
> }
> }
> );
>
> var ruleSunny2 = new OpenLayers.Rule(
> {
> filter: new OpenLayers.Filter.Logical(
> {
> type: OpenLayers.Filter.Logical.AND,
> filters: [
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.EQUAL_TO,
> property: "sum",
> value: 0
> }
> ),
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.EQUAL_TO,
> property: "measure",
> value: 0
> }
> )
> ]
> }
> ),
> symbolizer: {
> graphicWidth: this.graphicWidth,
> graphicHeight: this.graphicHeight,
> graphicOpacity: this.graphicOpacity,
> externalGraphic: this.sunny
> }
> }
> );
>
> var ruleCloudy = new OpenLayers.Rule(
> {
> filter: new OpenLayers.Filter.Logical(
> {
> type: OpenLayers.Filter.Logical.AND,
> filters: [
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.GREATER_THAN,
> property: "sum",
> value: 0
> }
> ),
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.EQUAL_TO,
> property: "measure",
> value: 0
> }
> )
> ]
> }
> ),
> symbolizer: {
> graphicWidth: this.graphicWidth,
> graphicHeight: this.graphicHeight,
> graphicOpacity: this.graphicOpacity,
> externalGraphic: this.cloudy
> }
> }
> );
> var ruleCloudy2 = new OpenLayers.Rule(
> {
> filter: new OpenLayers.Filter.Logical(
> {
> type: OpenLayers.Filter.Logical.AND,
> filters: [
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.GREATER_THAN,
> property: "sum",
> value: 0
> }
> ),
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.EQUAL_TO,
> property: "measure",
> value: "-"
> }
> )
> ]
> }
> ),
> symbolizer: {
> graphicWidth: this.graphicWidth,
> graphicHeight: this.graphicHeight,
> graphicOpacity: this.graphicOpacity,
> externalGraphic: this.cloudy
> }
> }
> );
> var ruleRainy = new OpenLayers.Rule(
> {
> filter: new OpenLayers.Filter.Logical(
> {
> type: OpenLayers.Filter.Logical.AND,
> filters: [
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.GREATER_THAN,
> property: "sum",
> value: 0
> }
> ),
> new OpenLayers.Filter.Comparison(
> {
> type:
> OpenLayers.Filter.Comparison.GREATER_THAN,
> property: "measure",
> value: 0
> }
> )
> ]
> }
> ),
> symbolizer: {
> graphicWidth: this.graphicWidth,
> graphicHeight: this.graphicHeight,
> graphicOpacity: this.graphicOpacity,
> externalGraphic: this.rainy
> }
> }
> );
>
> this.addRules([ruleSunny,ruleSunny2,ruleCloudy,ruleCloudy2,ruleRainy,noData]);
> },
> CLASS_NAME: "OpenLayers.Style.Rain"
> });
>
> ******************************************************************************************
> ******************************************************************************************
>
>
>
>
> 2009/1/21 Tim Schaub <tschaub at opengeo.org <mailto:tschaub at opengeo.org>>
>
> Hey-
>
> bartvde at osgis.nl <mailto:bartvde at osgis.nl> wrote:
> > Hi,
> >
> > see also:
> >
> > http://trac.openlayers.org/ticket/1802
> >
> > Best regards,
> > Bart
> >
> >> Hi all,
> >> In my OL app, I needed to create some OpenLayers.Style class to
> group
> >> complex layer styling.
> >> I create some classes like OpenLayers.Style.Rain,
> >> OpenLayers.Style.Temperature to represent some
> >> weather icons depending on some feature's attribute values.
>
> Yes, you'll get good behavior with instanceof after r8445. However, I
> think you may be going about this the wrong way.
>
> You shouldn't need to extend the Style class. Instead you create a
> Style object with rules that determine the styling for your
> particular case.
>
> e.g. something like:
>
> var rainStyle = new OpenLayers.Style();
> rainStyle.addRules([
> new OpenLayers.Rule({
> filter: new OpenLayers.Filter.Comparison({
> type: OpenLayers.Filter.Comparison.EQUAL_TO,
> property: "rain"
> value: "lots"
> }),
> symbolizer: {
> externalGraphic: "wet.png"
> }
> })
> ]);
>
> You can also use the addUniqueValueRules convenience method on your
> StyleMap [1]. Or check out the other style examples for inspiration
> [2].
>
> Tim
>
> [1] http://openlayers.org/dev/examples/styles-unique.html
> [2] http://openlayers.org/dev/examples/?q=style
>
> >>
> >> But, I had an other problem, in the OpenLayers.StyleMap class
> passed to my
> >> weather layer.
> >> I found this code in the initialize function:
> >>
> >> *if(style instanceof OpenLayers.Style)*
> >>
> >> This code block my Rain or Temperature classes to go further.
> >>
> >> So I changed the code in something like:
> >>
> >> *if(style instanceof OpenLayers.Style ||
> >> (style.CLASS_NAME &&
> >> style.CLASS_NAME.indexOf("OpenLayers.Style")!=-1))*
> >>
> >> Does it make sense to you?
> >>
> >> Thanks
> >>
> >> Milan Antonovic
> >>
> >>
> >> Milan Antonovic
> >> Institute of Earth Sciences
> >> University of Applied Sciences of the South Switzerland - SUPSI
> >> Trevano, C.P. 72, CH-6952 Canobbio, SWITZERLAND
> >> Tel: +41(0)58 666 62 13
> >> E-mail: milan.antonovic at supsi.ch
> >> Web: http://www.ist.supsi.ch
> >> _______________________________________________
> >> Dev mailing list
> >> Dev at openlayers.org <mailto:Dev at openlayers.org>
> >> http://openlayers.org/mailman/listinfo/dev
> >>
> >
> >
> > _______________________________________________
> > Dev mailing list
> > Dev at openlayers.org <mailto:Dev at openlayers.org>
> > http://openlayers.org/mailman/listinfo/dev
>
>
> --
> Tim Schaub
> OpenGeo - http://opengeo.org
> Expert service straight from the developers.
> _______________________________________________
> Dev mailing list
> Dev at openlayers.org <mailto:Dev at openlayers.org>
> http://openlayers.org/mailman/listinfo/dev
>
>
--
Tim Schaub
OpenGeo - http://opengeo.org
Expert service straight from the developers.
More information about the Dev
mailing list