3

我需要添加一个图标并在图像的底部添加一个文本。我怎样才能做到这一点 ？

我尝试使用这种样式，但文本呈现在图像中间。

var vector = new ol.layer.Vector({
      source: new ol.source.Vector({
        projection: ol.proj.get('EPSG:4326')
      }),
      style: new ol.style.Style({rules: [
        new ol.style.Rule({
          symbolizers: [
            new ol.style.Icon({
                url: 'http://127.0.0.1/app/img/imageTest.png',
                opacity: 0.75,
                width: 12,
                height: 12
            }),
            new ol.style.Text({
                color: '#000',
                text: ol.expr.parse('i'),
                fontFamily: 'Calibri,sans-serif',
                fontSize: 12
            })
          ]
        })
      ]})
    });
map.addLayer(vector);

var f = new ol.Feature({
    'i': 1,
    'size': 20
});
f.setGeometry( new ol.geom.Point([lon,lat]) );

var features = new Array();
features.push(f);
vector.addFeatures(features);
4

2 回答 2

2

我将此代码与 Canvas 一起使用，它适用于 OL v3.0.0-beta.5：

 function getTextStyle(text, offsetX) {
    return new ol.style.Text({
      fill : new ol.style.Fill({
        color : '#330'
      }),
      stroke : new ol.style.Stroke({
        color : '#fff',
        width : 4
      }),
      text : text,
      font : '12px Verdana',
      offsetX : offsetX ? offsetX : 0,
      offsetY : 12
    });
  }

另请参阅现在的“实验性”文档： http: //ol3js.org/en/master/apidoc/ol.style.Text.html（编辑：它在 2014 年是实验性的......）

于 2014-06-27T15:47:26.373 回答
0

您需要使用“labelYOffset”移动标签。

如果您的图形高 20 像素，请尝试将其向下移动 12 像素

        new ol.style.Text({
            color: '#000',
            fontFamily: 'Calibri,sans-serif',
            fontSize: 12,
            label:"${NAME}",
            labelYOffset: -12
        })

“label”参数取自外部文件中的 NAME 字段。标签对齐参数通常用于样式或样式映射。您需要对此进行调整以反映数据的来源。
请注意，Canvas 渲染器不支持 lab​​elXOffset 和 labelYoffset。因此，您需要确保您的图层使用 SVG 才能正常工作。例如。

var point = new OpenLayers.Layer.Vector("GeoJSON", {
    strategies: [new OpenLayers.Strategy.Fixed()],
    styleMap: mystyle,
    protocol: new OpenLayers.Protocol.HTTP({
        url: "kml/my.geojson",
        format: new OpenLayers.Format.GeoJSON()
    }),
    renderers: ["SVG"]
});
于 2013-08-30T00:43:42.447 回答