I used angular-openlayers-directive from this link: https://github.com/tombatossals/angular-openlayers-directive
I want to achieve this effect: http://tombatossals.github.io/angular-openlayers-directive/examples/059-layer-clustering.html
Unfortunately, only a map with no round points is displayed in my application. My code is the same as in the github example.
My code:
function createPointStyle(color, text) {
var options = {
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: color,
opacity: 0.6
}),
stroke: new ol.style.Stroke({
color: 'white',
opacity: 0.4
})
})
};
if (text) {
options.text = new ol.style.Text({
text: text,
fill: new ol.style.Fill({
color: 'white'
})
});
}
return new ol.style.Style(options);
}
function createIconStyle() {
return new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 0.90,
src: 'resource/img/mapin.png'
})
});
}
function getStyle(feature) {
// Take car we use clustering, thus possibly have multiple features in one
var features = feature.get('features');
var style = null;
// Icon base style ?
if ($scope.icon) {
style = createIconStyle();
}
// Circle + txt base style
// Add number of clustered item in this case
else if (features && features.length > 1) {
style = createPointStyle('blue', features.length.toFixed());
} else {
style = createPointStyle('blue');
}
return [style];
}
angular.extend($scope, {
center: {
lat: 43.88,
lon: 7.57,
zoom: 2
},
clusters: {
clustering: true,
clusteringDistance: 40,
source: {
type: 'KML',
projection: 'EPSG:3857',
url: 'resource/kml/earthquakes.kml'
},
style: getStyle
},
// Default to circles
icon: false
});
Someone knows why it does not work?
Related
I am Using Open layers to publish a Map. But I can't figure out the way to Make the map size dynamic according to Screen Size. As the map remains same on every screen irrespective of the screen size. I also tried map.updatesize(). But that is not working too.
My Code is
layer = new ol.layer.Tile({
title: 'Basemap',
baseLayer: true,
visible: true,
source: new ol.source.TileWMS({
url: 'http://mlinfomaps.in/geoserver/wms',
params: { 'LAYERS': 'MSSDS_WS:MSSDS_BASEMAP', 'TILED': true },
serverType: 'geoserver',
// Countries have transparency, so do not fade tiles:
transition: 0,
crossOrigin: "anonymous"
})
});
var mousePositionControl = new ol.control.MousePosition({
coordinateFormat: ol.coordinate.createStringXY(4),
projection: 'EPSG:4326',
// comment the following two lines to have the mouse position
// be placed within the map.
//className: 'custom-mouse-position',
target: document.getElementById('mouse-position'),
//undefinedHTML: ' '
});
var projection = new ol.proj.Projection({
//code: 'EPSG: 4326', // *code says: 5261 ...try to see if this is right
//extent: [71.6142, 22.3645, 81.8754, 15.1508],
extent:[7970828.0670139585, 1681517.1260521673, 9127778.927138386, 2541280.8202038296]
})
function scaleControl() {
control = new ol.control.ScaleLine({
units: 'metric',
bar: true,
steps: 4,
text: true,
minWidth: 100
});
return control;
}
var sourceMeasure = new ol.source.Vector({
crossOrigin: "anonymous",
});
var vectorMeasure = new ol.layer.Vector({
source: sourceMeasure,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#df1c29',
width: 2
}),
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#df1c29'
})
})
}),
title: 'Measure Overlay',
});
// The Map
//var overlay = new ol.Overlay
// ({
// element: container,
// autoPan: true,
// autoPanAnimation: {
// duration: 250
// }
// });
var view = new ol.View
({
center: ol.proj.transform([76.7997, 18.6298], 'EPSG:4326','EPSG:3857'),
zoom: 7,
extent: projection.getExtent(),
//minZoom:7,
maxZoom: 12
});
var map = new ol.Map
({
target: 'map',
controls: ol.control.defaults().extend([mousePositionControl, scaleControl()]),
view: view,
//fit: view.fit(),
//overlays: [overlay],
layers: [layer]
});
const extent = projection.getExtent()
map.getView().fit(extent);
map.updateSize();
window.onresize = function()
{
setTimeout( function() { map.updateSize();}, 200);
}
'''
The map on different screen looks like this:
On my screen It looks like
https://i.stack.imgur.com/KIYio.png
On my colleague's screen it looks like
https://i.stack.imgur.com/6c4zk.png
Please Help me get through this.
Thanks In Advance!
hello i have the same problem and I solove it by doing that
ts:
html :
I'm quite new to all of this and am sorry if this is painfully obvious, but I looked around for a solution as best I could and so nevertheless:
I am loading various KML files into a map, including ones of markers, none of which cause problems. I would like to have these markers change when the cursor hovers over them, which I was able to figure out as done by adapting these examples.
However, both use just one style, while I would like different styles for different KML layers. I tried defining and then calling the different styles that I would like to use as per this question.
But I wasn't returned the style that my parameters defined. n00b that I am it took me a while to trial and error what was going on, but console logging in my 'hoverStyler' function (where the styles would be chosen) my style parameter was being returned 'undefined', no matter where I tried defining it. Knowing that, I went into the KML itself and added extended data of my parameter ('hoverstyle'), and the function then worked for whatever marker (or route) I added that to.
The issue that I would like resolved is that it is a bit cumbersome to have to go into the KML and define this for every marker, and I assume that same as they're all loaded together that there must be a way to assign them all this property together, too.
I just have no idea what that is. Any advise is greatly appreciated!
Code:
(there is a certain deliberate redundancy in styles to better give me feedback as to what was and wasn't working)
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([132.4903, 34.0024]),
zoom: 4
})
});
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../static/gpx/summer3.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
style: function(feature) {
return routeStyle;
},
});
map.addLayer(vectorLayer);
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../static/gpx/testmoo3.kml',
format: new ol.format.KML({
extractStyles: false,
}),
}),
style: function(feature) {
return iconStyle;
},
});
map.addLayer(vectorLayer);
var hoverStyles = {
'moo': new ol.style.Icon({
anchor: [0.5, 30],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: '../static/GPX/icon/mooinb.png',
}),
'moo2': new ol.style.Icon({
anchor: [0.5, 30],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: '../static/GPX/icon/moo2.png'
}),
'route1': new ol.style.Stroke({
color: 'rgba(236, 26, 201, 0.5)',
width: 5
})
};
var routeStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(209,14,14,.6)',
width: 4
})
});
var defaultRouteStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(130,188,35,.6)',
width: 4
})
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 30],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: '../static/GPX/icon/moo7.png',
}),
});
var defaultIconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 30],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: '../static/GPX/icon/moo.png'
}),
});
var hoverStyleCache = {}
function hoverStyler(feature, resolution) {
var hover = feature.get('hoverstyle');
var geometry = feature.getGeometry().getType();
console.log(hover);
while (geometry === 'Point') {
if (!hover || !hoverStyles[hover]) {
return [defaultIconStyle];
}
if (!hoverStyleCache[hover]) {
hoverStyleCache[hover] = new ol.style.Style({
image:hoverStyles[hover],
})
}
return [hoverStyleCache[hover]];
}
while (geometry === 'LineString') {
if (!hover || !hoverStyles[hover]) {
return [defaultRouteStyle];
}
if (!hoverStyleCache[hover]) {
hoverStyleCache[hover] = new ol.style.Style({
stroke: hoverStyles[hover]
})
}
return [hoverStyleCache[hover]];
}
}
var featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector(),
map: map,
style: hoverStyler
});
var highlight;
var hover = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
if (feature !== highlight) {
if (highlight) {
featureOverlay.getSource().removeFeature(highlight);
}
if (feature) {
featureOverlay.getSource().addFeature(feature);
}
highlight = feature;
}
};
You can set properties as the features are loaded
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../static/gpx/summer3.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
style: function(feature) {
return routeStyle;
},
});
vectorLayer.getSource().on('addfeature', function(event) {
event.feature.set(('hoverstyle', 'moo');
});
map.addLayer(vectorLayer);
I'm beginner in OpenLayers and I'm wondering how to draw more complex graphical objects such as the following:
I've taken a look at their examples, but not found that kind of drawings. I'd like to use their primitives, not images.
UPDATE:
onDrawEnd (event) {
this.sizeFeature = event.feature
this.$refs.setSizeDialog.open()
},
onSizeSet (title) {
this.sizeFeature.set('graphics', true)
this.sizeFeature.set('style', sizeStyleId)
this.sizeFeature.set('title', title)
this.setFeatureStyle(this.sizeFeature)
// Save graphics after the line with title was drawn
developedDocumentsApi.saveDrawingGraphics(this.document.id, this.updateGraphicsObjList())
}
setFeatureStyle (feature) {
const styleId = feature.get('style')
let style = null
switch (styleId) {
case 0: {
style = this.getRedPoint()
break
}
...
case 11: {
const title = feature.get('title')
style = this.getSizeStyle(feature, title)
break
}
}
feature.setStyle(style)
}
getSizeStyle (feature, title) {
const pointStyle = new Style({
image: new Circle({
radius: width * 2,
fill: new Fill({ color: 'black' }),
stroke: new Stroke({ color: 'black', width: width / 2 })
}),
zIndex: Infinity
})
const lineStyle = new Style({
stroke: new Stroke({ color: 'black', width: 2 }),
text: new Text({
font: '12px Calibri,sans-serif',
overflow: true,
placement: 'line',
textBaseline: 'bottom',
fill: new Fill({ color: 'black' }),
stroke: new Stroke({ color: '#fff', width: 3 })
})
})
const startStyle = lineStyle.clone()
const endStyle = lineStyle.clone()
const resolution = this.devDocMap.getView().getResolution()
const styles = [pointStyle]
const geometry = feature.getGeometry()
if (geometry.getType() === 'LineString') {
console.log('LineString')
lineStyle.getText().setText((feature.getGeometry().getLength() / 1000).toFixed())
styles.push(lineStyle)
const pixels = 10
const start = geometry.getFirstCoordinate()
startStyle.setGeometry(LineString([[start[0], start[1] - pixels * resolution], [start[0], start[1] + pixels * resolution]]))
styles.push(startStyle)
const end = geometry.getLastCoordinate()
endStyle.setGeometry(LineString([[end[0], end[1] - pixels * resolution], [end[0], end[1] + pixels * resolution]]))
styles.push(endStyle)
return styles
}
}
You could do something similar to this example https://openlayers.org/en/v4.6.5/examples/line-arrows.html but instead of using icon images you should style the line ends as linestrings
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector();
var white = [255, 255, 255, 1];
var blue = [0, 153, 255, 1];
var width = 3;
var pointStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: width * 2,
fill: new ol.style.Fill({
color: blue
}),
stroke: new ol.style.Stroke({
color: white,
width: width / 2
})
}),
zIndex: Infinity
});
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'black',
width: 2
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
overflow: true,
placement: 'line',
textBaseline: 'bottom',
fill: new ol.style.Fill({
color: 'black'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 3
})
})
});
var startStyle = lineStyle.clone();
var endStyle = lineStyle.clone();
var styleFunction = function(feature, resolution) {
var styles = [pointStyle];
var geometry = feature.getGeometry();
if (geometry.getType() == 'LineString') {
lineStyle.getText().setText((feature.getGeometry().getLength()/1000).toFixed());
styles.push(lineStyle);
var pixels = 10;
var start = geometry.getFirstCoordinate();
startStyle.setGeometry(new ol.geom.LineString([[start[0], start[1] - pixels*resolution], [start[0], start[1] + pixels*resolution]]));
styles.push(startStyle);
var end = geometry.getLastCoordinate();
endStyle.setGeometry(new ol.geom.LineString([[end[0], end[1] - pixels*resolution], [end[0], end[1] + pixels*resolution]]));
styles.push(endStyle);
}
return styles;
};
var vector = new ol.layer.Vector({
source: source,
style: styleFunction
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: 'LineString',
style: styleFunction
}));
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>
In your case getSizeStyle should return a style function, you cannot use a static style as it changes with resolution:
getSizeStyle (feature, title) {
const pointStyle = new Style({
image: new Circle({
radius: width * 2,
fill: new Fill({ color: 'black' }),
stroke: new Stroke({ color: 'black', width: width / 2 })
}),
zIndex: Infinity
})
const lineStyle = new Style({
stroke: new Stroke({ color: 'black', width: 2 }),
text: new Text({
font: '12px Calibri,sans-serif',
overflow: true,
placement: 'line',
textBaseline: 'bottom',
fill: new Fill({ color: 'black' }),
stroke: new Stroke({ color: '#fff', width: 3 })
})
})
const startStyle = lineStyle.clone()
const endStyle = lineStyle.clone()
return function(feature, resolution) {
const styles = [pointStyle]
const geometry = feature.getGeometry()
if (geometry.getType() === 'LineString') {
console.log('LineString')
lineStyle.getText().setText((feature.getGeometry().getLength() / 1000).toFixed())
styles.push(lineStyle)
const pixels = 10
const start = geometry.getFirstCoordinate()
startStyle.setGeometry(new LineString([[start[0], start[1] - pixels * resolution], [start[0], start[1] + pixels * resolution]]))
styles.push(startStyle)
const end = geometry.getLastCoordinate()
endStyle.setGeometry(new LineString([[end[0], end[1] - pixels * resolution], [end[0], end[1] + pixels * resolution]]))
styles.push(endStyle)
return styles
}
}
}
title doesn't appear to be used, and pointStyle in only needed in a Draw interaction which uses a Point feature to highlight the mouse position.
I'm trying to find a way to display labels on OpenLayers vector features only when the mouse hovers over the feature's icon. I've found a few examples of similar things but nothing that quite does what I need to do. It seems to me like it would be fairly simple but I just can't work out how to start.
This is what my feature style code looks like (one example of several). Note that I'm bringing in the feature data from a few GeoJSON files, hence the feature.get(...)s in the color sections:
if (feature.get('level_pc') < 35 ) {
var style = new ol.style.Style({
fill: new ol.style.Fill({color: feature.get('shapefill')}),
stroke: new ol.style.Stroke({color: feature.get('shapestroke')}),
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [16, 16],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
opacity: 0.75,
src: '/icons/aws-red.png'
})),
text: new ol.style.Text({
font: '12px Roboto',
text: feature.get('label'),
fill: new ol.style.Fill({
color: feature.get('textfill')
}),
stroke: new ol.style.Stroke({
color: feature.get('textstroke'),
width: 1
})
})
});
return style
} else { ...
I'm really hoping that there's a way to insert some code into the style definition that creates the hover interaction, rather than having to create a duplicate of every style and then write some extra code that switches between the hover/non-hover styles as necessary. Maybe it could be by way of setting the alpha value in the text color to 255 on mouseover and 0 at other times. Perhaps I'm being too optimistic.
Does anyone have any ideas or examples I could check out?
Thanks,
Gareth
EDIT: Thanks to Jose I'm much closer to the goal now. My original code has changed somewhat since I first asked the question. I'm now applying styles to each feature through a function which reads the name of the icon file from GeoJSON data. For example gates are displayed with a 'gate-open' or 'gate-closed' icon and silos with a 'silo-high', 'silo-medium' or 'silo-low' icon. The correct icons and text are displaying on hover for all features, which is great - it's just that when I'm not hovering over the icons, the incorrect icon is displaying - it's showing the 'silo-low' icon for all features. When I hover over an icon it shows the correct icon, then reverts back when I'm no longer hovering.
Here's (the important bits of) my updated code:
var structuresStyleHover = function(feature, resolution) {
style = new ol.style.Style({
fill: new ol.style.Fill({color: feature.get('shapefill')}),
stroke: new ol.style.Stroke({color: feature.get('shapestroke')}),
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [16, 16],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
opacity: 1,
src: '/icons/'+feature.get('icon')+'-'+feature.get('status').toLowerCase()+'.png'
})),
text: new ol.style.Text({
font: '12px Roboto',
text: feature.get('label'),
fill: new ol.style.Fill({
color: feature.get('textfill')
}),
stroke: new ol.style.Stroke({
color: feature.get('textstroke'),
width: 1
})
})
})
return style;
};
var styleCache = {};
var styleFunction = function(feature,resolution) {
var radius = 16;
var style = styleCache[radius];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [16, 16],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
opacity: 0.5,
src: '/icons/'+feature.get('icon')+'-'+feature.get('status').toLowerCase()+'.png'
})),
});
styleCache[radius] = style;
}
return style;
};
var structuresLayer = new ol.layer.Vector({
source: structuresSource,
style: styleFunction
});
...
var map = new ol.Map({
layers: [paddocksLayer,structuresLayer],
interactions: ol.interaction.defaults({
altShiftDragRotate: false,
dragPan: false,
rotate: false
}).extend([new ol.interaction.DragPan({kinetic: null})]),
target: olMapDiv,
view: view
});
...
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
structuresLayer.getSource().getFeatures().forEach(f=>{
f.setStyle(styleFunction);
});
var pixel = map.getEventPixel(evt.originalEvent);
map.forEachFeatureAtPixel(pixel,function(feature,resolution) {
feature.setStyle(structuresStyleHover(feature,resolution));
return feature;
});
});
I'm not getting any errors - it's just not showing the correct icon unless the mouse is hovering over the icon.
I'm sure I'm missing something really obvious, but I can't work it out. Any ideas please?
You can use setStyle:
var mystyle = new ol.style.Style({
fill: new ol.style.Fill({color: '#00bbff'}),
stroke: new ol.style.Stroke({color: '#fff'}),
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [16, 16],
anchorXUnits: 'pixels',
anchorYUnits: 'pixels',
scale : 0.1,
opacity: 1,
src: 'http://2.bp.blogspot.com/_Sdh3wYnDKG0/TUiIRjXEimI/AAAAAAAAQeU/bGdHVRjwlhk/s1600/map+pin.png'
})),
text: new ol.style.Text({
font: '12px Roboto',
text: 'AAAAAAAAAAAAAAA',
fill: new ol.style.Fill({
color: '#ffbb00'
}),
stroke: new ol.style.Stroke({
color: '#000',
width: 1
})
})
});
var styleCache = {};
var styleFunction = function(feature) {
var radius = 3;
var style = styleCache[radius];
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
fill: new ol.style.Fill({
color: 'rgba(255, 153, 0, 0.4)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 204, 0, 0.2)',
width: 1
})
})
});
styleCache[radius] = style;
}
return style;
};
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'http://openlayers.org/en/v3.17.1/examples/data/kml/2012_Earthquakes_Mag5.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
style: styleFunction
});
var raster = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'toner'
})
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
map.on('pointermove', function(evt) {
if (evt.dragging) {
return;
}
vector.getSource().getFeatures().forEach(f=>{
f.setStyle(styleFunction);
});
var pixel = map.getEventPixel(evt.originalEvent);
map.forEachFeatureAtPixel(pixel,function(feature) {
feature.setStyle(mystyle);
return feature;
});
});
#map {
position: relative;
}
<title>Earthquakes in KML</title>
<link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="map" class="map"></div>
I'm using a OpenLayers to add dots on the map from a search result. I can add them just fine, but I want to clear/remove the layer when the user does another search. I've tried using RemoveFeature(), using Destroy(), etc but everything I tried doesn't work.
What am I doing wrong?
http://jsfiddle.net/9Lzc1uu2/6/
var USGSimagery = new ol.layer.Tile({
myattribute: 'USGSimagery',
source: new ol.source.TileWMS(({
url: 'http://raster.nationalmap.gov/arcgis/services/Orthoimagery/USGS_EROS_Ortho_SCALE/ImageServer/WMSServer',
params: {
'LAYERS': 0
}
}))
});
var view = new ol.View({
//projection:projection
center: ol.proj.transform(
[-12934933.3971171, 5405304.89115131], 'EPSG:3857', 'EPSG:3857'),
zoom: 18
})
var geolocStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 1,
src: 'images/icon.png'
}))
});
var map = new ol.Map({
layers: [USGSimagery],
loadTilesWhileInteracting: true,
target: document.getElementById('map'),
view: view
});
var searchResultsStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({
color: '#3399CC'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
var TestSearchResults = [{ 'Name': "R0045000030", 'X': "-12934933.3971171", 'Y': "5405304.89115131" },
{ 'Name': "R0238000050", 'X': "-12934887.0227854", 'Y': "5405285.39954225" },
{ 'Name': "R0310260660", 'X': "-12934830.2731638", 'Y': "5405249.69762986" }];
var SearchDots = [];
for (var i = 0; i < TestSearchResults.length; i++)
{
var item = TestSearchResults[i];
var positionFeature = new ol.Feature({
geometry: new ol.geom.Point([item["X"], item["Y"]]),
name: item['Name']
});
positionFeature.setStyle(searchResultsStyle);
SearchDots.push(positionFeature);
}
var featuresSearchResults = new ol.layer.Vector({
map: map,
source: new ol.source.Vector({
features: SearchDots
})
});
function DeleteResults()
{
// Delete Search Vectors from Map
featuresSearchResults.destroy();
}
The appropriate way to destroy features of a layer in OpenLayers 3 is to get the layer source, then clear the source:
function DeleteResults()
{
// Delete Search Vectors from Map
featuresSearchResults.getSource().clear();
};
Api Reference