OpenLayers学习——Style及StyleMap(三)

时间:2021-01-13 04:10:32

本节使用官网例子学习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的时候使用对应的符号进行绘图。