使用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。