javascript - 开放层 3 : add text label to feature

标签 javascript openlayers-3

我在这里设置了电流:fully functional fiddle example虽然我已经设法缩放到每个多边形要素,但我还想在每个要素上显示一个集中的文本标签……在 get_fields 方法中找到的 field_title 变量。我不知道该怎么做,我所有的谷歌搜索都出现了这篇文章:http://openlayers.org/en/v3.3.0/examples/vector-labels.html由于我对 OL 有点陌生,所以我觉得这完全令人困惑!

最佳答案

要向 ol.Feature 添加文本,您需要将描述存储在功能中,并且 set a style那是一个style function (将从功能中获取描述并显示它):

field_polygon.set('description', field_title);
field_polygon.setStyle(styleFunction);

function styleFunction() {
  return [
    new ol.style.Style({
        fill: new ol.style.Fill({
        color: 'rgba(255,255,255,0.4)'
      }),
      stroke: new ol.style.Stroke({
        color: '#3399CC',
        width: 1.25
      }),
      text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        fill: new ol.style.Fill({ color: '#000' }),
        stroke: new ol.style.Stroke({
          color: '#fff', width: 2
        }),
        // get the text from the feature - `this` is ol.Feature
        // and show only under certain resolution
        text: map.getView().getZoom() > 12 ? this.get('description') : ''
      })
    })
  ];
}

Your fiddle .

关于javascript - 开放层 3 : add text label to feature,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39006597/

相关文章:

javascript - 开放层 3 : Drawing a polygon feature over the dateline

javascript - OpenLayers 3 - 在 map 上显示文本,文本大小相对于缩放

javascript - 错误: Not allowed element when it is in JS

javascript - 显示来自 REST API 的用户列表并使用 React 进行过滤

javascript - 使用 javascript 将 css 样式应用于 openlayers3 中的图层

javascript - 风格矩形的最小尺寸

postgresql - geoserver wfs-t 是只读异常

javascript - 不能在 #header 中的 HTML/CSS 模板中使用 onClick

javascript - android XWalkView 内容宽度

javascript - jQuery 修改子元素