OpenLayers学习——Style及StyleMap(三)

本节使用官网例子学习OpenLayers绘图是使用过滤器，即按照指定的规则进行符号化。主要代码如下：

<script type="text/javascript">
        var map;

        function init() {
            map = new OpenLayers.Map("map", { controls: [] });
            var wms = new OpenLayers.Layer.WMS("wmsName",
                "http://vmap0.tiles.osgeo.org/wms/vmap0",
                { layers: "basic" });
            map.addLayer(wms);
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.PanZoom());
            map.zoomToMaxExtent();

            // 自动检测不同的渲染器
            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderer;

            var layer = new OpenLayers.Layer.Vector("simple geometry", {
                styleMap: new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style(null, {
                        rules: [
                            new OpenLayers.Rule({
                                symbolizer: {
                                    graphic: false,
                                    label: "不可见点符号的标注",
                                    labelSelect: true
                                },
                                filter: new OpenLayers.Filter.Comparison({
                                    type: "==",
                                    property: "topic",
                                    value: "point_invisible"
                                })
                            }),
                            new OpenLayers.Rule({
                                symbolizer: {
                                    fill: true,
                                    stroke: true,
                                    label: "默认面符号的标注"
                                },
                                filter: new OpenLayers.Filter.Comparison({
                                    type: "==",
                                    property: "topic",
                                    value: "polygon_defaults"
                                })
                            }),
                            new OpenLayers.Rule({
                                symbolizer: {
                                    stroke: true,
                                    fill: false,
                                    label: "不填充点符号的标注",
                                    labelAlign: "rb",
                                    fontColor: "#ff0000",
                                    fontOpacity: 0.4
                                },
                                filter: new OpenLayers.Filter.Comparison({
                                    type: "==",
                                    property: "topic",
                                    value: "point_nofill"
                                })
                            })
                        ]
                    })
                }),
                renderer: renderer
            });

            var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
            var pointFeature = new OpenLayers.Feature.Vector(point);
            pointFeature.attributes = {
                topic: "point_invisible"
            };
            var pointList = [];
            for (var p = 0; p < 6; ++p) {
                var a = p * (2 * Math.PI) / 7;
                var r = Math.random(1) + 1;
                var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)),
                                                             point.y + 5 + (r * Math.sin(a)));
                pointList.push(newPoint);
            }
            pointList.push(pointList[0]);

            var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
            var polygonFeature = new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Polygon([linearRing]));
            polygonFeature.attributes = {
                topic: "polygon_defaults"
            };

            multiFeature = new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Collection([
                    new OpenLayers.Geometry.LineString([
                        new OpenLayers.Geometry.Point(-105, 40),
                        new OpenLayers.Geometry.Point(-95, 45)
                    ]),
                    new OpenLayers.Geometry.Point(-105, 40)
                ]),
                {
                    topic: "point_nofill"
                });

            map.addLayer(layer);
            layer.drawFeature(multiFeature);
            map.setCenter(new OpenLayers.LonLat(point.x, point.y), 4);
            layer.addFeatures([pointFeature, polygonFeature, multiFeature]);

            var sel = new OpenLayers.Control.SelectFeature(layer, {
                selectStyle: OpenLayers.Util.extend({ fill: true, stroke: true }, OpenLayers.Feature.Vector.style["select"])
            });
            map.addControl(sel);
            sel.activate();
        }
    </script>

在上面例子中，主要实现的按照指定规则进行符号的话的核心类是在构造Style时候使用了一组Rule，该类在OpenLayers.Rule 中，这个类用于按照指定规则绘图的SLD样式。

SLD是图层样式的描述文件格式，是OGC指定的图层样式标准，可以查看官方文档，SLD文件可以使用QGIS、UDig等一些开源软件直接从图层样式中导出，不需要手动编辑。

在Rule类中主要有两个重要的属性，（1）规则（2）样式（其实内部实现的并不直接是简单的样式）
在OpenLayers中实现规则的类有好几个，主要在Filter包下面，这里使用的OpenLayers.Filter.Comparison就是其中一种。

主要是比较过滤，即，使用指定列的值与给定值进行比较运算，比较运算符有以下几种：”==” “!=” “<” “>” “<=” “>=” “..” “~” “NULL”;

查看源代码，在Comparison主要三个重要属性：“type”,”property”,”value”，type就是上面比较运算符，property是Feature的一个Attribute的Name，value就是要判断的条件的值。

上面例子中的第一个Rule就是告诉绘图引擎，当该图层的某个Feature的topic的值等于point_invisible的时候使用对应的符号进行绘图。

转载自：https://blog.csdn.net/devCopper/article/details/26571617