Geek Answers Handbook

Using a cubic curve in OpenLayers 2?

I want to use cubicquer in openlayers 2.13, and I added the necessary files, but when drawing a line, it is drawn instead of a curve.

Files are available on the website: http://trac.osgeo.org/openlayers/ticket/1715#no1

The drawing curve is very important for us, and I can’t control my curve in any way.

Can I help you?

+6
source share
1 answer
<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(ex); xy.push(ey); 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(ex); xytemp.push(ey); 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>
+1
source

More articles:


All Articles