OpenLayers学习——Style及StyleMap（二）

参考官网例子，做一个随比例一起缩放的矢量符号的例子，主要代码如下：

<script type="text/javascript">
        var map;
        function init() {
            var options = {
                controls: [],
                maxResolution: "auto"
            };
            map = new OpenLayers.Map("map", options);

            var wms = new OpenLayers.Layer.WMS("WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
            map.addLayer(wms);
            // 初始化空间
            map.addControl(new OpenLayers.Control.ZoomPanel());
            map.addControl(new OpenLayers.Control.Navigation());
            map.addControl(new OpenLayers.Control.MousePosition());

            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

            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())
                    }
                );
            }
            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}",
                fillColor: "${getColor}"
            };
            var style = new OpenLayers.Style(template, { context: context });
            var layer2 = new OpenLayers.Layer.Vector("Points2", {
                styleMap: new OpenLayers.StyleMap(style),
                renderers: renderer
            });
            layer2.addFeatures(features);

            map.addLayer(layer2);
            map.zoomToMaxExtent();
        }
    </script>

在本次例子中，构造Style的方式与上次稍有不同，传入两个参数，template（也是一个style），Context对象，根据这个context里面的两个方法，我们也可以猜到这个主要就是辅助style动态计算符号的大小和颜色的函数，Openlayers究竟是怎么样来使用这个对象呢，我们可以先看一下源码，调试找到以下代码（OpenLayers.Layer.Vector.js）：

 drawFeature: function(feature, style) {
        // don't try to draw the feature with the renderer if the layer is not 
        // drawn itself
        if (!this.drawn) {
            return;
        }
        if (typeof style != "object") {
            if(!style && feature.state === OpenLayers.State.DELETE) {
                style = "delete";
            }
            var renderIntent = style || feature.renderIntent;
            style = feature.style || this.style;
            if (!style) {
                style = this.styleMap.createSymbolizer(feature, renderIntent);
            }
        }
        
        var drawn = this.renderer.drawFeature(feature, style);
        //TODO remove the check for null when we get rid of Renderer.SVG
        if (drawn === false || drawn === null) {
            this.unrenderedFeatures[feature.id] = feature;
        } else {
            delete this.unrenderedFeatures[feature.id];
        }
    }

style = this.styleMap.createSymbolizer(feature, renderIntent);

上面这句代码就是使用StyleMap来产生一个符号，这个符号的产生过程可以跟踪到Style类中的如下代码：

 createSymbolizer: function(feature) {
        var style = this.defaultsPerSymbolizer ? {} : this.createLiterals(
            OpenLayers.Util.extend({}, this.defaultStyle), feature);
///......
}

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;
};

上面两段代码就将一个包含有Context属性的Style在绘图时间动态计算符号的大小，实现了符号也随着比例尺动态变化。

例子效果参考：http://openlayers.org/dev/examples/styles-context.html

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