使用D3.js创建物流地图的示例代码(2)
创建marker标记,以便多个连线终点调用
- 由于会有多个物流连线的终点,所以都放在一个marker标记中调用。
- 这个标记是由中间的 圆形 + 外圈 构成。外圈的闪烁效果另外创建。
marker = svg.append("defs")
.append("marker")
.append("marker")
.attr("id", "pointer")
.attr("viewBox","0 0 12 12") // 可见范围
.attr("markerWidth","12") // 标记宽度
.attr("markerHeight","12") // 标记高度
.attr("orient", "auto") //
.attr("markerUnits", "strokeWidth") // 随连接线宽度进行缩放
.attr("refX", "6") // 连接点坐标
.attr("refY", "6")
// 绘制标记中心圆
marker.append("circle")
.attr("cx", "6")
.attr("cy", "6")
.attr("r", "3")
.attr("fill", "white");
// 绘制标记外圆,之后在timer()中添加闪烁效果
marker.append("circle")
.attr("id", "markerC")
.attr("cx", "6")
.attr("cy", "6")
.attr("r", "5")
.attr("fill-opacity", "0")
.attr("stroke-width", "1")
.attr("stroke", "white");
绘制中国地图,并标记起点(长沙)
地图使用的经纬集为china.json,这个文件网上有很多
// 记录长沙坐标
var changsha = projection([112.59,28.12]);
// 读取地图数据,并绘制中国地图
mapdata = [];
d3.json('china.json', function(error, data){
if (error)
console.log(error);
// 读取地图数据
mapdata = data.features;
// 绘制地图
gmap.selectAll("path")
.data(mapdata)
.enter()
.append("path")
.attr("d", path);
// 标记长沙
gmap.append("circle").attr("id","changsha")
.attr("cx", changsha[0])
.attr("cy", changsha[1])
.attr("r", "6")
.attr("fill", "yellow")
gmap.append("circle").attr("id","changshaC")
.attr("cx", changsha[0])
.attr("cy", changsha[1])
.attr("r", "10")
.attr("stroke-width", "2")
.attr("fill-opacity", "0");
});
创建方法,绘制一条从指定起点到终点的连线,并在络点绘制marker标记。
- 方法需要输入终点城市名称(city)和经纬度(data)
- 调用之前建立的project()方法,将终点经纬度转换为平面坐标。
- 计算起点(长沙)和终点之前的距离,做为线条长度和动画时间参数。
- 在线条上绘制一个圆形标记,并实现从起点到终点的移动动画。
- 标记移动到终点后,即删除,节省资源。
- 如果线点在之前已经绘制过,则不绘线条,只绘制移动标记。
- 每处理一次物流单,则城市记录+1。
