Openlayers标签

Question

我是Openlayers的新手，我无法正确添加代码以添加标签。

下面的js代码用于将功能信息显示为仪表板显示。我改编自https://plnkr.co/edit/GvdVNE?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview

的弹出代码

我正在尝试添加标签，并且尝试将get.text作为styleFunction的一部分添加，我也尝试添加一个新的样式变量，但是我正在做的任何事情都没有用。如果有人能指出正确的方向，我将不胜感激。

谢谢

var styles = {
    'Point': [new ol.style.Style({
        image: new ol.style.Circle({
            radius: 8,
            fill: new ol.style.Fill({
                color: [255, 255, 255, 0.3]
            }),
            stroke: new ol.style.Stroke({color: '#cb1d1d', width: 2})
        })
    })],
    
};

var styleFunction = function(feature, resolution) {
  return styles[feature.getGeometry().getType()];
};


var olview = new ol.View({
    center: ol.proj.fromLonLat([-7.75035165, 54.42404655], "EPSG:3857"),
    zoom: 11,
    minZoom: 2,
    maxZoom: 20
});


var osm = new ol.layer.Tile(
  {    
  source: new ol.source.OSM(),
  title: 'Open Street Map',
  type: 'base'
  }
  );

var erne_wfs = new ol.layer.Vector(
{
source: new ol.source.Vector(
{
format: new ol.format.GeoJSON(),
url: 'http://localhost/geoserver/ECN/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=le&' +
'outputFormat=application/json&srsname=EPSG:3857'
}
),
style: styleFunction,
}
);

var map = new ol.Map({
    target: document.getElementById('mymap'),
    layers: [osm, erne_wfs],
	view: olview,
controls: [ new ol.control.ScaleLine(),
			new ol.control.Zoom(),
			]
});

/**
 * Popup
 **/
var
    //container = document.getElementById('popup'),
    temp_element = document.getElementById('temp'),
	 chla_element = document.getElementById('chla'),
	 tp_element = document.getElementById('tp'),
	 ton_element = document.getElementById('ton'),
	 image_element = document.getElementById('image'),
    closer = document.getElementById('popup-closer');

closer.onclick = function() {
   
    return false;
};



map.on('click', function(evt){
    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });
    if (feature) {
        var geometry = feature.getGeometry();
        var coord = geometry.getCoordinates();
        
 var temp = '<h3>' + feature.get('temp') + '</h3>';
		
        
        temp_element.innerHTML = temp;
		
 var chla = '<h3>' + feature.get('chla')  + '</h3>';
	   
        
        chla_element.innerHTML = chla;    
  
var tp = '<h3>' + feature.get('tp')  + '</h3>';
	   
        
        tp_element.innerHTML = tp;  

var ton = '<h3>' + feature.get('ton')  + '</h3>';
	           
        ton_element.innerHTML = ton;
		
        console.info(feature.getProperties());

var image = '<h4>' +  feature.get('site_code')  + '  -  ';
		image += '  ' + feature.get('waterbody') + '  ';
		image += '  ' + feature.get('date') + '</h4>';
		image +=  "Lat " + feature.get('latitude') + ', Lon ' + feature.get('longitude'); 
        image +=   feature.get('image');
		
        
        image_element.innerHTML = image;    
        
        console.info(feature.getProperties());
    }
});
map.on('pointermove', function(e) {
    if (e.dragging) return;
       
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);
    
    map.getTarget().style.cursor = hit ? 'pointer' : '';
});

Answer 1

这将在您的示例中显示功能名称

var styles = {
    'Point': [new ol.style.Style({
        image: new ol.style.Circle({
            radius: 8,
            fill: new ol.style.Fill({
                color: [255, 255, 255, 0.3]
            }),
            stroke: new ol.style.Stroke({color: '#cb1d1d', width: 2})
        }),
        text: new ol.style.Text({
            font: '18px sans-serif',
            fill: new ol.style.Fill({
                color: [0, 0, 0, 1]
            }),
            textBaseline: 'top'
        })
    })],

};

var styleFunction = function(feature, resolution) {
    var style = styles[feature.getGeometry().getType()];
    style[0].getText().setText(feature.get('name'));
    return style;
};