Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/422.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript openlayers功能标签未显示_Javascript_Openlayers 3 - Fatal编程技术网

Javascript openlayers功能标签未显示

Javascript openlayers功能标签未显示,javascript,openlayers-3,Javascript,Openlayers 3,我正在为功能使用自定义图标(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:"adsfasd

我正在为功能使用自定义图标(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]
    })
});
必须将作为参数
text
传递给:


另请参见此示例:

更新您的脚本-我的脚本基于此示例非常感谢!我无法从他们的演示中得出结论,这对于标签演示来说有点过分了。。
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
  })
});