openlayers2地图控件扩展：图例控件LegendControl

因项目需要在地图中增加图例，以便专题地图查看或输出。

实现思路，折线和多边形图例直接由样式属性创建，多边形直接设置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;
 }

效果图