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:
-
关于StyleMap的初始化，这里贴出StyleMap的构造函数源码说明：
initialize: function (style, options) { this.styles = { "default": new SuperMap.Style( SuperMap.Feature.Vector.style["default"]), "select": new SuperMap.Style( SuperMap.Feature.Vector.style["select"]), "temporary": new SuperMap.Style( SuperMap.Feature.Vector.style["temporary"]), "delete": new SuperMap.Style( SuperMap.Feature.Vector.style["delete"]) }; // take whatever the user passed as style parameter and convert it // into parts of stylemap. if(style instanceof SuperMap.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 SuperMap.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 SuperMap.Style(style[key]); } else { // user passed a style hash (i.e. symbolizer) this.styles["default"] = new SuperMap.Style(style); this.styles["select"] = new SuperMap.Style(style); this.styles["temporary"] = new SuperMap.Style(style); this.styles["delete"] = new SuperMap.Style(style); break; } } } SuperMap.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} 到样式值的转换
SuperMap.Style.createLiteral = function(value, context, feature, property) { if (typeof value == "string" && value.indexOf("${") != -1) { value = SuperMap.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提供了方便灵活地使用方式，但是也给用户当使用带来了一定的不便，初学者会被这些复杂的使用结构搞混，以至于不知道如何具体使用。感觉这块提供的方式过于灵活了，不如限制严格的规范。上面只是简单的分析了其中的调用原理，对于相对内部结构有所了解的朋友但愿能起到一定的作用。
如果你想了解如何使用，个人感觉最好的熟悉方法还是查看案例，然后按照最标准的使用方法来，上面的内容就当帮助你理解使用规范以防止出错….
