标线

有时候,需要在地图上绘制连线,表示“从某处到某处”的意思,这种时候在地图上绘制的连线,称为“标线”。

标线是什么

标线,是指地图上需要两个坐标以上才能表示的元素。例如,北京和上海之间连线。用于绘制标线的图形元素有两种:线段元素<line>和路径元素<path>。如果是在平面地图上,且不要求两点之间有曲线,<line>已足够;如果是在球面地图上,或对于平面地图上的曲线,则需使用<path>。标线有时带有箭头,表示方向。

如何添加带箭头的标线

如果需要表示标线的方向,则可以在末端加箭头。SVG 画布可以通过定义标记,从而为<line>或<path>添加箭头。箭头的标记如下:

<defs>
<marker id="arrow" 
    markerUnits="strokeWidth" 
    markerWidth="12" 
    markerHeight="12" 
    viewBox="0 0 12 12" 
    refX="6" 
    refY="6" 
    orient="auto">
<path d="M2,2 L10,6 L2,10 L6,6 L2,2" 
style="fill: #000000;" />
</marker>
</defs>

标记是定义在<defs>中的。其中,<marker>是标记的主体,<marker>中的<path>是标记的图形,此处是箭头的路径,也可用其他图形,如圆形、矩形等。参照此结构,使用d3的代码添加一个箭头标记的代码如下。

var defs = svg.append("defs");
 
var arrowMarker = defs.append("marker")
                    .attr("id","arrow")
                    .attr("markerUnits","strokeWidth")
                    .attr("markerWidth","12")
                  .attr("markerHeight","12")
                  .attr("viewBox","0 0 12 12") 
                  .attr("refX","6")
                  .attr("refY","6")
                  .attr("orient","auto");
 
var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
                        
arrowMarker.append("path")
    .attr("d",arrow_path)
    .attr("fill","#000");

对于需要添加箭头的线段,设定其 marker-end 属性为 url(#arrow)即可添加箭头,arrow 是箭头标记的 id 号。

平面地图上的标线

下面在平面的中国地图上添加一个带箭头的标线,表示“从桂林到北京”的路径。对于平面地图上两点之间连线,用<line>元素即可。

根据两座城市的经纬度分别计算其像素坐标,并添加一个<line>,设置属性marker-end的值为url(#arrow)。

var peking = projection([116.3, 39.9]);
var guilin = projection([110.3, 25.3]);

svg.append("line")
.attr("class","route")
.attr("x1",guilin[0])
.attr("y1",guilin[1])
.attr("x2",peking[0])
.attr("y2",peking[1])
.attr("marker-end","url(#arrow)");

如此一来,标线的末尾会带一个箭头,结果如下图所示。

为标线的起点添加一个圆

上面的箭头是添加到线段终点的。此外,可定义一个新的标记,添加到线段的起点。例如,起点显示一个圆。

定义一个新的标记,代码如下。

var startMarker = defs.append("marker")
                        .attr("id","startPoint")
                        .attr("markerUnits","strokeWidth")
                        .attr("markerWidth","12")
                      .attr("markerHeight","12")
                      .attr("viewBox","0 0 12 12") 
                      .attr("refX","6")
                      .attr("refY","6")
                      .attr("orient","auto");
                        
startMarker.append("circle")
            .attr("cx",6)
            .attr("cy",6)
            .attr("r",2)
            .attr("fill","#000");

此标记的id号是startPoint,用其为线段的marker-start赋值即可。将添加线段元素的代码修改为:

svg.append("line")
    .attr("class","route")
    .attr("x1",guilin[0])
    .attr("y1",guilin[1])
    .attr("x2",peking[0])
    .attr("y2",peking[1])
    .attr("marker-end","url(#arrow)")       //终点处添加箭头
    .attr("marker-start","url(#startPoint)");   //起点处添加圆

结果

源代码

下载地址:line.zip

在线演示

委托名片直接发送邮件(需邮箱客户端)点击复制邮箱地址14721230383项目委托、技术支持,欢迎与我们联系。休息日7:00 ~ 11:0012:00 ~ 22:00工作日11:00 ~ 11:4016:00 ~ 22:00

Copyright 2014-2016, DecemberCafe, All Rights Reserved