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

如何解决OpenLayers 6添加制造商标签或文本

刚开始使用OL（v6），我被困在向地图中的标记添加标签上。有什么简单的方法可以在标记附近显示标签/文本？ （例如，在此示例中为“ 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
  })
});

解决方法

相关问题：Add a Text next to the point Open Layer

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

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,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>