3

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

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" 
        }
    })            
]);

但是标签显示在图像下方，标签在图标下方

像空的，但我想在像这样的图形上添加标签-图标顶部的标签

怎么做？

4

4 回答 4

3

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

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

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

于 2013-04-30T12:41:29.630 回答
0

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

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

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

于 2012-10-09T09:14:08.037 回答
0

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

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

 var layer = new OpenLayers.Layer.Vector("Features", {
    renderers: ['SVG'],
 ...
于 2013-04-12T08:58:55.250 回答
0

这将起作用（带有奖励的真实代码片段，当集群中少于 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
            })
            })
        });
于 2013-03-09T20:23:28.817 回答