因项目需要在地图中增加图例，以便专题地图查看或输出。
实现思路，折线和多边形图例直接由样式属性创建，多边形直接设置div的样式；折线通过创建svg，设置polyline的样式；点要素的图例比较复杂，目前实现方式是：
1、根据StyleMap里的Filter，找到不同Filter的要素id，这里的查找要过滤掉没有被渲染的要素；
2、根据要素id从图层的渲染层找到对应的html元素，也就是svg标签；
3、处理找到的svg标签即可，主要是移位；
代码如下：
OpenLayers.Control.LegendControl = OpenLayers.Class(OpenLayers.Control, {
legendDiv: null,
layers: [],
colorDiv_w: 30,
colorDiv_h: 20,
/*
* layers --Array
* */
initialize: function (layers, options) {
OpenLayers.Control.prototype.initialize.apply(this, options);
this.setLayers(layers);
},
setMap: function(map) {
var me = this;
OpenLayers.Control.prototype.setMap.apply(this, arguments);
if(me.map){
me.map.events.register("moveend", me, me.redraw);
me.map.events.register("changelayer", me, function(evt){
if(evt.property == "visibility")
this.redraw();
});
}
},
//{Array or Object}
setLayers: function(layers){
var me = this;
if(OpenLayers.Util.isArray(layers)){
me.layers = layers;
}
},
addLayer: function(layer){
this.layers.push(layer);
this.redraw();
},
redraw: function(){
if(this.div.style.display == "none"){
return;
}
if(this.legendDiv){
this.div.removeChild(this.legendDiv);
this.legendDiv = null;
}
this.draw();
},
display: function(display) {
this.div.style.display = (display) ? "" : "none";
},
draw: function() {
OpenLayers.Control.prototype.draw.apply(this);
// create layout divs
this.loadContents();
return this.div;
},
loadContents: function(){
if(!this.legendDiv){
this.legendDiv = document.createElement("div");
this.legendDiv.id = this.id + "_legendDiv";
OpenLayers.Element.addClass(this.legendDiv, "legendDiv");
this.div.appendChild(this.legendDiv);
// create span
var labelSpan = document.createElement("label");
labelSpan.innerHTML = "Legend";
OpenLayers.Element.addClass(labelSpan, "title");
this.legendDiv.appendChild(labelSpan);
var brSpan = document.createElement("br");
this.legendDiv.appendChild(brSpan);
for(var i = 0; i < this.layers.length;i ++){
var layer = this.layers[i];
if(!layer.getVisibility()){
continue;
}
var geom = getLayerDefaultGeometry(layer); //获取图层中的几何要素
if(!geom)
continue;
//one table corresponds to a layer
var labelLyr = document.createElement("label");
labelLyr.innerHTML = layer.name;
this.legendDiv.appendChild(labelLyr);
var tableDiv = document.createElement("table");
this.legendDiv.appendChild(tableDiv);
var featArray = layer.features;
var unrenderFeatures = layer.unrenderedFeatures;
var arr = Object.keys(unrenderFeatures);
if(arr.length == featArray.length)
continue;
var styleRules = layer.styleMap.styles["default"].rules;
var geomType = "point";
//decide symbolizer panel from geometry type
if(geom instanceof OpenLayers.Geometry.Point ||
geom instanceof OpenLayers.Geometry.MultiPoint) {
var allFilters = [];
var bElseFilter = 2;
for(var key in styleRules) {
var filter = styleRules[key].filter;
if(filter){
allFilters.push(filter);
}
else{ //no filter
bElseFilter = styleRules[key].elseFilter;
}
}
//
if(!bElseFilter){ //no else filter --deafault
var trDiv = this.createPointLegend(geom.id, "default");
tableDiv.appendChild(trDiv);
}
else{ //find filter's geometry id
var filterIDs = [];
var findResults = {};
var findCount = 0;
for(var dex = 0; dex < featArray.length; dex ++){
if(findCount == allFilters.length + 1)
break;
var feat = featArray[dex];
if(arr.indexOf(feat.id) >= 0)
continue;
var beInfilter = false;
for(var fk = 0; fk < allFilters.length; fk ++){
var bFilter = allFilters[fk].evaluate(feat);
if(bFilter){
beInfilter = true;
if(!findResults[allFilters[fk].toString()]){
var svgId = feat.geometry.id;
filterIDs.push({
id:svgId,
label: allFilters[fk].toString()
});
findResults[allFilters[fk].toString()] = true;
findCount ++;
}
break;
}
}
if(!beInfilter && (!findResults["default"])){ //false
var svgId = feat.geometry.id;
filterIDs.push({
id:svgId,
label: "default"
});
findResults["default"] = true;
findCount ++;
}
}
for(var fDex = 0; fDex < filterIDs.length; fDex ++){
var trDiv = this.createPointLegend(filterIDs[fDex].id, filterIDs[fDex].label);
tableDiv.appendChild(trDiv);
}
}
continue; //skip next code
} else if(geom instanceof OpenLayers.Geometry.LineString ||
geom instanceof OpenLayers.Geometry.MultiLineString) {
geomType = "line";
} else if(geom instanceof OpenLayers.Geometry.LinearRing ||
geom instanceof OpenLayers.Geometry.Polygon ||
geom instanceof OpenLayers.Geometry.MultiPolygon) {
geomType = "polygon";
}
for(var key in styleRules) {
var filter = styleRules[key].filter;
var sybol = styleRules[key].symbolizer;
var labelTxt = "";
if(filter) {
labelTxt = filter.toString();
}
else{
labelTxt = "default";
}
var trDiv = document.createElement("tr");
tableDiv.appendChild(trDiv);
var colorTd = document.createElement("td");
trDiv.appendChild(colorTd);
var labelTd = document.createElement("td");
trDiv.appendChild(labelTd);
var itemLabel = document.createElement("label");
itemLabel.style = "margin-left:5px;position:relative;top:3px;";
itemLabel.innerHTML = labelTxt;
labelTd.appendChild(itemLabel);
if(geomType == "line"){
if(sybol.Line){
var colorDiv = this.createLineLegend(sybol.Line);
colorTd.appendChild(colorDiv);
}
}
else if(geomType == "polygon"){
if(sybol.Polygon){
var colorDiv = this.createPolygonLegend(sybol.Polygon);
colorTd.appendChild(colorDiv);
}
}
}
}
}
},
createPolygonLegend: function(polygonSybol){
var colorDiv = document.createElement("div");
if(polygonSybol.fill){
var color = this.parseColor(polygonSybol.fillColor, polygonSybol.fillOpacity);
colorDiv.style.background = color;
}
if(polygonSybol.stroke){
var dashStyle = polygonSybol.strokeDashstyle;
var color = this.parseColor(polygonSybol.strokeColor, polygonSybol.strokeOpacity);
var width = polygonSybol.strokeWidth + "px";
colorDiv.style.border = width + " " + dashStyle + " " + color;
}
colorDiv.style.height = this.colorDiv_h + "px";
colorDiv.style.width = this.colorDiv_w + "px";
return colorDiv;
},
/*
* <svg><polyline points="20,27,34,21" fill="none" stroke="#550000" stroke-opacity="1" stroke-width="3"
* stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none"></polyline></svg>
* */
createLineLegend: function(lineSybol){
var colorDiv = document.createElement("div");
colorDiv.style.height = this.colorDiv_h + "px";
colorDiv.style.width = this.colorDiv_w + "px";
var lineHtml = '<svg width="100%" height="100%">';
lineHtml += '<polyline points="2,2,28,18" fill="none" stroke="' + lineSybol.strokeColor
+ '" stroke-opacity="'+ lineSybol.strokeOpacity +'" stroke-width="'+ lineSybol.strokeWidth + '"';
lineHtml += ' stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none"></polyline></svg>';
colorDiv.innerHTML = lineHtml;
return colorDiv;
},
createPointLegend: function(svgId, label){
var trDiv = document.createElement("tr");
var svgEle = document.getElementById(svgId);
if(!svgEle){
return trDiv;
}
var colorTd = document.createElement("td");
trDiv.appendChild(colorTd);
var labelTd = document.createElement("td");
trDiv.appendChild(labelTd);
var itemLabel = document.createElement("label");
itemLabel.style = "margin-left:5px;position:relative;top:3px;";
itemLabel.innerHTML = label;
labelTd.appendChild(itemLabel);
var colorDiv = document.createElement("div");
colorTd.appendChild(colorDiv);
var divHeight = this.colorDiv_h;
var divWidth = this.colorDiv_w;
var cln = svgEle.cloneNode(true);
if(cln.nodeName.toLowerCase() != "svg"){ //circle,image
var rVal = cln.getAttribute("r");
if(cln.hasAttribute("x") && cln.hasAttribute("y")){
cln.setAttribute("x", rVal);
cln.setAttribute("y", rVal);
}
if(cln.hasAttribute("cx") && cln.hasAttribute("cy")){
cln.setAttribute("cx", rVal);
cln.setAttribute("cy", rVal);
}
if(cln.hasAttribute("transform")){
var transform = cln.getAttribute("transform");
if(transform.indexOf('rotate(') >= 0){
var transValues = transform.split('rotate(');
var kk = null;
if(transValues.length == 1){
kk = 0;
}
else if(transValues.length > 1){
kk = 1;
}
if(kk != null){
var str = transValues[kk];
var sp = str.indexOf(')');
var rotString = str.substring(0, sp);
var ww = parseFloat(cln.getAttribute('width'));
var hh = parseFloat(cln.getAttribute('height'));
if(ww >= divWidth)
divWidth = ww + 2;
if(hh >= divWidth)
divHeight = hh + 2;
var rotValues = rotString.split(' ');
rotValues[1] = ww / 2;
rotValues[2] = hh / 2;
transValues[kk] = rotValues.join(' ') + str.substring(sp);
cln.setAttribute('transform',transValues.join('rotate('));
}
}
}
//innerHTML
colorDiv.innerHTML = '<svg width="100%" height="100%"></svg>';
var svgNode = colorDiv.firstChild;
svgNode.appendChild(cln);
colorDiv.appendChild(svgNode);
}
else{
//change viewBox --from(0,0)
var viewBox = cln.getAttribute('viewBox'); // Grab the object representing the SVG element's viewBox attribute.
var viewBoxValues = viewBox.split(' '); // Create an array and insert each individual view box attribute value (assume they're seperated by a single whitespace character).
/* The array is filled with strings, convert the first two viewBox values to floats: */
viewBoxValues[0] = parseFloat(viewBoxValues[0]); // Represent the x-coordinate on the viewBox attribute.
viewBoxValues[1] = parseFloat(viewBoxValues[1]); // Represent the y coordinate on the viewBox attribute.
viewBoxValues[2] = parseFloat(viewBoxValues[2]); // Represent the y coordinate on the viewBox attribute.
if(viewBoxValues[2] > 300){ //star
viewBoxValues[0] = 250;
viewBoxValues[1] = 75;
}
else{
viewBoxValues[0] = 0;
viewBoxValues[1] = 0;
}
cln.setAttribute('viewBox', viewBoxValues.join(' '));
colorDiv.appendChild(cln);
}
colorDiv.style.height = divHeight + "px";
colorDiv.style.width = divWidth + "px";
return trDiv;
},
parseColor: function(value, opacity){
if(value.length == 7){
var str = value.substr(1,6);
var rgb1 = parseInt(str.substr(0, 2), 16);
var rgb2 = parseInt(str.substr(2, 2), 16);
var rgb3 = parseInt(str.substr(4, 2), 16);
return "rgba("+rgb1+","+rgb2+","+rgb3+","+opacity+")";
}
else{
return value;
}
},
CLASS_NAME: "OpenLayers.Control.LegendControl"
});LegendControl的样式设置如下：
/*
* olControlLegendControl
*/
.olControlLegendControl {
position: absolute;
left: 0px;
bottom: 0px;
width: 18em;
font-family: sans-serif;
font-size: smaller;
margin-top: 3px;
margin-left: 0px;
margin-bottom: 0px;
color: darkblue;
background-color: transparent;
}
.olControlLegendControl .legendDiv {
padding-top: 5px;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
background-color: rgba(200, 200, 200, 0.5);
}
.olControlLegendControl .legendDiv .title{
margin-top: 3px;
margin-left: 40px;
margin-bottom: 3px;
display: inline-block;
height: 30px;
font-family: sans-serif;
font-weight: bold;
font-size: 20px;
}
.olControlLegendControl .legendDiv .item{
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
}
效果图