javascript Openlayers 3 添加带有图标和文本的可移动标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26519613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Openlayers 3 Add Movable Marker with Icon and Text
提问by MattF
In OL3, I've succeeded at making a map on which there are movable markers:
在 OL3 中，我成功制作了一张地图，上面有可移动的标记：
var mapVectorSource = new ol.source.Vector({
features: []
});
var mapVectorLayer = new ol.layer.Vector({
source: mapVectorSource
});
map.addLayer(mapVectorLayer);
function makeMovable(feature) {
var modify = new ol.interaction.Modify({
features: new ol.Collection([feature])
});
feature.on('change',function() {
console.log('Feature Moved To:' + this.getGeometry().getCoordinates());
}, feature);
return modify;
}
function createMarker(location, style){
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(location)
});
iconFeature.setStyle(style);
return iconFeature
}
iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: '/static/img/marker-icon.png',
}))
});
var marker = createMarker(ol.proj.transform([38, 50], 'EPSG:4326', 'EPSG:3857'), iconStyle);
mapVectorSource.addFeature(marker);
var modifyInteraction = makeMovable(marker);
map.addInteraction(modifyInteraction);
But I want to add >10 markers, so I need to label them with numbers or text. Is there any way to add text to the overlay? If I inspect iconStyle, I see that it has a getText()function, but that function always just returns undefinedand there is no accompanying setText()function. It would also seem natural to define it like this:
但我想添加 >10 个标记，所以我需要用数字或文本标记它们。有没有办法将文本添加到叠加层？如果我检查iconStyle，我会看到它有一个getText()函数，但该函数总是只返回undefined并且没有伴随的setText()函数。像这样定义它似乎也很自然：
iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: '/static/img/marker-icon.png',
})),
text: "Hello, Marker" // <- operative line
});
But that doesn't seem to be allowed. Another natural option might be to attach an html element to the style so that we can render anything we want, but there doesn't seem to be a way to do that.
但这似乎是不允许的。另一个自然的选择可能是将 html 元素附加到样式，以便我们可以呈现我们想要的任何内容，但似乎没有办法做到这一点。
So, how do I create a marker that has a text label?
那么，如何创建具有文本标签的标记？
回答by MattF
As seen in thisexample, the solution is to use a list of styles instead of just a single style.
如本例所示，解决方案是使用样式列表而不是单个样式。
In this case it's very simple:
在这种情况下，它非常简单：
iconStyle = [
new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: '/static/img/marker-icon.png',
}))
}),
new ol.style.Style({
text: new ol.style.Text({
text: "Wow such label",
offsetY: -25,
fill: new ol.style.Fill({
color: '#fff'
})
})
})
];
