我对OpenLayers 5.3的标记符号进行了一些研究,但很遗憾,我无法让文本正常工作。我将文本插入到要素对象中,标记符号及其图像可见且按预期工作,但没有显示任何文本。
以下是我的代码:
以下是我的代码:
var map;
var view;
var vectorSource;
var vectorLayer;
var ownMarker = null;
function drawMap() {
var coordinate = [13.4, 52.5077286];
vectorSource = new ol.source.Vector({});
vectorLayer = new ol.layer.Vector({
source: vectorSource
});
view = new ol.View({
center: ol.proj.fromLonLat(coordinate),
zoom: 12,
maxZoom: 17,
minZoom: 7
});
map = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
}), vectorLayer, ],
target: document.getElementById('map'),
controls: ol.control.defaults(),
view: view
});
var marker;
this.setOwnMarker = function(coordinate) {
marker = new ol.Feature(
new ol.geom.Point(ol.proj.fromLonLat(coordinate))
);
marker.setStyle(iconRed);
ownMarker = marker;
vectorSource.addFeature(marker);
}
this.addMarker = function(lon, lat) {
var mar = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
text: new ol.style.Text({
text: "Test text",
scale: 1.2,
fill: new ol.style.Fill({
color: "#fff"
}),
stroke: new ol.style.Stroke({
color: "0",
width: 3
})
})
});
var iconBlue = new ol.style.Style({
image: new ol.style.Icon({
anchor: [12, 40],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
opacity: 1,
src: '../../images/marker_blue.png'
})
});
mar.setStyle(iconBlue);
vectorSource.addFeature(mar);
}
return this;
}