我使用自定义图标(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]
})
});
答案 0 :(得分:2)
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://openlayers.org/en/master/examples/vector-labels.html