OpenLayers 6 添加制造商标签或文本

Question

刚开始使用 OL (v6)，我一直在为地图中的标记添加标签。有什么简单的方法可以在标记附近显示 label/text 吗？（例如本例中的 'point1' 和 'point2'）。感谢您的帮助。

这是我用来添加标记的基本 jsfiddle code：

const p1 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-115.20, 38.])),
  name: 'uno',
});

const p2 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-115.22, 38.01])),
  name: 'zero',
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),

    new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [p1, p2]
      }),
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'https://icon-library.net/images/google-maps-gps-icon/google-maps-gps-icon-14.jpg',
          scale: 0.1
        })
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-115.21, 38]),
    zoom: 11
  })
});

Answer 1

相关问题：

为每个特征添加标签样式。获取要用作标签的要素名称（或其他属性）。您修改的代码：

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'https://icon-library.net/images/google-maps-gps-icon/google-maps-gps-icon-14.jpg',
    scale: 0.1
  })

});
var labelStyle = new ol.style.Style({
  text: new ol.style.Text({
    font: '12px Calibri,sans-serif',
    overflow: true,
    fill: new ol.style.Fill({
      color: '#000'
    }),
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
    }),
    offsetY: -12
  })
});
var style = [iconStyle, labelStyle];

proof of concept fiddle

代码片段：

const p1 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-115.20, 38.])),
  name: 'uno',
});

const p2 = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-115.22, 38.01])),
  name: 'zero',
});
var iconStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'https://icon-library.net/images/google-maps-gps-icon/google-maps-gps-icon-14.jpg',
    scale: 0.1
  })

});
var labelStyle = new ol.style.Style({
  text: new ol.style.Text({
    font: '12px Calibri,sans-serif',
    overflow: true,
    fill: new ol.style.Fill({
      color: '#000'
    }),
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
    }),
    offsetY: -12
  })
});
var style = [iconStyle, labelStyle];
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),

    new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [p1, p2]
      }),
      style: function(feature) {
        labelStyle.getText().setText(feature.get('name'));
        return style;
      }
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-115.21, 38]),
    zoom: 11
  })
});

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.map {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<div id="map" class="map"></div>

OpenLayers 6 添加制造商标签或文本

OpenLayers 6 add maker labels or text

openlayers

openlayers-6