7

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

我在 OpenLayers 中看不到任何可以让我使用这些样式绘制自己的图例的东西。一切似乎都指向假设的地图服务器，它正在向我发送数据，而我没有。

目前看来我必须绘制一些样本点/区域并通过屏幕抓取它们来制作我自己的图例。有没有更好的方法可以直接基于样式来做到这一点，所以当样式发生变化时我不必重新生成图像？

更新 我有一个很好的答案，它依赖于 GeoExt（以及 ExtJS），我仍然想听听是否有人有 jQuery 兼容的答案。特别是如果它是纯 Javascript 和 OpenLayers。

4

5 回答 5

5

我能够使用 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）：

在此处输入图像描述

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

于 2017-05-12T14:32:49.070 回答
3

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

有趣的链接：

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

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

于 2011-03-11T20:34:47.190 回答
2

作为一种选择，您可以创建具有与 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 的 append not working with svg element 中找到详细信息？

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

$('#legendText').prepend($(getIconLegend(yourFeature.getStyle())));
于 2016-01-18T10:42:47.817 回答
0

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

于 2011-03-16T17:55:39.340 回答
0

可以制作一个半手传奇：

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

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

  • 填充颜​​色（例如：style.getFill().getColor()）
  • Stroke 的属性（例如：style.getStroke().getColor()）
  • 图像的图像，它是一个HTMLElement，取决于样式（例如style.getImage().getImage()：）
于 2019-12-04T17:03:25.220 回答