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
