1. 标线是什么

标线。是指地图上须要两个坐标以上才干表示的元素。

比如，北京和上海之间连线。用于绘制标线的图形元素有两种：线段元素<line>和路径元素<path>。

假设是在平面地图上。且不要求两点之间有曲线，<line>已足够。假设是在球面地图上，或对于平面地图上的曲线，则需使用<path>。

标线有时带有箭头。表示方向。

2. 怎样加入带箭头的标线

假设须要表示标线的方向，则能够在末端加箭头。【】。提到了给SVG定义标记，从而为<line>或<path>加入箭头的方法。箭头的标记例如以下：

标记是定义在<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号。

3. 平面地图上的标线

以下在平面的中国地图上加入一个带箭头的标线。表示“从桂林到北京”的路径。

对于平面地图上两点之间连线，用<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)");

如此一来，标线的末尾会带一个箭头。结果例如以下图所看到的。

4. 为标线的起点加入一个圆

上面的箭头是加入到线段终点的。此外。可定义一个新的标记，加入到线段的起点。

比如，起点显示一个圆。

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

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)");	//起点处加入圆

结果例如以下图所看到的。标线的起点处有一个圆，终点处有一个箭头。

5. 结果

结果如本文开头的图片所看到的。

完整代码请单击以下链接，再右键查看源码。

本例所需的JSON文件有二：和。

谢谢阅读。

文档信息

版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）

发表日期：2015 年 6 月 13 日

很多其它内容：和

备注：本文发表于。转载请注明出处。谢谢

转载于:https://www.cnblogs.com/blfshiye/p/4906200.html

你可能感兴趣的文章