I want to use cubiccurve in openlayers 2.13, And I have added the necessary files, But when drawing the line is drawn instead of the curve.
Files are available on the website: http://trac.osgeo.org/openlayers/ticket/1715#no1
Drawing curve is very important for us and I no way I could control my curve.
Can one help me?
You can use bezier Curves algorithm. Bezier algorithm convert broken line to smooth line.
Use the following example:
<html>
<head>
<script src="http://dev.openlayers.org/OpenLayers.js" type="text/javascript"></script>
<title>Ya Mahdi</title>
<style>
html,body {
height: 99%;
width: 99%;
}
#map {
width: 100%;
height: 100%;
border: 1px solid black;
}
</style>
<script>
mmGetCurvePoints = function(ptsa, tension, isClosed, numOfSegments)
{
if (ptsa.length <= 2)
return ptsa;
tension = typeof tension === 'number' ? tension : 0.5;
isClosed = typeof isClosed === 'boolean' ? isClosed : false;
numOfSegments = typeof numOfSegments === 'number' ? numOfSegments : 16;
var ptsaClone = ptsa.slice(0);
if (isClosed)
ptsaClone.push(ptsa[0], ptsa[1], ptsa[2], ptsa[3]);
var _pts, res = [], /// clone array
x, y, /// our x,y coords
t1x, t2x, t1y, t2y, /// tension vectors
c1, c2, c3, c4, /// cardinal points
st, t, i, /// steps based on num. of segments
pow3, pow2, /// cache powers
pow32, pow23,
p0, p1, p2, p3, /// cache points
pl = ptsaClone.length;
/// clone array so we don't change the original content
_pts = ptsaClone.concat();
_pts.unshift(ptsaClone[1]); /// copy 1. point and insert at beginning
_pts.unshift(ptsaClone[0]);
_pts.push(ptsaClone[pl - 2], ptsaClone[pl - 1]); /// copy last point and append
/// 1. loop goes through point array
/// 2. loop goes through each segment between the two points + one point before and after
for (i = 2; i < pl; i += 2) {
p0 = _pts[i];
p1 = _pts[i + 1];
p2 = _pts[i + 2];
p3 = _pts[i + 3];
/// calc tension vectors
t1x = (p2 - _pts[i - 2]) * tension;
t2x = (_pts[i + 4] - p0) * tension;
t1y = (p3 - _pts[i - 1]) * tension;
t2y = (_pts[i + 5] - p1) * tension;
for (t = 0; t <= numOfSegments; t++) {
/// calc step
st = t / numOfSegments;
pow2 = Math.pow(st, 2);
pow3 = pow2 * st;
pow23 = pow2 * 3;
pow32 = pow3 * 2;
/// calc cardinals
c1 = pow32 - pow23 + 1;
c2 = pow23 - pow32;
c3 = pow3 - 2 * pow2 + st;
c4 = pow3 - pow2;
/// calc x and y cords with common control vectors
x = c1 * p0 + c2 * p2 + c3 * t1x + c4 * t2x;
y = c1 * p1 + c2 * p3 + c3 * t1y + c4 * t2y;
/// store points in array
res.push(x, y);
}
}
if (isClosed)
res = res.slice(0, res.length - 2 * numOfSegments);
return res;
};
var map, control,layer,feature,points;
var xy = [];
var array = [];
function init(){
map = new OpenLayers.Map('map', {
center: [45.476333, 39.4854095],
zoom: 10
});
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
layer = new OpenLayers.Layer.Vector("Simple Geometry");
map.addLayer(wms);
map.addLayer(layer);
function drawEnd(e){
if(xy.length<6) {
xy.push(e.x);
xy.push(e.y);
return;
}
else if(xy.length==6){
feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.LineString(array),{properties: {state: 'a'}}
);
layer.addFeatures(feature);
console.log("add f");
feature="";
layer.refresh({force:true});
xy=[];
}
}
function putPoint(e){
if(xy.length<6) {
return;
}
}
function sketchModified(e, ee, eee){
if(xy.length<6)
return;
try{
layer.removeFeatures(feature);
}catch(err){}
var xytemp = [];
xytemp.push(xy[0]);
xytemp.push(xy[1]);
xytemp.push(xy[2]);
xytemp.push(xy[3]);
xytemp.push(e.x);
xytemp.push(e.y);
points = mmGetCurvePoints(xytemp, 0.5, false, 15);
var i = 0;
while(i<points.length){
array.push(new OpenLayers.Geometry.Point(points[i], points[i+1]));
i++;
i++;
}
feature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.LineString(array),{properties: {state: 'a'}}
);
layer.addFeatures([feature]);
array=[];
points=[];
layer.refresh({force:true});
}
function cancel(){
}
var callBackParams = {
"done": drawEnd,
"point": putPoint,
"modify": sketchModified,
"cancel": cancel
};
var drawCrtl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {callbacks: callBackParams});
map.addControls([drawCrtl]);
drawCrtl.activate();
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>
Here's an example of how to draw an arc by center point, radius, start angle, and end angle. Depending on the use case you have in mind this may be a viable option.
