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

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

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

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

最佳答案

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

所以我正在做的是:

  • 循环遍历 map 层并选择矢量类型
    if(lyr instanceof ol.layer.Vector)
  • 检查使用的样式类型并存储在数组中
    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');
    }
    
  • 还存储几何类型
    //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";
        }
    }
    
  • 遍历存储的图例行并构建所需的 HTML 元素,通常是“迷你 map ”的 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);
    
  • 一旦 HTML 元素被添加到页面,启动 map 并插入假特征以显示符号
    //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):

    openlayers - 创建 map 图例以匹配 OpenLayers.Style-LMLPHP

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

    关于openlayers - 创建 map 图例以匹配 OpenLayers.Style,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5267554/

    10-13 02:34