本文介绍了使用D3。js创建物流地图的示例代码,分享给大家,具体如下:
示例图
<>强制作思路
<李>需要绘制一张中国地图,做为背景。
<李>需要主要城市的经纬坐标,以绘制路张起点和终点。
<李>接收到物流单的城市,绘制一个闪烁的标记。
<李>已经有过物流单的目标城市,不再绘制路线。
<李>每次新产生一笔物流单,都有一个标记沿路线移向目标的动画效果。
<李>绘制结束后的数据,需要清理掉,以减少对浏览器的资源占用。
<强>开始撸码
<强> 1。创建网页模板
加载D3JS,为了方便调试,直接下载d3。js文件在本地,实际使用的时候,可以换成加载路径。注意,使用的是V4版的D3,和V3版有差异。
创建一个DIV块,准备绘图。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍se utf8”比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/static/d3/d3.js "祝辞& lt;/script>
& lt; title>地图& lt;/title>
& lt;/head>
& lt; body>
& lt; div类=癴xmap”比;
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript祝辞& lt;/script>
& lt;/html>
创建SVG以下所有代码放在& lt; script> & lt;/script>中
var宽度=1000,高度=800;//定义SVG宽高
svg var=d3。选择(“身体div.fxmap”)
.append (svg)
.attr(“宽度”、“宽)
.attr(“高度”,高度)
.style(“背景”、“000 #”);//之前
创建SVG图形分组,以备调用
<李> gmp、保存背景地图和起点标记。
<李> mline,保存起点和目标之间的连线,以及目标点。
<李> buttion、测试用的按钮李
gmap=svg.append (“g”)。attr (“id”、“地图”)。attr(“中风”,“白色”).attr(“笔划宽度",1);
mline=svg.append (“g”)。attr (“id”、“函数”)。attr(“中风”,“# FFF”)。attr(笔划宽度,1.5).attr(“填满”,“# FFF”);
按钮=svg.append (“g”)。attr (“id”、“按钮”)。attr(“中风”,“白色”)。attr(“笔划宽度”,1).attr(“填满”,“白色”);
之前
<>强创建投影函数
<李>经纬度不能直接用来绘图,需要转换成平面坐标.d3js提供了比较丰富的投影方法,本例中使用了geoEquirectangular()方法。
<李>投影是将经纬度转换为平面坐标的方法
<李>路径是将经纬度转换为连线绘制点坐标的方法(省得自己再写函数构造道路路径)
var=d3.geoEquirectangular投影()
.center([465395])//指定投影中心,注意[]中的是经纬度
.scale(高度)
.translate((宽/2,高/2));
var=d3.geoPath路径().projection(投影);
<>强创建标记标记,以便多个连线终点调用
<李>由于会有多个物流连线的终点,所以都放在一个标志标记中调用。
<李>这个标记是由中间的圆形+外圈构成。外圈的闪烁效果另外创建。
标志=svg.append (“def”)
.append(“标记”)
.append(“标记”)
.attr (“id”、“指针”)
.attr (“viewBox”、“0 0 12 12”)//可见范围
.attr (“markerWidth”、“12”)//标记宽度
.attr (“markerHeight”、“12”)//标记高度
.attr(“东方”、“汽车”)//.attr (“markerUnits”、“strokeWidth”)//随连接线宽度进行缩放
.attr (“refX”,“6”)//连接点坐标
.attr (“refY”,“6”)//绘制标记中心圆
marker.append(“圈”)
.attr (“cx”,“6”)
.attr (“cy”,“6”)
.attr (“r”、“3”)
.attr(“填满”,“白色”);//绘制标记外圆,之后在计时器()中添加闪烁效果
marker.append(“圈”)
.attr (“id”、“markerC”)
.attr (“cx”,“6”)
.attr (“cy”,“6”)
.attr (“r”,“5”)
.attr(“填充不透明度”,“0”)
.attr(“笔划宽度”,“1”)
.attr(“中风”,“白色”);
