效果图

Paste_Image.png

代码

drawArrow: function (view, points, l) { // 箭头绘制 points为待连线的两个点 l为箭头在屏幕上的像素长度
            var lastPoint = points[points.length - 1];
            var lastSecPoint = points[points.length - 2];
            lastPoint = view.toScreen(new Point({
                x: lastPoint[0],
                y: lastPoint[1],
                "spatialReference": view.spatialReference
            }));
            lastSecPoint = view.toScreen(new Point({
                x: lastSecPoint[0],
                y: lastSecPoint[1],
                "spatialReference": view.spatialReference
            }));
            var x1 = lastPoint.x;
            var y1 = lastPoint.y;
            var x2 = lastSecPoint.x;
            var y2 = lastSecPoint.y;
            var a = (y1 - y2) / (x1 - x2);
            var b = y1 - a * x1;
            var g = Math.pow(a, 2) + 1;
            var h = 2 * x1 + 2 * y1 * a - 2 * a * b;
            var i = Math.pow(x1, 2) + Math.pow(y1, 2) - 2 * y1 * b + Math.pow(b, 2) - Math.pow(l, 2) / 2;
            var m = (h - Math.sqrt(Math.pow(h, 2) - 4 * g * i)) / (2 * g);
            if (m < Math.min(x1, x2) || m > Math.max(x1, x2)) {
                m = (h + Math.sqrt(Math.pow(h, 2) - 4 * g * i)) / (2 * g);
            }
            var n = a * m + b;

            var j = 2 * m - 2 * x1;
            var k = 2 * n - 2 * y1;
            var o = Math.pow(x1, 2) - Math.pow(m, 2) + Math.pow(y1, 2) - Math.pow(n, 2) - Math.pow(l, 2) + Math.pow(l, 2) / 2;
            var p = 1 + Math.pow(j / k, 2);
            var q = -2 * x1 + (2 * j * o) / Math.pow(k, 2) + (2 * y1 * j) / k;
            var r = Math.pow(x1, 2) + Math.pow(o / k, 2) + (2 * y1 * o) / k + Math.pow(y1, 2) - Math.pow(l, 2);
            var x = (-q + Math.sqrt(Math.pow(q, 2) - 4 * p * r)) / (2 * p);
            var y = (-j * x - o) / k;
            var x3 = (-q - Math.sqrt(Math.pow(q, 2) - 4 * p * r)) / (2 * p);
            var y3 = (-j * x3 - o) / k;
            var pp = view.toMap({
                x: x, y: y
            });
            var pp2 = view.toMap({
                x: x2, y: y2
            });
            var pp3 = view.toMap({
                x: x3, y: y3
            });
            var line = new Polyline({
                paths: [[[pp.x, pp.y], [pp2.x, pp2.y], [pp3.x, pp3.y]]],
                "spatialReference": view.spatialReference
            })
            return line;
        }

说明

上面一堆看不懂的算法代码以及 a,b,c等变量，都是在解方程时产生的中间变量，此处没办法写上注释。不过过程就是将地理坐标点先转换成为屏幕坐标点，然后按照45度夹角的方式传入一个屏幕像素长度，求得箭头构成的polyline