2015-07-11 14 views

cevap

1
<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>