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

Question

我创建了一个 OpenLayers.Style 为我的多边形着色，一个为我的点调整大小的样式以及所有爵士乐，现在我想向用户解释这些样式代表什么。

我在 OpenLayers 中看不到任何允许我使用这些样式绘制自己的图例的内容。一切似乎都指向我假设的地图服务器正在向我发送数据，但我没有。

目前看来我必须绘制一些样本点/区域并抓取它们来制作我自己的图例。有没有更好的方法可以直接基于样式来完成此操作，这样当样式更改时我就不必重新生成图像？

更新 我有一个很好的答案，依赖于 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(ol.style.Icon 的图像实例){
           //来自url的光栅图标
           var icon2 = new ol.style.Icon( ({
               src: image.getSrc()
           }））
           var iconStyle2 = new ol.style.Style({
               图片：图标2
           });
           行={}；
           row.style = iconStyle2;
           row.title = lyr.get('标题');               
       }
       else{ //ol.style.RegularShape?
           行={}；
           row.style = 样式；
           row.title = lyr.get('标题');               
       }
   }别的{
       行={}；
       row.style = 样式；
       row.title = lyr.get('标题');
   }
   

3. 还存储几何类型

   //几何类型
   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="点";
       }else if (feats[0].getGeometry()instanceof ol.geom.LineString || feats[0].getGeometry()instanceof ol.geom.MultiLineString){
           row.geomType="线";
       }别的{
           row.geomType="多边形";
       }
   }
   

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

   for (i = 0; i < legendRows.length; i++) { 
       row = document.createElement("tr");
       //象征
       cell = document.createElement("td");
       cell.style =“宽度：35px”；
       var div = document.createElement("div");
       div.style="宽度:32px;高度:32px;";
       div.id = "mapLegendRowSymbolDiv" + i; 
       tble.appendChild(行);
       row.appendChild(单元格);
       cell.appendChild(div);
       //图层标题
       cell = document.createElement("td");      
       tble.appendChild(行);
       row.appendChild(单元格);
       cell.innerHTML=legendRows[i].title; 
   }
   
   //追加表
   $( "#legendText" ).empty();
   $( "#legendText" ).append(tble);
   

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

   //循环图例行并插入地图
   var 范围 = [0, 0, 32, 32];
   var 投影 = new ol.proj.Projection({
       代码: 'xkcd-image',
       单位：“像素”，
       范围：范围
   });
   for (i = 0; i < legendRows.length; i++) { 
       //目标div
       var targetDiv = document.getElementById("mapLegendRowSymbolDiv" + i);
       //图标层
       var sourceLegend = new ol.source.Vector({wrapX: false});
       var vectorLegend = new ol.layer.Vector({
           来源：来源传奇，
           样式： legendRows[i].style
       });
       //地图
       var mapLegend = new ol.Map({
           控制：[]，
           图层：[
               新的 ol.layer.Image({
                   来源： new ol.source.ImageStatic({
                       投影：投影，
                       图像范围：范围
                   })
               }),
               矢量图例
           ],
           目标：targetDiv，
           视图：新的 ol.View({
               投影：投影，
               中心：ol.extent.getCenter(extent),
               变焦：2，
               最大缩放：2
           })
       });
       //图标功能取决于类型
       变种几何；
       if(legendRows[i].geomType=='点'){
           geom = new ol.geom.Point([16,16]);
       }else if(legendRows[i].geomType=='多边形'){
           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]);
       }别的{
           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({
           几何：几何
       });
       vectorLegend.getSource().addFeature(feature);
   }   
   

通过此，我能够创建和更新单独的图例对话框 (jQuery UI)：

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

Answer 2

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

有趣的链接：

http://geoext.org/lib/GeoExt/widgets/LegendPanel.html< /a>

http://www.mail-archive. com/[电子邮件受保护]/msg01318.html

Answer 3

作为一种选择，您可以创建具有与 OL3 样式相同属性的 SVG 元素。下面是圆形样式的示例（您还需要类似的方法以及其他类型）：

getIconLegend = function(style) {
    style = style.getImage();
    var radius = style.getRadius();
    var strokeWidth = style.getStroke().getWidth();
    var dx = radius + strokeWidth;

    var svgElem = $('<svg />')
        .attr({
            width: dx * 2,
            height: dx * 2
        });

    $('<circle />')
        .attr({
            cx: dx,
            cy: dx,
            r: radius,
            stroke: style.getStroke().getColor(),
            'stroke-width': strokeWidth,
            fill: style.getFill().getColor()
        })
        .appendTo(svgElem);

    // Convert DOM object to string to overcome from some SVG manipulation related oddities
    return $('<div>').append(svgElem).html();
}

由于使用 jQuery 进行的 SVG 操作与 HTML 元素有些不同，因此我将对象转换为字符串作为回报。详细信息可以从 jquery's append not work with svg element?

稍后 找到，您可以将图例图标粘贴到 HTML 中

$('#legendText').prepend($(getIconLegend(yourFeature.getStyle())));

Answer 4

使用普通 OpenLayers 最接近您想要的效果是使用 WMS 服务而不是 WFS 或任何用于获取功能的方法。 WMS 具有请求类型 GetLegendGraphic，顾名思义，它允许您动态获取显示应用于图层的样式的图像。

Answer 5

可以制作半手图例：

对于WMS功能
使用 Geoserver，GetLegendGraphic 可以生成每个 WMS 图层的图像图例

对于 WFS 功能
对于每个图层，可以根据其样式 属性：

• Fill 的颜色（例如：style.getFill().getColor()）
• Stroke 的属性（例如：style.getStroke().getColor()）
• Image 的图像，这是一个 HTMLElement，具体取决于样式（例如： style.getImage().getImage())