Question

我不是Web开发方面的专家，但我对openlayers感到困惑：-（

我要编辑一些功能（隐藏/显示和/或更改图标）

但是我不知道怎么做！

我正在寻找什么：我如何访问功能（可能带有“ updateFilter”功能）？

以及我的代码和这两个示例之间的区别是什么

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

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

一些代码（所有内容都在一个脚本标签中）：

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.M.b);
					
					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

您应该浏览更多文档。

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

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

1 个答案: