javascript - 向 openlayers map 添加文本的最简单示例？

Question

我想在特定纬度和经度处向 OpenLayers map 添加文本标签。

我一直在努力寻找一个不涉及从文件等中提取数据的简洁示例。我已经能够向我的 map 和内容添加多边形、图标和各种鼠标事件；但出于某种原因，我似乎无法只添加一些简单的文字。

请问有人可以做我的星期五，并发布一个简单的例子吗？

Answer 1

您可以使用仅包含文本(无几何)的样式创建特征。

var labelFeature = new Feature({
  geometry: new Point([0, 0]),
});

var labelonly = new Style({
    text: new Text({
        font: '14px sans-serif',
        text: 'hello',
        fill: new Fill({
            color: 'black'
        }),
    })
});


labelFeature.setStyle(labelonly);

var vectorSource = new VectorSource({
  features: [labelFeature]
});

var vectorLayer = new VectorLayer({
  source: vectorSource
});


var map = new Map({
  layers: [vectorLayer],
  target: document.getElementById('map'),
  view: new View({
    center: [0, 0],
    zoom: 3
  })
});