[英]Openlayers 3 Add Movable Marker with Icon and Text
在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);
但我想添加> 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
});
但似乎不允许这样做。 另一个自然选择可能是将html元素附加到样式,以便我们可以渲染任何我们想要的东西,但似乎没有办法做到这一点。
那么,如何创建具有文本标签的标记?
如本例所示,解决方案是使用样式列表而不是单个样式。
在这种情况下,它非常简单:
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'
})
})
})
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.