Ad
Openlayers: How Can I Remove A Feature?
I'm trying to run a script base on the Openlayers when a user clicks on a map add a pointer or marker. I've already done this part but I have a little problem here.
when users click on the map the older pointers will steel there but I want to delete all pointer and try to keep just the recently clicked point by the user.
Please help me with this problem. and here is my code: [openlayers 3]
<script>
var
vectorSource = new ol.source.Vector(),
vectorLayer = new ol.layer.Vector({
source: vectorSource
}),
olView = new ol.View({
center: ol.proj.fromLonLat([48.4831, 36.6681]),
zoom: 8,
minZoom: 2,
maxZoom: 20
}),
map = new ol.Map({
target: document.getElementById('map'),
view: olView,
layers: [
new ol.layer.Tile({
style: 'Aerial',
source: new ol.source.OSM()
}),
vectorLayer
]
})
;
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'https://openlayers.org/en/v3.8.2/examples/data/icon.png'
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#000' }),
stroke: new ol.style.Stroke({
color: '#fff', width: 2
}),
text: 'Some text'
})
});
map.on('click', function(evt){
var feature = new ol.Feature(
new ol.geom.Point(evt.coordinate)
);
var lon = ol.proj.toLonLat(evt.coordinate)[0];
var lat = ol.proj.toLonLat(evt.coordinate)[1];
console.info('longitude is: ' + lon + 'latitude is: ' + lat);
feature.setStyle(iconStyle);
vectorSource.addFeature(feature);
});
</script>
Ad
Answer
Use vectorSource.clear();
before adding the feature:
vectorSource.clear();
vectorSource.addFeature(feature);
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad