Question

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

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

怎么做？

Answer 1

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

labelAlign
labelXOffset //画布渲染器不支持！
labelYOffset //画布渲染器不支持！ *

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

Answer 2

我以不同的方式定义样式地图。

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

通过此示例可以帮助您http://jsfiddle.net/winsent/ZkMzG/

Answer 3

这将有效（带有奖励的实际代码片段，当群集中少于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
            })
            })
        });

Answer 4

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

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

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

带标签的Openlayer外部图形

4 个答案: