I searched without success how to add some "arrow direction" on a GPX trace.
I used this code to display a trace :
var center = ol.proj.transform([4.90756, 45.5172], 'EPSG:4326', 'EPSG:3857');
var map = new ol.Map({
layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
target: 'map',
controls: ol.control.defaults({attributionOptions: ({ collapsible: false})}),
view: new ol.View({center: center,zoom: 12})
});
var vectorGpx = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'http://www.vlsm.fr/test/test1.gpx',
format: new ol.format.GPX()
}),
style: new ol.style.Style({stroke: new ol.style.Stroke({color: '#1aa79b',width: 3})})
});
map.addLayer(vectorGpx);
http://jsfiddle.net/bzyev869/
Does something exist to do that?
openlayers 3 doesnt have inbuilt functionality to add arrow-style.However,you can calculate direction between lat long and add arrow icon.Here is the fiddle http://jsfiddle.net/bzyev869/2/
for(var i=0;i<vectorGpx.getSource().getFeatures()[0].getGeometry().getCoordinates()[0].length;i++){
var s= vectorGpx.getSource().getFeatures()[0].getGeometry().getCoordinates()[0][i];
if(i+1 <vectorGpx.getSource().getFeatures()[0].getGeometry().getCoordinates()[0].length){
var f= vectorGpx.getSource().getFeatures()[0].getGeometry().getCoordinates()[0][i+1];
}
var dx = s[0] - f[0];
var dy = s[1] - f[1];
var rotation = Math.atan2(dy, dx);
styles.push(new ol.style.Style({
geometry: new ol.geom.Point([f[0],f[1]]),
image: new ol.style.Icon({
src: 'http://openlayers.org/en/v3.14.2/examples/data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: false,
rotation: -rotation
})
}));
}
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 need to add a marker on my map when I call the method addMarker(long, lat).
The only example I have found is this one in the OpenLayers example list, but it adds only one marker in a specific place.
I need to be able to call my method anytime I need and pass the coordinates (the general idea is to have a simple menu where the user can type the long and lat and click a submit button and the marker is drawn on the map).
In the example, if I got it right, they created a feature and its style, then created a layer to draw the icon and initialized the map using that layer.
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326', 'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: 'data/icon.png'
}))
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var map = new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
target: document.getElementById('map'),
view: new ol.View2D({
center: [0, 0],
zoom: 3
})
});
I believe I can create an array of features, something like that(an example I saw here):
var iconFeatures=[];
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-72.0704, 46.678], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
var iconFeature1 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([-73.1234, 45.678], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island Two',
population: 4001,
rainfall: 501
});
iconFeatures.push(iconFeature);
iconFeatures.push(iconFeature1);
Here is my method so far:
class map{
private markerFeatures = [];
//receive an array of coordinates
public addMarkers(markers: Array<Marker>): void {
for (var i in markers) {
var markFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([markers[i].long, markers[i].lat], 'EPSG:4326',
'EPSG:3857')),
name: 'Null Island',
population: 4000,
rainfall: 500
});
this.markerFeatures.push(markFeature);
}
}
}
But nothing happened when I did that.
Obs: I created the map, the layer and called the method.
I'm using OL v3.7
Assuming you have a layer containing a vector source, you just need to add one more step to your addMarkers function:
myVectorSource.addFeatures(markerFeatures);
I've been trying the new version (3) of Open Layers. I've modified the icon feature example slightly, so it would show a polygon. I've been searching, reading and trying for a couple of hours, but can't figure out what I'm doing wrong.
I don't want to use geoJSON, because I want to dynamically add and remove features.
This is the code I have so far:
<script type="text/javascript">
var point1 = ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857');
var point2 = ol.proj.transform([35.41, 9.82], 'EPSG:4326', 'EPSG:3857');
var point3 = ol.proj.transform([33.41, 11.82], 'EPSG:4326', 'EPSG:3857');
var polyFeat = new ol.Feature({
geometry: new ol.geom.Polygon([point1, point2, point3])
});
var polyStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: 'red',
width: 2
})
});
polyFeat.setStyle(polyStyle);
var vectorSource = new ol.source.Vector({
features: [polyFeat]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
})
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
</script>
Why is the polygon not showing?
Two small things to solve your issue:
First, it's recommended to close a polygon, so declare a fourth point with same coordinates as the first.
var point4 = ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857');
Then, your geometry new ol.geom.Polygon([point1, point2, point3]) should be new ol.geom.Polygon([[point1, point2, point3, point4]])
The important fact here is not the point4 addition but to transform your array point to an array of array of points. See the API that says OpenLayers 3 ol.geom.Polygon constructor expects an Array.<Array.<ol.Coordinate>> expected.
I have created a map with OpenLayers 3 using static image. It uses fake projection so the map can use to properly display the layer as it's measured in pixels. This is the code:
var pixelProjection = new ol.proj.Projection({
code: 'pixel',
units: 'pixels',
extent: [0, 0, 1389, 1070]
});
var map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'http://s25.postimg.org/4o15oqbmn/jdgf.jpg',
imageSize: [1389, 1070],
projection: pixelProjection,
imageExtent: pixelProjection.getExtent()
})
})
],
target: 'map',
view: new ol.View2D({
projection: pixelProjection,
center: ol.extent.getCenter(pixelProjection.getExtent()),
zoom: 2
})
});
I was trying to add marker overlays to add some more interactions however I'm struggling to specify position and the markers is outside the map rather then inside where I want to place it.
var marker = new ol.Overlay({
position: [200, 200],
element: document.getElementById('marker'),
stopEvent: false
});
I'm very novice to this so if anyone have an idea how to set position correctly I will be thankful.
Using this OpenLayers 3 map as an example, I was able to add a marker to the center of your static image with the following:
var iconFeature = new ol.Feature({
geometry: new ol.geom.Point([700, 700])
});
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
src: 'http://ol3js.org/en/master/examples/data/icon.png'
})
});
iconFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});