Is there any elegant method to add shadow markers to a loop of icons in OpenLayers 3 ?
I'm struggling with adding shadows to an icon in ol3...and there is no consistent materials about this matter.
Try (with example styles):
var iconStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
snapToPixel: false,
fill: new ol.style.Fill({
color: 'rgba(77,135,254,0.4)'
})
}),
zIndex: 1
});
var shadowStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0,0,0,0.5)',
width: 6
}),
zIndex: 0
});
iconFeature.setStyle([iconStyle, shadowStyle]);
and then:
var iconSource = new ol.source.Vector(); // create an empty source
var icon = new ol.geom.Point(
// your point
);
var iconFeature = new ol.Feature({ // create a feature
geometry: icon
});
iconSource.addFeature(iconFeature); // add the feature to the source
var iconLayer = new ol.layer.Vector({ // create a layer with that source
source: iconSource
});
map.addLayer(iconLayer); // add the layer to the map
Related
How can I change the standard blue color and size of points in openlayers 3?
I do like this:
while (lats.length > 0) {
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lons.shift(), lats.shift()], 'EPSG:4326', 'EPSG:3857'))
})
]
})
});
map.addLayer(layer);
}
If I add styles then either nothing changes, or everything does not work. How to add styles here?
this is answer:
var vectorSource = new ol.source.Vector({
//create empty vector
});
var styleGreen = new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: 'green'
})
})
});
while (lats.length > 0) {
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lons.shift(), lats.shift()], 'EPSG:4326', 'EPSG:3857'))
});
vectorSource.addFeature(iconFeature);
}
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleGreen
});
map.addLayer(vectorLayer);
I'm able to change src of an icon when loading Point/MultiPoint Geojson, in this way:
that.geojsonLayers[index] = new that.openlayers.ol.layer.Vector({
source: new that.openlayers.ol.source.Vector({
format: new that.openlayers.ol.format.GeoJSON(),
url: url
}),
style: new that.openlayers.ol.style.Style({
image: new that.openlayers.ol.style.Icon({
src: 'http://mapmip.webiks.com/assets/Markers/marker-icon-blue.png'
})
})
but then I can't load other types of Geojson - Polygons are not being loaded at all, and Geometry Collection (which composed from icon and lines) is load only the icon.
What is the way to change the icon src so it won't override the other geojson type ?
You may use a style function to verify the geometry type you need to style. Setting an icon for styling a polygon is not correct.
Check this
1.Declare your style
var myMultiStyle = {
//here replace with your icon style
'Point': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.4)'
}),
radius: 5,
stroke: new ol.style.Stroke({
color: '#ff0',
width: 1
})
})
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f00',
width: 3
})
}),
'Polygon': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0,255,255,0.5)'
}),
stroke: new ol.style.Stroke({
color: '#0ff',
width: 1
})
})
};
Create a style function
function myStyleFunction(feature,resolution){
return myMultiStyle[feature.getGeometry().getType()];
}
Asign the style function to your vector source
that.geojsonLayers[index] = new that.openlayers.ol.layer.Vector({
source: new that.openlayers.ol.source.Vector({
format: new that.openlayers.ol.format.GeoJSON(),
url: url
}),
style: myStyleFunction
})
Check this official example to see the result.
How do I draw an arrow over a vector layer in Openlayers 3 map?
I tried creating an arrow using canvaselement but don't know how to draw it over the ol3 map.
A canvas element is not necessary. You can take the arrow example from the Openlayers site and add 2 custom LineString elements instead of the icon. You already have in the example the rotation angle in radians and the event where you should add your code.
Hopefully the following snippet does the trick:
var source = new ol.source.Vector();
var styleFunction = function (feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
})
];
geometry.forEachSegment(function (start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
var lineStr1 = new ol.geom.LineString([end, [end[0] - 200000, end[1] + 200000]]);
lineStr1.rotate(rotation, end);
var lineStr2 = new ol.geom.LineString([end, [end[0] - 200000, end[1] - 200000]]);
lineStr2.rotate(rotation, end);
var stroke = new ol.style.Stroke({
color: 'green',
width: 1
});
styles.push(new ol.style.Style({
geometry: lineStr1,
stroke: stroke
}));
styles.push(new ol.style.Style({
geometry: lineStr2,
stroke: stroke
}));
});
return styles;
};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: source,
style: styleFunction
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: ('LineString')
}));
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/>
<div id="map" class="map" tabindex="0"></div>
This is another customization of the Openlayers line-arrow Example.
It uses a RegularShape instead of an image. The arrow will keep its size independent of the current map zoom.
var source = new ol.source.Vector();
var styleFunction = function (feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#000',
width: 2
})
})
];
geometry.forEachSegment(function (start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(end),
image: new ol.style.RegularShape({
fill: new ol.style.Fill({color: '#000'}),
points: 3,
radius: 8,
rotation: -rotation,
angle: Math.PI / 2 // rotate 90°
})
}));
});
return styles;
};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: source,
style: styleFunction
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
map.addInteraction(new ol.interaction.Draw({
source: source,
type: ('LineString')
}));
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/>
<div id="map" class="map" tabindex="0"></div>
Hello i am trying to create buffer for point in openlayers 3.I am able to display the with in buffer distance result.but not able to crea graphic layer. please help and what i tried i put it down.you can check it
var style = new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
width: 5,
color: 'blue'
}),
radius: 12
}),
text: new ol.style.Text({
font: '12px helvetica,sans-serif',
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2
})
})
});
for (var i = 0; i < myObject.length; i++) {
ObjectIDs.push(myObject[i].asset_type);
ObjectIDs.push(myObject[i].x);
ObjectIDs.push(myObject[i].y);
}
var gridquerystr = ObjectIDs[0].toString();
var x = ObjectIDs[1].toString();
var y = ObjectIDs[2].toString();
alert(gridquerystr);
alert(x);
alert(y);
var pointgeom;
var pointfeatures = [];
//for (var i = 0 ; i < myObject.length ; i++) {
pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857"));
pointfeature = new ol.Feature({
geometry: pointgeom
});
pointfeature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: bufferdistance,
width: 5
}),
fill: new ol.style.Fill({
color: [51, 51, 51, .3]
})
}));
pointfeatures.push(pointfeature);
pointfeature.setStyle(style);
var locations = new ol.source.Vector({
features: pointfeatures,
project: "EPSG:4326"
});
SearchResultsLayer.setSource(locations);
since you can retrieve the features that are within the buffer you created and only need to display it ( if I understood well what you wanted ), you only have to change the style of your point like this:
Feature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: yourBufferDistance,
width: 2
}),
fill: new ol.style.Fill({
color: [51, 51, 51, .3]
})
})
}));
I am getting buffer for the selected feature .But i want add own styles for the feature.Is there any other way.My working buffer function is
var pointgeom;
var pointfeatures = [];
pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857"));
pointfeature = new ol.Feature({
geometry: pointgeom
});
var poitnExtent = pointfeature.getGeometry().getExtent();
var bufferedExtent = new ol.extent.buffer(poitnExtent, bufferdistance);
var bufferPolygon = new ol.geom.Polygon(
[
[[bufferedExtent[0], bufferedExtent[1]],
[bufferedExtent[0], bufferedExtent[3]],
[bufferedExtent[2], bufferedExtent[3]],
[bufferedExtent[2], bufferedExtent[1]],
[bufferedExtent[0], bufferedExtent[1]]]
]
);
var bufferedFeature = new ol.Feature(bufferPolygon);
vectorBuffers.getSource().addFeature(bufferedFeature);
My working buffer for point is
var pointfeatures = [];
var ObjectIDs = [];
var obj = JSON.parse(data.d);
for (var i = 0 ; i < obj.length ; i++) {
ObjectIDs.push(obj[i].x);
ObjectIDs.push(obj[i].y);
var x = ObjectIDs[0].toString();
var y = ObjectIDs[1].toString();
pointgeom = new ol.geom.Point(ol.proj.transform([parseFloat(x), parseFloat(y)], "EPSG:4326", "EPSG:3857"));
pointfeature = new ol.Feature({
geometry: pointgeom
});
var extent = pointfeature.getGeometry().getExtent();
var bufferextent = new ol.extent.buffer(extent, bufferdistance);
var bufferPolygon = new ol.geom.Circle(extent, bufferdistance);
var bufferedFeature = new ol.Feature(bufferPolygon);
pointfeatures.push(bufferedFeature);
pointfeature.setStyle(style);
bufferedFeature.setStyle(new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
image: new ol.style.Circle({
radius: bufferdistance,
width: 2
})
})
);
vectorBuffers.getSource().addFeature(bufferedFeature);
}
locations = new ol.source.Vector({
features: bufferextent,
project: "EPSG:4326"
});
SearchResultsLayer.setSource(locations);
map.getView().fit(SearchResultsLayer.getSource().getExtent(), map.getSize());
In OL2 I was able to specify a "select" style in the style definition. In OL3 this doesn't seem to exist. If I understand it correctly, I can set a style for the select interaction. However, this likely won't work in my case since every layer has a unique "selected" style. Am I mistaken in my assessment of the capability? Is there another/optimal way to do this in OL3?
Let's assume that you have a style parameter stored in each ol.Feature, you can add a ol.style.StyleFunction to your ol.interaction.Select and return a style based on this parameter. Like so:
var styles = {
'route': new ol.style.Style({
stroke: new ol.style.Stroke({
width: 6,
color: [237, 212, 0, 0.8]
})
}),
'icon': new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'pin.png'
})
}),
'geoMarker': new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
snapToPixel: false,
fill: new ol.style.Fill({color: 'black'}),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})
})
};
var select = new ol.interaction.Select({
style: function(feature, resolution) {
return [styles[feature.get('style_parameter')]];
}
});
And your feature would be like:
var geoMarker = new ol.Feature({
style_parameter: 'geoMarker',
geometry: new ol.geom.Point([0,0])
});
I know this a very old thread, but since I haven't been able to find a clear solution to this particular problem yet, I still deem it fit to post mine. Not sure how it holds up with a large number of layers and features, but this is the most elegant and concise solution I could come up with.
BTW: I'm using the latest version of OpenLayers, which at the moment is 6.3.1.
var map = new ol.Map({
...
layers: [
new ol.layer.Vector({
...
// Default style for layer1
style: default1,
// Hover style for layer1 (custom property)
hoverStyle: hover1,
// Selected style for layer1 (custom property)
selectedStyle: selected1
}),
new ol.layer.Vector({
...
// Default style for layer2
style: default2,
// Hover style for layer2 (custom property)
hoverStyle: hover2,
// Selected style for layer2 (custom property)
selectedStyle: selected2
})
],
...
});
var hoverInteraction = new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
style: function(feature) {
var layer = hoverInteraction.getLayer(feature);
return layer.values_.hoverStyle;
}
});
map.addInteraction(hoverInteraction);
var selectInteraction = new ol.interaction.Select({
condition: ol.events.condition.click,
style: function(feature) {
var layer = selectInteraction.getLayer(feature);
return layer.values_.selectedStyle;
}
});