Question

我使用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;
}

Answer 1

  this.addMarker = function(lon, lat) {
    var mar = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
    });
    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'
      }),
      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
        })
      })
    });
    mar.setStyle(iconBlue);
    vectorSource.addFeature(mar);
  }

向标记添加文本（功能）

1 个答案: