Openlayer 带标签的外部图形答案

【问题标题】：Openlayer external graphics with labelOpenlayer 带标签的外部图形
【发布时间】：2012-09-15 11:39:42
【问题描述】：

我想在图像上显示计数，我添加了这样的层：

var vector = new OpenLayers.Layer.Vector("Test", {
    displayInLayerSwitcher: false
});

vector.styleMap.styles["default"].addRules([
    new OpenLayers.Rule({           
        "maxScaleDenominator": 136495,     
        symbolizer: {
            externalGraphic: "../funnel/ico/blank.png",
                graphicWidth: 20,
                graphicHeight: 20,
        graphicOpacity:1,
        label: "${count}",
            labelOutlineWidth: 1,
            fontColor: "#ffffff",
            fontOpacity: 0.8,
            fontSize: "12px" 
        }
    })            
]);

但是标签显示在图片下方，label below icon

像空一样，但我想在这样的图形上添加标签-label on top of icon

怎么做？

【问题讨论】：

@DanielNova 没错，但这只是为了获得积分吗？ :)
你好@DanielNova，首先我很抱歉，我为我的错误道歉......谢谢...... :)

标签： javascript openlayers

【解决方案1】：

您可以使用以下样式属性（使用 StyleMap）设置标签位置：

标签对齐
labelXOffset // 画布渲染器不支持！
labelYOffset // 画布渲染器不支持！ *

在此处查看符号器属性：http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html

【讨论】：

【解决方案2】：

我对样式图的定义不同。

var style = new OpenLayers.Style({
   ...
});
...
var vector = new OpenLayers.Layer.Vector('Test_layer', {
    styleMap: new OpenLayers.StyleMap(style)
});

可以通过这个例子帮助你http://jsfiddle.net/winsent/ZkMzG/

【讨论】：

【解决方案3】：

这会起作用（真正的代码 sn-p 有一个奖励，当集群中少于 3 个特征时去集群）：

var pointStyle2 = new OpenLayers.Style({
    externalGraphic: "http://www.yourdomain.com/img/image.png",
    //graphicYOffset: -25, 
    pointRadius: 15,
    'label': "${label}"
  }, {
    context: {
      label: function(feature) {
    // clustered features count or blank if feature is not a cluster
    return feature.cluster ? feature.cluster.length : "";  
      }
    }
});

var styleMapClusterClient = new OpenLayers.StyleMap({
  'default': pointStyle2,
});


//create refresher
var refresh = new OpenLayers.Strategy.Refresh({force: true, active: true});

var clusterStrategyClient = new OpenLayers.Strategy.Cluster({ distance: 35, threshold: 3 });
    var urlKMLClient = 'Client.kml'; 
    var layerKMLClient = new OpenLayers.Layer.Vector("Clients", {
                styleMap: styleMapClusterClient,
            strategies: [new OpenLayers.Strategy.Fixed(), clusterStrategyClient, refresh],
            protocol: new OpenLayers.Protocol.HTTP({
            url: urlKMLClient,
            format: new OpenLayers.Format.KML({
                extractStyles: true, 
                extractAttributes: true,
                maxDepth: 2
            })
            })
        });

【讨论】：

【解决方案4】：

有同样的问题并通过将渲染器设置为 SVG 解决了 - 根据文档 http://dev.openlayers.org/apidocs/files/OpenLayers/Feature/Vector-js.html

label {String} 可选标签的文本。对于使用的浏览器画布渲染器，这需要 fillText 或 mozDrawText 可用。

 var layer = new OpenLayers.Layer.Vector("Features", {
    renderers: ['SVG'],
 ...

【讨论】：