devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

OpenLayers中样式Style,styleMap等的设计分析和使用说明

作者：Cpp五条 | 2024-04-18 10:37:42

赞

踩

拿到open layer的style

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 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提供了方便灵活地使用方式，但是也给用户当使用带来了一定的不便，初学者会被这些复杂的使用结构搞混，以至于不知道如何具体使用。感觉这块提供的方式过于灵活了，不如限制严格的规范。上面只是简单的分析了其中的调用原理，对于相对内部结构有所了解的朋友但愿能起到一定的作用。

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

转载于:https://www.cnblogs.com/rcsblog/articles/2600849.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/445515
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号