開放層標簽

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