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);
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>
I am trying to add direction service to the map
1:I need to display the map
2:once i get the response from the server or invoke the method only then i should draw the poly line i am trying to do it as shown below
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">-->
</head>
<body>
<div id="map" class="map"></div>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script>
var map;
var vectorLayer;
var extentToZoom;
var geojsonObject;
/* function addGeoObject(){
geojsonObject ={"status":200,"hint_data":{"locations":["1DYUCf____89vE8AWwAAANkCAAAAAAAAcAAAAG_vKABaqAAATqcUAIO1MgYAAAEB","1DYUCf____89vE8AEAAAAHAAAADZAgAAAAAAAG_vKABaqAAAtZkUAPGvMgYBAAEB"],"checksum":4294707914},"route_name":["T3 Arrival Drive","T3 Arrival Drive"],"status_message":"Found route between points","route_geometry":"{srqAewyieEzrExuAtDhA","via_indices":[0,2],"route_instructions":[["10","T3 Arrival Drive",418,0,2,"418m","S",202,1,"N",22],["15","",0,2,0,"0m","N",0,"N",0]],"via_points":[[1.35355,103.986563],[1.350069,103.985137]],"found_alternative":false,"route_summary":{"total_distance":418,"total_time":65,"end_point":"T3 Arrival Drive","start_point":"T3 Arrival Drive"}}
//console.log(geojsonObject.coordinates);
}*/
function drawPolyline(geoObject){
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'Point': new ol.style.Style({
image: image
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 1
})
}),
'MultiPoint': new ol.style.Style({
image: image
}),
'MultiPolygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [4],
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
'GeometryCollection': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'magenta',
width: 2
}),
fill: new ol.style.Fill({
color: 'magenta'
}),
image: new ol.style.Circle({
radius: 10,
fill: null,
stroke: new ol.style.Stroke({
color: 'magenta'
})
})
}),
'Circle': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(255,0,0,0.2)'
})
})
};
var styleFunction = function(feature, resolution) {
return styles[feature.getGeometry().getType()];
};
geojsonObject =geoObject;
var routeGeom = new ol.format.Polyline(
{
factor: 1e6
}).readGeometry(geojsonObject.route_geometry, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
var routeFeature = new ol.Feature({
geometry:routeGeom
})
extentToZoom = routeGeom.getExtent();
var vectorSource = new ol.source.Vector({
features: [routeFeature]
});
map = new ol.Map({
layers: [
new ol.layer.Vector({
source: vectorSource,
style: styleFunction
})
],
target: 'laneMap'
});
}
function initMap(){
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
}
initMap();
geojsonObject ={"status":200,"hint_data":{"locations":["1DYUCf____89vE8AWwAAANkCAAAAAAAAcAAAAG_vKABaqAAATqcUAIO1MgYAAAEB","1DYUCf____89vE8AEAAAAHAAAADZAgAAAAAAAG_vKABaqAAAtZkUAPGvMgYBAAEB"],"checksum":4294707914},"route_name":["T3 Arrival Drive","T3 Arrival Drive"],"status_message":"Found route between points","route_geometry":"{srqAewyieEzrExuAtDhA","via_indices":[0,2],"route_instructions":[["10","T3 Arrival Drive",418,0,2,"418m","S",202,1,"N",22],["15","",0,2,0,"0m","N",0,"N",0]],"via_points":[[1.35355,103.986563],[1.350069,103.985137]],"found_alternative":false,"route_summary":{"total_distance":418,"total_time":65,"end_point":"T3 Arrival Drive","start_point":"T3 Arrival Drive"}};
drawPolyline(geojsonObject);
/* var geoobject2={"status":200,"hint_data":{"locations":["UiQkCf____-ljiMAEAAAABgAAAAAAAAAAAAAAP____-jqAAAt5gUAG2wMgYAAAEB","c8gaCf____8AAAAAMgAAALAAAAAAAAAAHQEAAOviEAajqAAAdqQUABy3MgYAAAEB"],"checksum":4089551480},"route_name":["East Coast Parkway (ECP)",""],"status_message":"Found route between points","route_geometry":"mjkqAyewieEsHuB_m#qWoYwJuDoDoAqBoFaJkCsD}H_Hai#{Pw`#iM","via_indices":[0,10],"route_instructions":[["10","East Coast Parkway (ECP)",18,0,2,"18m","N",21,1,"S",201],["1","",308,1,24,"307m","NE",28,1,"SW",208],["1","",65,9,5,"65m","NE",23,1,"SW",203],["15","",0,10,0,"0m","N",0,"N",0]],"via_points":[[1.349815,103.985261],[1.352822,103.986972]],"found_alternative":false,"route_summary":{"total_distance":391,"total_time":29,"end_point":"","start_point":"East Coast Parkway (ECP)"}};
drawPolyline(geoobject2);*/
initMap();
map.getView().fit(extentToZoom,map.getSize())
</script>
</body>
</html>
In the above code initMap method will draw the plain map
once i invoke the drawPolyline method it should show the plot (this is because i will get the data from the zmq once i get the data i should plot it )
I tried for a long time doing it please help by posting the correct code to accomplish it or suggest a way to do it
Assuming your routing service responds to a simple AJAX GET request, you can save yourself a lot of effort using OpenLayers's built-in layer loading. Something like
function drawPolyline(url) {
map.addLayer(new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.Polyline(),
url: url
}),
style: styleFunction
}));
}
The url argument in the above function is the url you use to get the track from your routing service.
I am drawing the polylines on the map and displaying few marker as well which is working fine but when the polyline is drawn marker is above the line
I wanted to know like can the shown the marker upfront when i draw the polyline
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">-->
</head>
<body>
<div id="map" class="map"></div>
<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<script>
var map;
var vectorLayer;
var extentToZoom;
var geojsonObject;
function drawPolyline(geoObject){
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
var styles = {
'greenRoute': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
}),
'redRoute': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
})
})
};
var styleFunction = function(feature, resolution) {
return styles[feature.get("fName")];
};
geojsonObject =geoObject;
var routeGeom = new ol.format.Polyline(
{
factor: 1e6
}).readGeometry(geojsonObject.route_geometry, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
var colourRoute=["greenRoute","redRoute"]
var routeFeature = new ol.Feature({
geometry:routeGeom,
fName: colourRoute[Math.floor(Math.random()*colourRoute.length)]
})
console.log("color route"+colourRoute[Math.floor(Math.random()*colourRoute.length)]);
extentToZoom = routeGeom.getExtent();
var vectorSource = new ol.source.Vector({
features: [routeFeature]
});
//vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
map.addLayer(vectorLayer);
}
function initMap(){
map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
urls : [" http://a.tile.openstreetmap.fr/openriverboatmap/{z}/{x}/{y}.png"," http://a.tile.openstreetmap.fr/openriverboatmap/{z}/{x}/{y}.png"," http://a.tile.openstreetmap.fr/openriverboatmap/{z}/{x}/{y}.png"]
})
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: ol.proj.fromLonLat([103.986908, 1.353199]),
rotation: 68*Math.PI/180,
zoom: 18
})
});
}
function invokeAddMarker(){
var markerData = [
{
"title": 'point1',
"lat": 1.350664,
"lng": 103.985190,
"description": 'yyyy'
}, {
"title": 'point2',
"lat":1.353604,
"lng": 103.986395,
"description": 'zzz'
}, {
"title": 'point3',
"lat": 1.357227,
"lng": 103.9879999,
"description": 'uuu'
}
];
for(var i=0;i<markerData.length;i++){
addmarker(markerData[i].lat,markerData[i].lng);
}
}
function addmarker(lat,lng){
console.log("*****lat******"+lat);
console.log("*****lng******"+lng);
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([lng,lat],'EPSG:4326', 'EPSG:3857')),
name: 'camera'
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'camera.png'
}))
});
iconFeature.setStyle(iconStyle);
vectorSource = new ol.source.Vector({
features: [iconFeature]
});
/*t clear the markers*/
/*vectorSource.clear();*/
vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
alert("video comes here");
}
});
}
initMap();
invokeAddMarker();
geojsonObject ={"status":200,"hint_data":{"locations":["1DYUCf____89vE8AWwAAANkCAAAAAAAAcAAAAG_vKABaqAAATqcUAIO1MgYAAAEB","1DYUCf____89vE8AEAAAAHAAAADZAgAAAAAAAG_vKABaqAAAtZkUAPGvMgYBAAEB"],"checksum":4294707914},"route_name":["T3 Arrival Drive","T3 Arrival Drive"],"status_message":"Found route between points","route_geometry":"{srqAewyieEzrExuAtDhA","via_indices":[0,2],"route_instructions":[["10","T3 Arrival Drive",418,0,2,"418m","S",202,1,"N",22],["15","",0,2,0,"0m","N",0,"N",0]],"via_points":[[1.35355,103.986563],[1.350069,103.985137]],"found_alternative":false,"route_summary":{"total_distance":418,"total_time":65,"end_point":"T3 Arrival Drive","start_point":"T3 Arrival Drive"}};
drawPolyline(geojsonObject);
var geoobject2={"status":200,"hint_data":{"locations":["UiQkCf____-ljiMAEAAAABgAAAAAAAAAAAAAAP____-jqAAAt5gUAG2wMgYAAAEB","c8gaCf____8AAAAAMgAAALAAAAAAAAAAHQEAAOviEAajqAAAdqQUABy3MgYAAAEB"],"checksum":4089551480},"route_name":["East Coast Parkway (ECP)",""],"status_message":"Found route between points","route_geometry":"mjkqAyewieEsHuB_m#qWoYwJuDoDoAqBoFaJkCsD}H_Hai#{Pw`#iM","via_indices":[0,10],"route_instructions":[["10","East Coast Parkway (ECP)",18,0,2,"18m","N",21,1,"S",201],["1","",308,1,24,"307m","NE",28,1,"SW",208],["1","",65,9,5,"65m","NE",23,1,"SW",203],["15","",0,10,0,"0m","N",0,"N",0]],"via_points":[[1.349815,103.985261],[1.352822,103.986972]],"found_alternative":false,"route_summary":{"total_distance":391,"total_time":29,"end_point":"","start_point":"East Coast Parkway (ECP)"}};
drawPolyline(geoobject2);
var geoobject3={"status":200,"hint_data":{"locations":["NksUCf_____CwU8AzwAAABMBAAAAAAAAHQEAAG0BpwavqAAARaEUAOmxMgYAAAEB","R0sUCf_____CwU8AZgAAAPQAAADtAAAAKwIAAKQJ8QSvqAAAebIUAGy5MgYBAAEB"],"checksum":3361836982},"route_name":["T3 Departure Drive","T3 Departure Drive"],"status_message":"Found route between points","route_geometry":"isoqAq}wieEqUiHqpA__#cLkE}NgJyGaDiTmGemAk`#w`#kM","via_indices":[0,8],"route_instructions":[["10","T3 Departure Drive",535,0,81,"535m","N",22,1,"S",202],["15","",0,8,0,"0m","N",0,"N",0]],"via_points":[[1.352005,103.985641],[1.356409,103.987564]],"found_alternative":false,"route_summary":{"total_distance":535,"total_time":84,"end_point":"T3 Departure Drive","start_point":"T3 Departure Drive"}};
drawPolyline(geoobject3);
map.getView().fit(extentToZoom,map.getSize())
</script>
</body>
</html>
Here drawpoline() method will draw the lines using osrm service and invokeAddMarker() method has a array for which addmarker() method is invoke
i wanted shown something like above
All ol.style.Style settings have a zIndex parameter. You can use this to set the order of different styles.
http://openlayers.org/en/v3.12.1/apidoc/ol.style.Style.html
I cannot get Stroke opacity working in OpenLayers 3 no matter what I try. What I try to achieve is to draw a line to OSM tile map with 0.5 opacity.
Here is sample code:
var lineString = new ol.geom.LineString([
[4.9020, 52.3667],
[4.9030, 52.3667],
[4.9040, 52.3667],
[4.9050, 52.3667]
]);
lineString.transform('EPSG:4326', 'EPSG:3857');
var lineLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: lineString,
name: 'Line'
})]
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
opacity: 0.5,
width: 15
})
})
});
var view = new ol.View({
center: ol.proj.transform([4.9020, 52.3667], 'EPSG:4326','EPSG:3857'),
zoom: 18
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
lineLayer
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** #type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: view
});
You can see it here:
http://jsfiddle.net/abgcvqw3/1/
The opacity is set through the color option, as the fourth element of the color value (the A, for "Alpha" in RGBA).
For example here's how you can have a semi transparent yellow:
color: [255, 255, 0, 0.5]
And here is another notation:
color: 'rgba(255,255,0,0.5)'