OpenLayers源码学习笔记--- OpenLayers中样式相关

          Style样式这块其实在整个Openlayers中不算什么特别大重点，但是作为显示的一个元素，这里相关的内容特比多，经常看到有同事因为用错这块导致的各种问题。所以也就整理了下...

一、相关模块功能类比较多，这里先介绍下各个关键类在这个样式渲染环节中的作用和功能：

 

      Symbolizer  样式，记录样式信息的Object。特点：样式只针对具体的点、线、面等对象（点对象所需的样式和面对像所需的样式可能不同，查看其API，集合用户对象可以知道需要设置怎样的样式属性来控制对象显示）。一般不需要用户构建，而是由Style创建出来，内部在使用的时候通过css或者canvas的画笔控制来显示不同效果。

 

      Style   样式类，定义某种状态的完全样式，点线面等全部包括在内。内含defaultStyle属性记录所设置的样式（属性-值）集合对象Object。提供了createSymbolizer方法来为具体的点、线等对象提供Symbolizer样式。

      关于 style中对rule属性的使用控制…产看下面的设计代码分析内容

 

       StyleMap: 图层样式，定义多种状态下的图层样式，其属性styles中存储由key(‘state’), value(‘Style’) 组成的状态-样式键值对构成。  StyleMap信息被赋予到使用样式显示的Vector图层，默认支持四种样式，下面是OP中StyleMap样式的初始状态

Stylemap.styles = {

 

            "default": new OpenLayers.Style(

 

                OpenLayers.Feature.Vector.style["default"]),

 

            "select": new OpenLayers.Style(

 

                OpenLayers.Feature.Vector.style["select"]),

 

            "temporary": new OpenLayers.Style(

 

                OpenLayers.Feature.Vector.style["temporary"]),

 

            "delete": new OpenLayers.Style(

 

                OpenLayers.Feature.Vector.style["delete"])

 

}

         使用的过程中，vector根据不同状态获取不同样式，然后将使用对应的样式显示feature对象。

 

        OpenLayer.Layer.Vector  矢量图层，是最终的显示承载对象，根据和map，控件的交互，可以获取，设置当前feature的状态，然后从stylemap中读取样式，应用到具体的feature显示上。

 

       OpenLayer.Feature.Vector  矢量对象，要显示的基本对象，记录几何信息geometry等，默认使用的时候会应用图层样式，如果对feature单独设置样式，则不管什么都以设置的样式作为显示依据，而不去管图层样式怎么设置

 

 

       Renderer  使用样式和几何对象属性等来展示Feature要素的最终工具，根据不同浏览器和支持情况选用不同的渲染工具，支持的VML，SVG，Canvas。

 

       Rule：规则定义，通过定义规则来指定不同情况下的样式属性值，来决定最终样式采用的显示属性（定义规则..）

 

       Filter： Rule规则定义的具体规则都是由Filter来实现和完成的的，规则的具体定义和执行者……

 

       Context：我们知道Style上的${XXX}取值方法，通过XXX命名的属性可以动态设置属性的值作为样式的备选值（参加下面的示例1）

       Context提供了另外一种更为直接的方法，XXX不指定属性名，而直接指定对应的方法，在方法内部完成由属性值–>样式属性的转换。使用方式类似，相比之下Context更为直接，直接使用方法，接受feature作为参数，内部通过复杂的逻辑处理来获取最终结果，因此提供了更为灵活和多边的样式设置方式。Context可以提供比直接取值更大的操作变化。下面给出两个示例（都是从OpenLayers的examples中直接借过来的说..完成示例可以查看OpenLayers/examples/styles_context.html     OpenLayers/examples/styles_map.html）

     示例一：使用${XXX}，xxx代表属性名

//feature添加type属性

             var features = new Array(50);

             for (var i=0; i<features.length; i++) {

                features[i] = new OpenLayers.Feature.Vector(

                    new OpenLayers.Geometry.Point(

                        (360 * Math.random()) - 180, (180 * Math.random()) - 90

                    ), {

                        type: 5 + parseInt(5 * Math.random())

                    }

                );

            }

           //设置${}取值，使用type的值来设置点对象半径

 

          var myStyles = new OpenLayers.StyleMap({

                "default": new OpenLayers.Style({

                    pointRadius: "${type}", // 通过属性名取值，作为样式的值

                    fillColor: "#ffcc66",

                    strokeColor: "#ff9933",

                    strokeWidth: 2,

                    graphicZIndex: 1

                }),

                "select": new OpenLayers.Style({

                    fillColor: "#66ccff",

                    strokeColor: "#3399ff",

                    graphicZIndex: 2

                })

            });

示例二：使用${XXX},XXX代表调用方法

var features = new Array(50);

            for (var i=0; i<features.length; i++) {

                features[i] = new OpenLayers.Feature.Vector(

                    new OpenLayers.Geometry.Point(

                        (360 * Math.random()) - 180, -90 * Math.random()

                    ), {

                        type: 5 + parseInt(5 * Math.random())

                    }

                );

            }

            // 定义context，主要是定义根据属性获取样式值的方法create the layer styleMap by giving the default style a context

            var colors = ["red", "green", "blue"];

            var context = {

                getColor: function(feature) {

                    var region = parseInt((feature.geometry.x + 180) / 120);

                    return colors[region];

                },

                getSize: function(feature) {

                    return feature.attributes["type"] / map.getResolution() * .703125;

                }

            };

           //使用方法，设置样式..

           var template = {

                pointRadius: "${getSize}", // using context.getSize(feature)

                fillColor: "${getColor}" // using context.getColor(feature)

            };

            //生成样式并最终使用样式

            var style = new OpenLayers.Style(template, {context: context});

            var layer2 = new OpenLayers.Layer.Vector('Points', {

                styleMap: new OpenLayers.StyleMap(style),

                renderers: renderer

            });

二、样式的使用。我们所使用的样式中一般有两个样式的最终源头（即用户可以设置修改样式的方法）

         1、  设置layer.vector的style（Object对象）或者styleMap（key: Style对象）样式。style直接使用，styleMap用来根据featur的几何对象和状态来设置对应的样式，这个环节中使用了对规则rule和context的相关使用，后面专门介绍。

         2、  直接设置feature的样式Style。Object类型

        使用优先级比较  feature.style  >  layer.style   > layer.StyleMap

        前两个都是简单的Object对象，意味着用户知道具体的feature类型是点还是线面，知道需要设置哪些样式才有效，然后设置固定样式，所以针对性好，但是不具备状态属性和，也不存在对rule和context使用时候的灵活性。。。。关于这块的区别在下面的分析中会看的更清楚些

三、最后来说明下最标准完备的StyleMap，Style，Rule，Context，Symbolizer，Vector，Renderer的关系。。（相互之间调用和生成的顺序关系），我们假设设置StyleMap:

1. 关于StyleMap的初始化，这里贴出StyleMap的构造函数源码说明：

   initialize: function (style, options) {

           this.styles = {

               "default": new OpenLayers.Style(

                   OpenLayers.Feature.Vector.style["default"]),

               "select": new OpenLayers.Style(

                   OpenLayers.Feature.Vector.style["select"]),

               "temporary": new OpenLayers.Style(

                   OpenLayers.Feature.Vector.style["temporary"]),

               "delete": new OpenLayers.Style(

                   OpenLayers.Feature.Vector.style["delete"])

           };

            

           // take whatever the user passed as style parameter and convert it

           // into parts of stylemap.

           if(style instanceof OpenLayers.Style) {

               // user passed a style object

               this.styles["default"] = style;

               this.styles["select"] = style;

               this.styles["temporary"] = style;

               this.styles["delete"] = style;

           } else if(typeof style == "object") {

               for(var key in style) {

                   if(style[key] instanceof OpenLayers.Style) {

                       // user passed a hash of style objects

                       this.styles[key] = style[key];

                   } else if(typeof style[key] == "object") {

                       // user passsed a hash of style hashes

                       this.styles[key] = new OpenLayers.Style(style[key]);

                   } else {

                       // user passed a style hash (i.e. symbolizer)

                       this.styles["default"] = new OpenLayers.Style(style);

                       this.styles["select"] = new OpenLayers.Style(style);

                       this.styles["temporary"] = new OpenLayers.Style(style);

                       this.styles["delete"] = new OpenLayers.Style(style);

                       break;

                   }

               }

           }

           OpenLayers.Util.extend(this, options);

       },

   代码分析，其设计基本如下：第一步默认读取vector中定义的样式来完成初始化。。第二步通过样式参数来设置具体的用户样式，

   分多种情况对象：

   1)         独立的样式对象Style，将四种状态样式都设置为此，即相当于没有状态区别

   2)         样式组成的键值对key：Style（或者Object），读取提供的样式，覆盖默认值，如果后面的值不是Style对象，内部做封装后设置

   3)         只是一个Object对象，直接封装成Style样式，然后同1）

2. 关于StyleMap—>style—>Symbolizer的转换过程，中间使用到的Rule，filter，context，等：
   

   1)       矢量图层使用StyleMap的createSymbolizer: function(feature, intent)方法来获取一个Symbolizer对象。

             参数： feature  具体的矢量元素，包含几何信息，attribute等

             Intent： 记录feature的当前状态，”default”或者”select”….

   2)       查看StyleMap的源码会发现在其CreateSymbolizer中最终是通过调用Style的CreateSymbolizer方法来获取的样式结果的。源码如下：

             this.styles[intent].createSymbolizer(feature)

   3)       Style的CreateSymbolizer方法分解：

            A、关于context的使用：
   

              通过方法调用createLiterals ---> createLiteral，最终由OpenLayers.String.format 来完成对属性值标记${property} 到样式值的转换

   OpenLayers.Style.createLiteral = function(value, context, feature, property) {

       if (typeof value == "string" && value.indexOf("${") != -1) {

           value = OpenLayers.String.format(value, context, [feature, property]);

           value = (isNaN(value) || !value) ? value : parseFloat(value);

       }

       return value;

   };

       return value;

   } ;

       B、关于Rule的使用

                 同样在createSymbolizer方法中

                 a)         通过调用rule的evaluate方法来判断是否对当前Feature应用规则，其中rule的evaluate方法调用的是具体Filter中的同名方法实现

                 b)         如果使用规则，则调用applySymbolizer(rule, style, feature)来实现对规则中定义的样式添加到返回样式结果中。

                 c)         多个规则多次应用。

   举例说明：如果针对feature的属性foo来设置，当foo的值小于25的时候我们使用蓝色图片，但其位于25和50之间，使用绿色图片，位于50和75之间使用使用金色图片，其他else的情况下使用默认图片。那么我们则需要根据不同条件定义不同的规则，需要4个rule对象，rules数组的定义如下：（代码来自OpenLayers/examples/style_rule.js）,可运行对应的案例查看结果（完成示例参考OpenLayers/examples/style-rules.html）

   rules: [

                   new OpenLayers.Rule({

                       // a rule contains an optional filter

                       filter: new OpenLayers.Filter.Comparison({

                           type: OpenLayers.Filter.Comparison.LESS_THAN,

                           property: "foo", // the "foo" feature attribute

                           value: 25

                       }),

                       // if a feature matches the above filter, use this symbolizer

                       symbolizer: {

                           externalGraphic: "../img/marker-blue.png"

                       }

                   }),

                   new OpenLayers.Rule({

                       filter: new OpenLayers.Filter.Comparison({

                           type: OpenLayers.Filter.Comparison.BETWEEN,

                           property: "foo",

                           lowerBoundary: 25,

                           upperBoundary: 50

                       }),

                       symbolizer: {

                           externalGraphic: "../img/marker-green.png"

                       }

                   }),

                   new OpenLayers.Rule({

                       filter: new OpenLayers.Filter.Comparison({

                           type: OpenLayers.Filter.Comparison.BETWEEN,

                           property: "foo",

                           lowerBoundary: 50,

                           upperBoundary: 75

                       }),

                       symbolizer: {

                           externalGraphic: "../img/marker-gold.png"

                       }

                   }),

                   new OpenLayers.Rule({

                       // apply this rule if no others apply

                       elseFilter: true,

                       symbolizer: {

                           externalGraphic: "../img/marker.png"

                       }

                   })

               ]
3.    关于addUniqueValueRules方法，该方法可以视为是通过Rule和Context的特殊情况，等值判断Filter来实现的一个特例.(其内部具体实现过程和使用方式有所不同，参考openlayers/examples/styles-unique.html示例。，但是总觉没那么多必要专门弄个这么接口，想了解的话可以查看Openlayer/examples/styles-unique.html)
   
   总结： Style提供了方便灵活地使用方式，但是也给用户当使用带来了一定的不便，初学者会被这些复杂的使用结构搞混，以至于不知道如何具体使用。感觉这块提供的方式过于灵活了，不如限制严格的规范。上面只是简单的分析了其中的调用原理，对于相对内部结构有所了解的朋友但愿能起到一定的作用。

   如果你想了解如何使用，个人感觉最好的熟悉方法还是查看案例，然后按照最标准的使用方法来，上面的内容就当帮助你理解使用规范以防止出错….