OpenLayers 6 добавляет метки или текст создателя

Только начал использовать OL (v6), и я застрял в добавлении надписей к маркерам на карте. Есть ли простой способ показать метку / текст рядом с маркером? (например, point1 и point2 в этом примере). Ценю вашу помощь.

Вот базовый код jsfiddle, который я использую для добавления маркеров:

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
  })
});

openlayers openlayers-6
person cflayer    schedule 25.10.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Связанный вопрос: Добавьте текст рядом с точкой "Открыть слой"

Добавьте стиль метки к каждому объекту. Получите имя функции (или другого свойства) для использования в качестве метки. Ваш код изменен:

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];

доказательство концепции скрипта

снимок экрана полученной карты

фрагмент кода:

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>

person geocodezip    schedule 25.10.2020