JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<div id="map" style="width: 600px; height: 400px"></div>
Parallel lines
JavaScript
var epsg4326 = new OpenLayers.Projection('EPSG:4326');
var epsg900913 = new OpenLayers.Projection('EPSG:900913');
var extent = new OpenLayers.Bounds(
-20037508, -20037508,
20037508, 20037508
);
var map = new OpenLayers.Map("map", {
restrictedExtent: extent,
projection: "EPSG:900913"
});
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var pointA = new OpenLayers.Geometry.Point(-8857187, 1001242);
var pointB = new OpenLayers.Geometry.Point(-9703450, 1400583);
var lineAB = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([pointA, pointB]), {
origin: pointA.clone(),
destination: pointB.clone(),
weight: 2
});
var lineBA = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([pointB, pointA]), {
origin: pointB.clone(),
destination: pointA.clone(),
weight: 3
});
var layer = new OpenLayers.Layer.Vector("lines", {
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeOpacity: 0.7,
strokeWidth: "${weight}"
})
})
});
map.events.on({
moveend: function() {
offsetLines();
}
});
function offsetLines() {
for(var i = 0; i < layer.features.length; i++) {
var feature = layer.features[i];
var origin = feature.attributes.origin;
var destination = feature.attributes.destination;
var angle = Math.atan2((destination.y - origin.y) , (destination.x - origin.x));
var res = map.getResolution();
var pixels = 2;
feature.geometry.components[0].x = origin.x + Math.sin(angle) * pixels * res;
feature.geometry.components[0].y = origin.y - Math.cos(angle) * pixels * res;
feature.geometry.components[1].x = destination.x + Math.sin(angle) * pixels * res;
feature.geometry.components[1].y = destination.y - Math.cos(angle) * pixels * res;
layer.drawFeature(feature);
...