[OpenLayers-Dev] What if I extend the OpenLayers.Style class??
Tim Schaub
tschaub at opengeo.org
Wed Jan 21 12:04:34 EST 2009
Hey-
Milan Antonovic wrote:
> Ciao
>
> 2009/1/21 Tim Schaub <tschaub at opengeo.org <mailto:tschaub at opengeo.org>>
>
> Hey-
>
> Are you modifying each style instance?
>
> If not, why not just have one?
>
> Tim
>
>
> I modify each instance, because I need Styling for different data layer.
>
> Some of my Style instance are:
> - Rain
> - Temeperature
> - Humidity
> - Wind
> - SunRadiation
> - RiverCapacity
>
Right, it makes good sense to have multiple instances of
OpenLayers.Style (rain, temperature, humidity, wind, sunRadiation,
riverCapacity, etc. would be style objects).
It still seems to me like you don't need to have multiple unique
instances of OpenLayers.Style.Rain for example. If multiple layers
share the same style, they can all use the same style object.
I assume I'm not communicating something clearly, so I'll drop this.
Tim
> etc..
>
> my rgds
>
>
> 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.
> >
> > 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> <mailto:tschaub at opengeo.org
> <mailto:tschaub at opengeo.org>>>
> >
> > Hey-
> >
> > bartvde at osgis.nl <mailto:bartvde at osgis.nl>
> <mailto: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>
> <mailto: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>
> <mailto: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>
> <mailto: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