javascript - How to draw a directed arc in Open Layers 3 with the "direction arrow" at the center of the arc? -
i using open layers 3 , springmeyer's arc.js draw directed arc on map between 2 points:
i bit embarrassed admit have worked on problem hours, can't figure out how center arrow @ apex (middle) of arc. instead of @ end point, arrow @ center of arc.
here working codepen code: http://codepen.io/gracefulcode/pen/mwyqzy
here code:
function createarcbetweenpoints(pointa, pointb, layer) { var transformeda = pointa.transform('epsg:3857', 'epsg:4326'); var transformedb = pointb.transform('epsg:3857', 'epsg:4326'); var start = { x: transformeda.getcoordinates()[0], y: transformeda.getcoordinates()[1] }; var end = { x: transformedb.getcoordinates()[0], y: transformedb.getcoordinates()[1] }; var generator = new arc.greatcircle(start, end, {'name': ''}); var line = generator.arc(100,{offset:10}); var coordinates = line.geometries[0].coords; var linestring = new ol.geom.linestring(coordinates); var geom = linestring.transform('epsg:4326', 'epsg:3857'); var feature = new ol.feature({ 'geometry': geom }); //adds arrow var dx = end.x - start.x; var dy = end.y - start.y - 20; var rotation = math.atan2(dy, dx); var linestyles = [ // linestring new ol.style.style({ stroke: new ol.style.stroke({ color: '#ffcc33', width: 2 }) }), new ol.style.style({ geometry: pointb, image: new ol.style.icon({ src: 'resources/arrow.png', anchor: [0.75, 0.5], rotatewithview: false, rotation: -rotation }) }) ]; feature.setstyle(linestyles); return feature; }
