在 OpenLayers 2 中使用 cubiccurve？

Question

我想在openlayers 2.13中使用cubiccurve，并且我已经添加了必要的文件，但是绘制时绘制的是线而不是曲线。

网站上有文件：http://trac.osgeo.org/openlayers/ticket/1715#no1

画曲线对我们来说很重要，我没法控制自己的曲线。

有人能帮帮我吗？

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

在 OpenLayers 2 中使用 cubiccurve？

Using cubiccurve in OpenLayers 2?

curve