1. 程式人生 > >Super Map 畫箭頭

Super Map 畫箭頭

  var vectorLayer= new SuperMap.Layer.Vector();
        var start = new SuperMap.Geometry.Point(0,0);
        var end = new SuperMap.Geometry.Point(0,20);
    var lineString = new SuperMap.Geometry.LineString([start,end]);
    console.log(lineString.components)
    var lineVector = new SuperMap.Feature.Vector(lineString);
        plottingLayer.addFeatures(lineVector);
        
         var linepoints = lineString.components;

        var endPoint1 = linepoints[linepoints.length-1];

        var endPoint2 = linepoints[linepoints.length-2];

        var points1=[endPoint1,endPoint2];

        var line1 = new SuperMap.Geometry.LineString(points1);

        var midPointX = endPoint2.x+0.9*(endPoint1.x-endPoint2.x);

        var midPointY = endPoint2.y+0.9*(endPoint1.y-endPoint2.y);

        var midPoint1 = new SuperMap.Geometry.Point(midPointX,midPointY);

        var midPoint2 = new SuperMap.Geometry.Point(midPointX,midPointY);

        //在線上9/10的位置取一點連線直線末端做兩條相同的短直線

        var points2=[midPoint1,endPoint1];

        var rightLine = new SuperMap.Geometry.LineString(points2);

        rightLine.rotate(15,endPoint1);

        //此為直線旋轉,旋轉角度可自由調節

        var points3=[midPoint2,endPoint1];

        var leftLine = new SuperMap.Geometry.LineString(points3);

        leftLine.rotate(345,endPoint1);

        //分別旋轉兩條短直線於lineString兩側,構成一個箭頭樣式

        var multiLineString = new SuperMap.Geometry.MultiLineString([

            lineString,rightLine,leftLine

        ]);

       var lineVector2 = new SuperMap.Feature.Vector(multiLineString);
        plottingLayer.addFeatures(lineVector2);