ArcGIS API for JavaScript 3.24 添加带箭头的线

说明：本人是一个gis小白，由于网上的资料过于专业，当时学习的时候经常看不懂，于是写了一些简单的关于ArcGIS Api for javaScript分享，若该分享中出现错误，希望大家指出，若能帮助到各位，不胜荣幸。

公司项目上有一个需求是要求显示一条有方向的线条

于是，机智的我想，带箭头的线不就是一条直线再加一个点么，把那个图片设置成图片就成了呀 (￣▽￣)~*（为自己感到机智）

说干就干，首先，先画一个线

var addLineSymbol = function(startPoint,endPoint,symbol,arrow){
    var polyLine = new DCI.esri.Polyline(
                    [[startPoint.longitude,startPoint.latitude],[endPoint.longitude,endPoint.latitude]]
                );
    var lineSymbol = new DCI.esri.SimpleLineSymbol({
            'color': symbol.color || {a:1,r:0,g:0,b:255},
            'width': symbol.width || 1,
        });
    var lineGraphic = new DCI.esri.Graphic(polyLine,lineSymbol);
    DCI.map.graphics.add(lineGraphic);
})

（若文中有看不懂的可以先看看增加一个标注点的分享 ArcGIS API for JavaScript 3.24 标注的添加和点击标注的回调事件）

然后再画一个点，可是点的位置在哪呢？

比如我想放中间，那点的位置应该为：起始点的坐标 - （起始点-结束点）*1/2

然后我只要改变那个最后的分数就能改变箭头点的位置 (￣▽￣)~* ，代码实现为（再次为自己感到机智）

var t = arrow.point >= 0 && arrow.point <= 1 ? arrow.point : 1/2;
var arrowPoint = new DCI.esri.Point(
       startPoint.longitude - (startPoint.longitude - endPoint.longitude)*t,
       startPoint.latitude - (startPoint.latitude - endPoint.latitude)*t
);

（给一个参数arrow.point用来传位置信息，若是不传或者传的数据有问题则默认为中间位置）

位置解决了，可是我们用的箭头是一个图片，箭头方法是固定的，要怎样根据线来调整角度使得箭头指向是正确的呢？

我找到了显示点的方法中有一个‘angle’属性，可以设置图片的旋转角度

我们只要求出线的角度再把角度设置到这里就可以了 (￣▽￣)~*（又一次为自己感到机智）

    //计算角度
    var _getAngle = function(start,end) {
        var x = Math.abs(start.longitude - end.longitude);
        var y = Math.abs(start.latitude - end.latitude);
        var z = Math.sqrt(x*x + y*y);
        var angle = Math.round((Math.asin(y / z) / Math.PI*180));

        if(start.longitude <= end.longitude){
            if(start.latitude <= end.latitude){
                return angle;
            }else{
                return 360 - angle;
            }
        }else{
            if(start.latitude <= end.latitude){
                return 180 - angle;
            }else{
                return 180 + angle;
            }
        }
    }

（计算角度的实现就是用到初中一些数学知识）

结合起来代码为：

var addLineSymbol = function(startPoint,endPoint,symbol,arrow){
        var polyLine = new DCI.esri.Polyline(
                        [[startPoint.longitude,startPoint.latitude],[endPoint.longitude,endPoint.latitude]]);
        var lineSymbol = new DCI.esri.SimpleLineSymbol({
            'color': symbol.color || {a:1,r:0,g:0,b:255},
            'width': symbol.width || 1,
        });
        var lineGraphic = new DCI.esri.Graphic(polyLine,lineSymbol);
        DCI.map.graphics.add(lineGraphic);

        if(arrow){
            var angle = _getAngle(startPoint,endPoint);
            var t = arrow.point >= 0 && arrow.point <= 1 ? arrow.point : 1/2;
            var arrowPoint = new DCI.esri.Point(
                startPoint.longitude - (startPoint.longitude - endPoint.longitude)*t,
                startPoint.latitude - (startPoint.latitude - endPoint.latitude)*t
            );
            var arrowSymbol =  new DCI.esri.PictureMarkerSymbol({
                "url":  DCI.baseUrl + "images/arrow.png",
                "width": arrow.width || 15,
                "height": arrow.height || 15,
                "angle": angle
            });

            var arrowGraphic = new DCI.esri.Graphic(arrowPoint,arrowSymbol);
            DCI.map.graphics.add(arrowGraphic);

            return [lineGraphic,arrowGraphic]
        }
        else{
            return [lineGraphic]
        }
    };

效果如下：

ArcGIS API for JavaScript 3.24 添加带箭头的线