OpenLayers学习——Style及StyleMap(一)

参考官方例子:http://openlayers.org/dev/examples/stylemap.html

测试代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="../theme/default/style.css" />
    <script type="text/javascript" src="../OpenLayers.js"></script>
    <script type="text/javascript">
        var map;
        function init(){
            var options = { "controls": [] };
            map = new OpenLayers.Map("map", options);
            var wms = new OpenLayers.Layer.WMS("openlayer",
                "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());

            // 创建feature
            var features = new Array(50);
            for (var i = 0; i < 50; i++){
                features[i] = new OpenLayers.Feature.Vector(
                    new OpenLayers.Geometry.Point((360 * Math.random()) - 180, (180 * Math.random()) - 90),
                    { "type": 5 + parseInt(Math.random() * 5) });
            }

            // 创建地图符号化
            var myStyles = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style({
                    pointRadius: "${type}",
                    fillColor: "#ffcc66",
                    strokeColor: "#ff9933",
                    strokeWith: 2,
                    graphicZIndex:1
                }),
                "select": new OpenLayers.Style({
                    fillColor: "#66ccff",
                    strokeColor: "#3399ff",
                    graphicZIndex: 2
                })
            });

            // 创建图层,并添加feature
            var points = new OpenLayers.Layer.Vector("Points", {
                styleMap: myStyles,
                rendererOptions: { zIndexing: true }
            });
            points.addFeatures(features);

            // 加载要素图层
            map.addLayer(points);

            // 添加选择要素工具
            var select = new OpenLayers.Control.SelectFeature(points, { hover: true });
            map.addControl(select);
            select.activate();

            map.zoomToMaxExtent();
        }
    </script>
</head>
<body onload="init()">
    <div id="map" style="width:500px;height:400px"></div>
</body>
</html>

上面例子中主要使用StyleMap类来符号化图层,在构造该对象的时候传入两个Style对象,default作为默认状态下要素符号,select做为选择状态下要素符号。

查看OpenLayers源码,构造函数如下:

 initialize: function (style, options) {
        this.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"])
        };
        
        // take whatever the user passed as style parameter and convert it
        // into parts of stylemap.
        if(style instanceof OpenLayers.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 OpenLayers.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 OpenLayers.Style(style[key]);
                } else {
                    // user passed a style hash (i.e. symbolizer)
                    this.styles["default"] = new OpenLayers.Style(style);
                    this.styles["select"] = new OpenLayers.Style(style);
                    this.styles["temporary"] = new OpenLayers.Style(style);
                    this.styles["delete"] = new OpenLayers.Style(style);
                    break;
                }
            }
        }
        OpenLayers.Util.extend(this, options);
    }

styleMap总共有四种Style,分别是default、select、temporary、delete。

构造StyleMap时,首先将四种符号预设为OpenLayers已经提前初始化的4种符号,然后判断传入的参数,如果是Style类型,则直接把四种符号都设置成该类型的Style,如果传入的是Option,则判断是否是style类型,根据传入的key来设置对应的符号。

查看OpenLayers.Feature.Vector.style源码如下:

OpenLayers.Feature.Vector.style = {
    'default': {
        fillColor: "#ee9900",
        fillOpacity: 0.4, 
        hoverFillColor: "white",
        hoverFillOpacity: 0.8,
        strokeColor: "#ee9900",
        strokeOpacity: 1,
        strokeWidth: 1,
        strokeLinecap: "round",
        strokeDashstyle: "solid",
        hoverStrokeColor: "red",
        hoverStrokeOpacity: 1,
        hoverStrokeWidth: 0.2,
        pointRadius: 6,
        hoverPointRadius: 1,
        hoverPointUnit: "%",
        pointerEvents: "visiblePainted",
        cursor: "inherit",
        fontColor: "#000000",
        labelAlign: "cm",
        labelOutlineColor: "white",
        labelOutlineWidth: 3
    },
    'select': {
        fillColor: "blue",
        fillOpacity: 0.4, 
        hoverFillColor: "white",
        hoverFillOpacity: 0.8,
        strokeColor: "blue",
        strokeOpacity: 1,
        strokeWidth: 2,
        strokeLinecap: "round",
        strokeDashstyle: "solid",
        hoverStrokeColor: "red",
        hoverStrokeOpacity: 1,
        hoverStrokeWidth: 0.2,
        pointRadius: 6,
        hoverPointRadius: 1,
        hoverPointUnit: "%",
        pointerEvents: "visiblePainted",
        cursor: "pointer",
        fontColor: "#000000",
        labelAlign: "cm",
        labelOutlineColor: "white",
        labelOutlineWidth: 3

    },
    'temporary': {
        fillColor: "#66cccc",
        fillOpacity: 0.2, 
        hoverFillColor: "white",
        hoverFillOpacity: 0.8,
        strokeColor: "#66cccc",
        strokeOpacity: 1,
        strokeLinecap: "round",
        strokeWidth: 2,
        strokeDashstyle: "solid",
        hoverStrokeColor: "red",
        hoverStrokeOpacity: 1,
        hoverStrokeWidth: 0.2,
        pointRadius: 6,
        hoverPointRadius: 1,
        hoverPointUnit: "%",
        pointerEvents: "visiblePainted",
        cursor: "inherit",
        fontColor: "#000000",
        labelAlign: "cm",
        labelOutlineColor: "white",
        labelOutlineWidth: 3

    },
    'delete': {
        display: "none"
    }
}

构造Style方法如下:

new OpenLayers.Style({
                    pointRadius: "${type}",
                    fillColor: "#ffcc66",
                    strokeColor: "#ff9933",
                    strokeWith: 2,
                    graphicZIndex:1
                })

即,传入Option即可,Option具体有哪些参数可以传入可以参考OpenLayers.Feature.Vector.style 源码。

例子效果参见:http://openlayers.org/dev/examples/stylemap.html

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

You may also like...