diff --git a/examples/data/arrow.png b/examples/data/arrow.png new file mode 100644 index 0000000000..a0d3834586 Binary files /dev/null and b/examples/data/arrow.png differ diff --git a/examples/line-arrows.html b/examples/line-arrows.html new file mode 100644 index 0000000000..6338653387 --- /dev/null +++ b/examples/line-arrows.html @@ -0,0 +1,51 @@ + + + + + + + + + + + LineString arrows example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

LineString arrows example

+

Example of drawing arrows for each line string segment.

+
+

See the line-arrows.js source to see how this is done.

+
+
draw, vector, arrow
+
+ +
+ +
+ + + + + + + diff --git a/examples/line-arrows.js b/examples/line-arrows.js new file mode 100644 index 0000000000..90f810acfa --- /dev/null +++ b/examples/line-arrows.js @@ -0,0 +1,67 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.geom.Point'); +goog.require('ol.interaction.Draw'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.MapQuest'); +goog.require('ol.source.Vector'); +goog.require('ol.style.Icon'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); + +var raster = new ol.layer.Tile({ + source: new ol.source.MapQuest({layer: 'sat'}) +}); + +var source = new ol.source.Vector(); + +var styleFunction = function(feature, resolution) { + 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); + // arrows + styles.push(new ol.style.Style({ + geometry: new ol.geom.Point(end), + image: new ol.style.Icon({ + src: 'data/arrow.png', + anchor: [0.75, 0.5], + rotateWithView: false, + rotation: -rotation + }) + })); + }); + + return styles; +}; +var vector = new ol.layer.Vector({ + source: source, + style: styleFunction +}); + +var map = new ol.Map({ + layers: [raster, vector], + renderer: exampleNS.getRendererFromQueryString(), + target: 'map', + view: new ol.View({ + center: [-11000000, 4600000], + zoom: 4 + }) +}); + +map.addInteraction(new ol.interaction.Draw({ + source: source, + type: /** @type {ol.geom.GeometryType} */ ('LineString') +}));