javascript - openlayers 功能标签未显示

Question

我正在使用自定义图标 (png) 来显示功能，但无法显示标签。正如您所看到的，我已将其添加到各处以使其正常工作？请问有人能发现我哪里出错了吗？

非常感谢

var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([0.0488567 - 0.003, -0.02275 + 0.00115 ], 'EPSG:4326', 'EPSG:3857')),
    label:"adsfasdf",
    name: 'Null Island',
    population: 4000,
    rainfall: 500,

});
iconFeature.attributes = {label: "sadfd"}
//new OpenLayers.LonLat(51.5, -0.117)
var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'assets/pins/pin-blue.png',
        label: "kasds"
    }))
});
iconFeature.setStyle(iconStyle);

var iconFeature2 = new ol.Feature({
    geometry: new ol.geom.Point([5389, -1282]),
    name: 'Null Island2',
    population: 4000,
    rainfall: 500,
});
var iconStyle2 = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'assets/pins/pin-blue.png',
        label: "kasds",
        fontSize: "12px",
        fontFamily: "Courier New, monospace"
    }))
});
iconFeature2.setStyle(iconStyle2);

var vectorSource = new ol.source.Vector({
    features: [iconFeature,iconFeature2]
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});


var imgWidth = 12241;// 32241;
var imgHeight = 5768;//15191;
var url = 'assets/map/';
var crossOrigin = 'anonymous';
var imgCenter = [imgWidth / 2, - imgHeight / 2];
var proj = new ol.proj.Projection({
    code: 'ZOOMIFY',
    units: 'pixels',
    extent: [0, 0, imgWidth, imgHeight]
});

var source = new ol.source.Zoomify({
    url: url,
    size: [imgWidth, imgHeight],
    crossOrigin: crossOrigin
});

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: source
        }),
        vectorLayer
    ],
    renderer: common.getRendererFromQueryString(),
    target: 'map',
    view: new ol.View({
        projection: proj,
        center: imgCenter,
        zoom: 3,
        minZoom: 3,
        maxZoom: 5,
        extent: [0, -imgHeight, imgWidth, 0]
    })
});

Answer 1

text style必须作为参数 text 传递给 ol.style.Style :

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    ...
  })),
  text: new ol.style.Text({
      text: 'The label',
      fill: new ol.style.Fill({color: 'black'}),
      stroke: new ol.style.Stroke({color: 'yellow', width: 1}),
      offsetX: -20,
      offsetY: 20
  })
});

http://jsfiddle.net/54a8pktt/

另请参阅此示例:http://openlayers.org/en/master/examples/vector-labels.html