OpenLayers - 编辑功能（隐藏/显示，更改图标）

Question

I´m not a pro in webdevelopment, but i´m getting stuck with openlayers :-(

I want to edit some features (hide/show and/or change the icon)

But i dont know how!

What i am looking for: how i can i access the features (maybe with the function "updateFilter")?

and what is the difference between my code, and these two examples:

https://openlayers.org/en/latest/examples/translate-features.html

https://openlayers.org/en/v4.6.5/examples/translate-features.html

some code (everything is in one script-tag):

 var vectorSource = new ol.source.Vector({ }); // Style var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ //anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png' //size: [40, 40] // the scale factor scale: 0.3 })) }); //add a feature: var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([12.12,12.12], 'EPSG:4326', 'EPSG:3857')), type:'Point', Name: 'Test Feature', Description: 'TEST TEST', TESTID:0 }); iconFeature.setStyle(iconStyle); vectorSource.addFeature(iconFeature); var vectorLayer = new ol.layer.Vector({ source: vectorSource; }); var rasterLayer = new ol.layer.Tile({ source: new ol.source.OSM(); }); /** * Elements that make up the popup. */ var container = document.getElementById('popup'); var content = document.getElementById('popup-content'); var closer = document.getElementById('popup-closer'); //Pan duration var overlay = new ol.Overlay({ element: container, autoPan: true, autoPanAnimation: { duration: 1000 } }); /** ClickHandler **/ closer.onclick = function() { overlay.setPosition(undefined); closer.blur(); return false; }; var centerPos = [12,12]; var map = new ol.Map({ layers: [rasterLayer, vectorLayer], overlays: [overlay ], target: document.getElementById('map'), view: new ol.View({ center: ol.proj.transform(centerPos, 'EPSG:4326', 'EPSG:3857'), zoom: 12, minZoom:11, maxZoom:18 }) }); // display popup on click map.on('singleclick', function(evt) { var feature = map.forEachFeatureAtPixel( evt.pixel,function(feature) { return feature; } ); if (feature) { var coordinate = evt.coordinate; content.innerHTML = "<H2>" + feature.get('Name') + "</H2>" + "<br>" + feature.get('Description') + "<br>" + ' <button onclick="overlay.setPosition(undefined);closer.blur();return false;">Close Window</button> '; overlay.setPosition(coordinate); } else { overlay.setPosition(undefined);closer.blur();return false; } }); map.on('pointermove', function(e) { if (e.dragging) {$(element).popover('destroy'); return; } var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); map.getTarget().style.cursor = hit ? 'pointer' : ''; }); var updateFunc = document.getElementById('KartenZugriff'); updateFunc.addEventListener('click', function(){updateFilter(map)}); function updateFilter(map){ alert("Test start"); var features = vectorSource.getFeatures(); //var testitem = vectorLayer.GetFeatureBy('SchulID',6); console.log(features); for (var i in features) { var feature = features[i]; var test = ol.getFeaturebyID(); if(feature.N.SchulName ==='Some Name'){ console.log(feature.getID()); console.log("deleting.."); rasterLayer.removeFeatures(rasterLayer.getFeatureById(6)); console.log("...deleted?"); console.log(style.Mb); feature.setStyle(style); alert("end"); } }; }; 

 <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css"> <div id="map" class="map"></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> <button type="button" id="KartenZugriff">ACTION!</button> 

Answer 1

You should explore the documentation more.

const array_of_features = source.getFeatures();
const single_feature = source.getFeatureById('id');
const feature_props = single_feature.getProperties();

// update style of feature
single_feature.setStyle(new_style);

// remove feature
source.removeFeature(single_feature);