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

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

实现思路，折线和多边形图例直接由样式属性创建，多边形直接设置div的样式；折线通过创建svg，设置polyline的样式；点要素的图例比较复杂，目前实现方式是：

1、根据StyleMap里的Filter，找到不同Filter的要素id，这里的查找要过滤掉没有被渲染的要素；

2、根据要素id从图层的渲染层找到对应的html元素，也就是svg标签；

3、处理找到的svg标签即可，主要是移位；

代码如下：

  1 OpenLayers.Control.LegendControl = OpenLayers.Class(OpenLayers.Control, {
  2     legendDiv: null,
  3     layers: [],
  4     colorDiv_w: 30,
  5     colorDiv_h: 20,
  6     /*
  7      * layers --Array
  8      * */
  9     initialize: function (layers, options) {
 10         OpenLayers.Control.prototype.initialize.apply(this, options);
 11 
 12         this.setLayers(layers);    
 13     },
 14     setMap: function(map) {
 15         var me = this;
 16         OpenLayers.Control.prototype.setMap.apply(this, arguments);
 17         if(me.map){
 18             me.map.events.register("moveend", me, me.redraw);
 19             me.map.events.register("changelayer", me, function(evt){
 20                 if(evt.property == "visibility")
 21                     this.redraw();
 22             });
 23         }
 24     },
 25     //{Array or Object}
 26     setLayers: function(layers){
 27         var me = this;
 28         if(OpenLayers.Util.isArray(layers)){
 29             me.layers = layers;
 30         }
 31     },
 32     addLayer: function(layer){
 33         this.layers.push(layer);
 34 
 35         this.redraw();
 36     },
 37     redraw: function(){
 38         if(this.div.style.display == "none"){
 39             return;
 40         }
 41         if(this.legendDiv){
 42             this.div.removeChild(this.legendDiv);
 43             this.legendDiv = null;
 44         }
 45         this.draw();
 46     },
 47     display: function(display) {
 48         this.div.style.display = (display) ? "" : "none"; 
 49     },
 50     draw: function() {
 51         OpenLayers.Control.prototype.draw.apply(this);
 52 
 53         // create layout divs
 54         this.loadContents();
 55 
 56         return this.div;
 57     },
 58     loadContents: function(){
 59         if(!this.legendDiv){
 60             this.legendDiv = document.createElement("div");
 61             this.legendDiv.id = this.id + "_legendDiv";
 62             OpenLayers.Element.addClass(this.legendDiv, "legendDiv"); 
 63             this.div.appendChild(this.legendDiv);
 64 
 65             // create span
 66             var labelSpan = document.createElement("label");
 67             labelSpan.innerHTML = "Legend";
 68             OpenLayers.Element.addClass(labelSpan, "title");
 69             this.legendDiv.appendChild(labelSpan); 
 70             var brSpan = document.createElement("br");
 71             this.legendDiv.appendChild(brSpan); 
 72 
 73             for(var i = 0; i < this.layers.length;i ++){
 74                 var layer = this.layers[i];
 75                 if(!layer.getVisibility()){
 76                     continue;
 77                 }
 78                 var geom = getLayerDefaultGeometry(layer);　　//获取图层中的几何要素
 79                 if(!geom)
 80                     continue;
 81                 
 82                 //one table corresponds to a layer
 83                 var labelLyr = document.createElement("label");
 84                 labelLyr.innerHTML = layer.name;
 85                 this.legendDiv.appendChild(labelLyr);
 86                 var tableDiv = document.createElement("table");
 87                 this.legendDiv.appendChild(tableDiv);
 88                 
 89                 var featArray = layer.features;
 90                 var unrenderFeatures = layer.unrenderedFeatures;
 91                 var arr = Object.keys(unrenderFeatures);
 92                 if(arr.length == featArray.length)
 93                     continue;
 94                 
 95                 var styleRules = layer.styleMap.styles["default"].rules;
 96                 var geomType = "point";
 97                 //decide symbolizer panel from geometry type
 98                 if(geom instanceof OpenLayers.Geometry.Point ||
 99                         geom instanceof OpenLayers.Geometry.MultiPoint) {
100                     var allFilters = [];
101                     var bElseFilter = 2;
102                     for(var key in styleRules) {
103                         var filter = styleRules[key].filter;
104                         if(filter){
105                             allFilters.push(filter);
106                         }
107                         else{ //no filter
108                             bElseFilter = styleRules[key].elseFilter;
109                         }
110                     }
111                     //
112                     if(!bElseFilter){    //no else filter --deafault
113                         var trDiv = this.createPointLegend(geom.id, "default");
114                         tableDiv.appendChild(trDiv);
115                     }
116                     else{    //find filter's geometry id
117                         var filterIDs = [];
118 
119                         var findResults = {};
120                         var findCount = 0;
121                         for(var dex = 0; dex < featArray.length; dex ++){
122                             if(findCount == allFilters.length + 1)
123                                 break;
124                             
125                             var feat = featArray[dex];
126                             if(arr.indexOf(feat.id) >= 0)
127                                 continue;
128 
129                             var beInfilter = false;
130                             for(var fk = 0; fk < allFilters.length; fk ++){
131                                 var bFilter = allFilters[fk].evaluate(feat);
132                                 if(bFilter){
133                                     beInfilter = true;
134                                     if(!findResults[allFilters[fk].toString()]){
135                                         var svgId = feat.geometry.id;
136                                         filterIDs.push({
137                                             id:svgId,
138                                             label: allFilters[fk].toString()
139                                         });
140                                         findResults[allFilters[fk].toString()] = true;
141                                         findCount ++;                                        
142                                     }
143                                     break;
144                                 }
145 
146                             }
147                             if(!beInfilter && (!findResults["default"])){    //false
148                                 var svgId = feat.geometry.id;
149                                 filterIDs.push({
150                                     id:svgId,
151                                     label: "default"
152                                 });
153                                 findResults["default"] = true;
154                                 findCount ++;
155                             }
156                         }
157                         for(var fDex = 0; fDex < filterIDs.length; fDex ++){
158                             var trDiv = this.createPointLegend(filterIDs[fDex].id, filterIDs[fDex].label);
159                             tableDiv.appendChild(trDiv);                        
160                         }
161                     }
162 
163                     continue;    //skip next code
164                 } else if(geom instanceof OpenLayers.Geometry.LineString ||
165                         geom instanceof OpenLayers.Geometry.MultiLineString) {
166                     geomType = "line";
167 
168                 } else if(geom instanceof OpenLayers.Geometry.LinearRing ||
169                         geom instanceof OpenLayers.Geometry.Polygon ||
170                         geom instanceof OpenLayers.Geometry.MultiPolygon) {
171                     geomType = "polygon";
172                 }
173 
174                 for(var key in styleRules) {
175                     var filter = styleRules[key].filter;
176                     var sybol = styleRules[key].symbolizer;
177                     var labelTxt = "";
178                     if(filter) {
179                         labelTxt = filter.toString();
180                     }
181                     else{
182                         labelTxt = "default";
183                     }
184 
185                     var trDiv = document.createElement("tr");
186                     tableDiv.appendChild(trDiv);
187                     var colorTd = document.createElement("td");
188                     trDiv.appendChild(colorTd);
189 
190                     var labelTd = document.createElement("td");
191                     trDiv.appendChild(labelTd);
192 
193                     var itemLabel = document.createElement("label");
194                     itemLabel.style = "margin-left:5px;position:relative;top:3px;";
195                     itemLabel.innerHTML = labelTxt;
196                     labelTd.appendChild(itemLabel);
197 
198                     if(geomType == "line"){
199                         if(sybol.Line){
200                             var colorDiv = this.createLineLegend(sybol.Line);
201                             colorTd.appendChild(colorDiv);
202                         }
203                     }
204                     else if(geomType == "polygon"){
205                         if(sybol.Polygon){
206                             var colorDiv = this.createPolygonLegend(sybol.Polygon);
207                             colorTd.appendChild(colorDiv);                        
208                         }
209                     }
210                 }
211             }
212 
213         }
214     },
215     createPolygonLegend: function(polygonSybol){
216         var colorDiv = document.createElement("div");
217         if(polygonSybol.fill){
218             var color = this.parseColor(polygonSybol.fillColor, polygonSybol.fillOpacity);
219             colorDiv.style.background = color;
220         }
221         if(polygonSybol.stroke){
222             var dashStyle = polygonSybol.strokeDashstyle;
223             var color = this.parseColor(polygonSybol.strokeColor, polygonSybol.strokeOpacity);
224             var width = polygonSybol.strokeWidth + "px";
225             colorDiv.style.border = width + " " + dashStyle + " " + color;
226         }
227         colorDiv.style.height = this.colorDiv_h + "px";
228         colorDiv.style.width = this.colorDiv_w + "px";
230         return colorDiv;
231     },
232     /*
233      * 234      * stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none">
235      * */
236     createLineLegend: function(lineSybol){
237         var colorDiv = document.createElement("div");
238         colorDiv.style.height = this.colorDiv_h + "px";
239         colorDiv.style.width = this.colorDiv_w + "px";
240 
241         var lineHtml = ';
242         lineHtml += ' lineSybol.strokeColor 
243         + '" stroke-opacity="'+ lineSybol.strokeOpacity +'" stroke-width="'+ lineSybol.strokeWidth + '"';
244         lineHtml += ' stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none">';
245         colorDiv.innerHTML = lineHtml;
246 
247         return colorDiv;
248     },
249     createPointLegend: function(svgId, label){
250         var trDiv = document.createElement("tr");
251         var svgEle = document.getElementById(svgId);
252         if(!svgEle){
253             return trDiv;
254         }
255         var colorTd = document.createElement("td");
256         trDiv.appendChild(colorTd);
257 
258         var labelTd = document.createElement("td");
259         trDiv.appendChild(labelTd);
260         var itemLabel = document.createElement("label");
261         itemLabel.style = "margin-left:5px;position:relative;top:3px;";
262         itemLabel.innerHTML = label;
263         labelTd.appendChild(itemLabel);
264 
265         var colorDiv = document.createElement("div");
266         colorTd.appendChild(colorDiv);
267         var divHeight = this.colorDiv_h;
268         var divWidth = this.colorDiv_w;
269 
270         var cln = svgEle.cloneNode(true);
271         if(cln.nodeName.toLowerCase() != "svg"){    //circle,image
272             var rVal = cln.getAttribute("r");
273             if(cln.hasAttribute("x") && cln.hasAttribute("y")){
274                 cln.setAttribute("x", rVal);
275                 cln.setAttribute("y", rVal);                
276             }
277             if(cln.hasAttribute("cx") && cln.hasAttribute("cy")){
278                 cln.setAttribute("cx", rVal);
279                 cln.setAttribute("cy", rVal);
280             }
281             if(cln.hasAttribute("transform")){
282                 var transform = cln.getAttribute("transform");
283                 if(transform.indexOf('rotate(') >= 0){
284                     var transValues = transform.split('rotate(');
285                     var kk = null;
286                     if(transValues.length == 1){
287                         kk = 0;
288                     }
289                     else if(transValues.length > 1){
290                         kk = 1;
291                     }
292                     if(kk != null){
293                         var str = transValues[kk];
294                         var sp = str.indexOf(')');
295                         var rotString = str.substring(0, sp);
296 
297                         var ww = parseFloat(cln.getAttribute('width'));
298                         var hh = parseFloat(cln.getAttribute('height'));
299                         if(ww >= divWidth)
300                             divWidth = ww + 2;
301                         if(hh >= divWidth)
302                             divHeight = hh + 2;
303 
304                         var rotValues = rotString.split(' ');
305                         rotValues[1] = ww / 2;
306                         rotValues[2] = hh / 2;
307 
308                         transValues[kk] = rotValues.join(' ') + str.substring(sp);
309                         cln.setAttribute('transform',transValues.join('rotate('));                            
310                     }
311                 }
312 
313             }
314             //innerHTML
315             colorDiv.innerHTML = '';
316             var svgNode = colorDiv.firstChild;
317             svgNode.appendChild(cln);
318             colorDiv.appendChild(svgNode);
319         }
320         else{
321             //change viewBox --from(0,0)
322             var viewBox = cln.getAttribute('viewBox');    // Grab the object representing the SVG element's viewBox attribute.
323             var viewBoxValues = viewBox.split(' ');                // Create an array and insert each individual view box attribute value (assume they're seperated by a single whitespace character).
324 
325             /* The array is filled with strings, convert the first two viewBox values to floats: */
326             viewBoxValues[0] = parseFloat(viewBoxValues[0]);    // Represent the x-coordinate on the viewBox attribute.
327             viewBoxValues[1] = parseFloat(viewBoxValues[1]);    // Represent the y coordinate on the viewBox attribute.
328             viewBoxValues[2] = parseFloat(viewBoxValues[2]);    // Represent the y coordinate on the viewBox attribute.
329 
330             if(viewBoxValues[2] > 300){    //star
331                 viewBoxValues[0] = 250;
332                 viewBoxValues[1] = 75;
333             }
334             else{
335                 viewBoxValues[0] = 0;
336                 viewBoxValues[1] = 0;                
337             }
338 
339             cln.setAttribute('viewBox', viewBoxValues.join(' '));
340             colorDiv.appendChild(cln);                                    
341         }
342 
343         colorDiv.style.height = divHeight + "px";
344         colorDiv.style.width = divWidth + "px";
345         return trDiv;        
346     },
347     parseColor: function(value, opacity){
348         if(value.length == 7){
349             var str = value.substr(1,6);
350             var rgb1 = parseInt(str.substr(0, 2), 16);              
351             var rgb2 = parseInt(str.substr(2, 2), 16);
352             var rgb3 = parseInt(str.substr(4, 2), 16);
353             return "rgba("+rgb1+","+rgb2+","+rgb3+","+opacity+")";
354         }
355         else{
356             return value;
357         }
358     },
359     CLASS_NAME: "OpenLayers.Control.LegendControl"
360 });

LegendControl的样式设置如下：

 1 /*
 2  * olControlLegendControl
 3 */
 4 .olControlLegendControl {
 5     position: absolute;
 6     left: 0px;
 7     bottom: 0px;
 8     width: 18em;
 9     font-family: sans-serif;
10     font-size: smaller;
11     margin-top: 3px;
12     margin-left: 0px;
13     margin-bottom: 0px;
14     color: darkblue;
15     background-color: transparent;    
16 }
17 .olControlLegendControl .legendDiv {
18     padding-top: 5px;
19     padding-left: 10px;
20     padding-bottom: 5px;
21     padding-right: 10px;
22     background-color: rgba(200, 200, 200, 0.5);
23 }
24 .olControlLegendControl .legendDiv .title{
25     margin-top: 3px;
26     margin-left: 40px;
27     margin-bottom: 3px;
28     display: inline-block;
29     height: 30px;
30     font-family: sans-serif;
31     font-weight: bold;
32     font-size: 20px;
33 }
34 .olControlLegendControl .legendDiv .item{
35     margin-top: 3px;
36     margin-left: 3px;
37     margin-bottom: 3px;
38 }

 效果图

 

转载于:https://www.cnblogs.com/HandyLi/p/7698396.html