创建地图图例以匹配OpenLayers.Style

Question

我已经创建了一个OpenLayers.Style来为我的多边形着色,这个样式可以调整我的点和所有爵士乐,现在我想向用户解释这些样式代表什么.

我在OpenLayers中看不到任何允许我使用这些样式绘制自己的图例的东西.一切似乎都指向我发送数据的假定地图服务器,我没有.

目前看起来我将不得不绘制一些样本点/区域,屏幕抓住它们来制作我自己的传奇.是否有一种更好的方法可以直接在Style上进行,所以当Style更改时我不需要重新生成图像？

更新 我有一个很好的答案,依赖于GeoExt(以及ExtJS),我仍然想听听是否有人有一个jQuery兼容的答案.特别是如果它是普通的Javascript和OpenLayers.

Answer 1

我能够使用 ol.Map 类作为符号的容器来解决我的图例需求。也许有点黑客，但似乎适用于大多数（？）矢量图层（我没有 WMS）。

所以我正在做的是：

1. 循环遍历地图层并选择矢量类型

   if(lyr instanceof ol.layer.Vector)

2. 检查使用的样式类型并存储在数组中

   var style = lyr.getStyle();
   var image = style.getImage();
   if(image){
       if(image instanceof ol.style.Icon){
           //raster icon from url
           var icon2 = new ol.style.Icon( ({
               src: image.getSrc()
           }))
           var iconStyle2 = new ol.style.Style({
               image: icon2
           });
           row = {};
           row.style = iconStyle2;
           row.title = lyr.get('title');               
       }
       else{ //ol.style.RegularShape?
           row = {};
           row.style = style;
           row.title = lyr.get('title');               
       }
   }else{
       row = {};
       row.style = style;
       row.title = lyr.get('title');
   }
   

3. 还存储几何类型

   //geometry type
   var feats = lyr.getSource().getFeatures();
   if (feats && feats.length>0){
       if(feats[0].getGeometry() instanceof ol.geom.Point || feats[0].getGeometry() instanceof ol.geom.MultiPoint){
           row.geomType="point";
       }else if (feats[0].getGeometry() instanceof ol.geom.LineString || feats[0].getGeometry() instanceof ol.geom.MultiLineString){
           row.geomType="line";
       }else{
           row.geomType="polygon";
       }
   }
   

4. 遍历存储的图例行并构建所需的 HTML 元素，通常是“迷你地图”的 div 和图层名称

   for (i = 0; i < legendRows.length; i++) { 
       row = document.createElement("tr");
       //symbol
       cell = document.createElement("td");
       cell.style="width:35px";
       var div = document.createElement("div");
       div.style="width:32px; height:32px;";
       div.id = "mapLegendRowSymbolDiv" + i; 
       tble.appendChild(row);
       row.appendChild(cell);
       cell.appendChild(div);
       //layer title
       cell = document.createElement("td");      
       tble.appendChild(row);
       row.appendChild(cell);
       cell.innerHTML=legendRows[i].title; 
   }
   
   //append table
   $( "#legendText" ).empty();
   $( "#legendText" ).append(tble);
   

5. 将 HTML 元素添加到页面后，启动地图并插入假特征以显示符号

   //loop legend rows and and insert the maps
   var extent = [0, 0, 32, 32];
   var projection = new ol.proj.Projection({
       code: 'xkcd-image',
       units: 'pixels',
       extent: extent
   });
   for (i = 0; i < legendRows.length; i++) { 
       //target div
       var targetDiv = document.getElementById("mapLegendRowSymbolDiv" + i);
       //layer for icon
       var sourceLegend = new ol.source.Vector({wrapX: false});
       var vectorLegend = new ol.layer.Vector({
           source: sourceLegend,
           style: legendRows[i].style
       });
       //map
       var mapLegend = new ol.Map({
           controls: [],
           layers: [
               new ol.layer.Image({
                   source: new ol.source.ImageStatic({
                       projection: projection,
                       imageExtent: extent
                   })
               }),
               vectorLegend
           ],
           target: targetDiv,
           view: new ol.View({
               projection: projection,
               center: ol.extent.getCenter(extent),
               zoom: 2,
               maxZoom: 2
           })
       });
       //icon feature depending on type
       var geom;
       if(legendRows[i].geomType=='point'){
           geom = new ol.geom.Point([16,16]);
       }else if(legendRows[i].geomType=='polygon'){
           var polyCoords = [];
           polyCoords.push([15.7, 15.7]);
           polyCoords.push([16.3, 15.7]);
           polyCoords.push([16.3, 16.3]);
           polyCoords.push([15.7, 16.3]);
           polyCoords.push([15.7, 15.7]);
           geom = new ol.geom.Polygon([polyCoords]);
       }else{
           var lineCoords = [];                
           lineCoords.push([15.6, 15.6]);
           lineCoords.push([16, 16]);
           lineCoords.push([16, 15.8]);
           lineCoords.push([16.4, 16.2]);
           geom = new ol.geom.LineString(lineCoords);
       }
       var feature = new ol.Feature({
           geometry: geom
       });
       vectorLegend.getSource().addFeature(feature);
   }   
   

有了这个，我能够创建和更新一个单独的图例对话框（jQuery UI）：

我还没有测试很多，这种方法可能存在一些问题......

Answer 2

实际上，OpenLayers 不支持你想要的（或者至少我不知道该怎么做）。正如 Chau 告诉您的，GeoExt 的 LegendPanel 是您唯一的希望。

有趣的链接：

http://geoext.org/lib/GeoExt/widgets/LegendPanel.html

http://www.mail-archive.com/openlayers-users@lists.osgeo.org/msg01318.html