介绍了用D3.js创建物流地图的示例代码，分享给大家如下：

示例图

产生想法

有必要画一张中国地图作为背景。绘制路线图的起点和终点需要主要城市的经纬度坐标。为收到物流账单的城市画一个闪烁的标记。如果有目标城市有物流清单，不会画路线。每次生成新的物流账单时，都会有一个动画效果，即一个标记沿着路线移动到目标。绘图后的数据需要清理，减少对浏览器资源的占用。开始清除代码

1.创建网页模板

加载D3JS。为了调试方便，在本地下载d3.js文件。在实际使用中，您可以将其更改为加载路径。请注意，使用的是D3的V4版本，与V3版本不同。

创建一个DIV块并准备绘图。

！doctype html lang=' en ' head metacarset=' utf8 ' script type=' text/JavaScript ' src=' http :/./static/D3/D3 . js '/script title map/title/Head body div class=' fxmap '/div/body script type=' text/JavaScript '/script/html创建SVG，并将以下所有代码放入script/script中

var宽度=1000，高度=800；//定义SVG var的宽度和高度SVG=d3.select ('body div.fxmap ')。追加(' SVG ')。attr ('width '，' width)。attr('高度'，高度)。样式('背景'，' # 000 ')；//为调用创建SVG图形分组

Gmp，保存背景图和起点标记。Mline，保存起点和目标的连接，以及目标点。但是，测试gmap=svg.append ('g ')的按钮。attr ('id '，' map ')。attr('笔画'，'白色')。attr('笔画宽度'，1)；mline=svg.append('g ')。attr('id '，' moveto ')。attr('stroke '，' #FFF ')。attr('笔画宽度'，1.5)。attr('fill '，' # FFF ')；button=svg.append('g ')。attr('id '，' button ')。attr('笔画'，'白色')。attr('笔画宽度'，1)。attr('填充'，'白色')；创建投影函数

经纬度不能直接用于绘图，需要转换成平面坐标。D3js提供了丰富的投影方法，本例中使用了geoequi矩形()方法。投影是将经度和纬度转换成平面坐标的方法。path是一种将经度和纬度转换为连接线上绘制点的坐标的方法(省去了编写构造路径路径的函数的需要)。VAR Projection=D3 . geo equivalent()。中心([465，395])//指定投影中心。注意经度和纬度。比例(高度)。在[]中平移([宽度/2，高度/2])；var path=d3.geoPath()。投影(projection)；为要调用的多个连接端点创建标记

因为物流连接会有多个端点，所以它们都被称为标记标签。这个标记由中间的圆形外环组成。外环的闪烁效果是单独创建的。Marker=SVG.append ('defs ')。追加('标记')。追加('标记')。attr ('id '，'指针')。attr ('viewbox '，' 0 0 12 12 ')//可见范围。attr('标记)12') //标记宽度。attr('markerHeight '，' 12') //标记高度。attr ('orient '，' auto')//。attr('标记单位'，'笔画宽度')//与连接线宽度成比例。attr('refX 6') //连接点坐标。attr('refY '，' 6') //绘制标记中心圆标记。追加('圆圈')。attr ('CX '，' 6 ')。attr ('cy '，' 6 ')。attr ('r '，//画出标记的外圆，然后添加闪烁效果标记。追加('圆圈')。attr ('id '，' markerc ')。attr ('CX '，' 6 ')。attr ('cy '，' 6 ')。attr(' r ' 0 ')。attr('笔画宽度'，' 1 ')。attr('笔画'，'白色')；画一张中国地图，标出起点(长沙)

地图中使用的经纬度设置是china.json，网上有很多文件

//记录长沙坐标定义变量长沙=投影([112.59,28.12]);//读取地图数据，并绘制中国地图mapdata=[]；d3.json('china.json '，函数（错误，数据){ if(错误)console.log(错误);//读取地图数据地图数据=data.features//绘制地图gmap.selectAll('路径')。数据（地图数据)。输入()。追加('路径')。attr('d '，路径);//标记长沙gmap.append('圆圈')。attr('id '，'长沙')。attr('cx '，长沙[0])。attr('cy '，长沙[1])。attr('r '，' 6 ').attr('填充','黄色)gmap.append('圆圈')。attr('id '，' changshaC ').attr('cx '，长沙[0])。attr('cy '，长沙[1])。attr('r '，' 10 ').attr('笔画宽度',' 2 ')。attr('填充-不透明度',' 0 ');});创建方法，绘制一条从指定起点到终点的连线，并在络点绘制标记标记。

方法需要输入终点城市名称（城市)和经纬度（数据)调用之前建立的项目()方法，将终点经纬度转换为平面坐标。计算起点（长沙)和终点之前的距离，做为线条长度和动画时间参数。在线条上绘制一个圆形标记，并实现从起点到终点的移动动画。标记移动到终点后，即删除，节省资源。如果线点在之前已经绘制过，则不绘线条，只绘制移动标记。每处理一次物流单，则城市记录1。//创建对象，保存每个城市的物流记录数量var城市列表=新对象()；//创建方法，输入数据坐标，绘制发射线var moveto=function(city，data){ var pf={ x : projection([112.59，28.12])[0]，y:projection([112.59，28.12])[1]}；var pt={x:projection(数据)[0]，y :投影(数据)[1]};var距离=数学。sqrt(((pt。x-pf。x)* * 2(磅。y-pf。y)* * 2)；if(城市列表中的城市){城市列表[城市]；}else{ mline.append('line ').attr('x1 '，pf.x).attr('y1 '，pf.y).attr('x2 '，pt.x).attr('y2 '，pt.y).attr('标记结束，'网址(#指针')。样式(“笔画缓冲器阵列”、“距离”、“距离”).过渡()。持续时间（距离*30)。styleTween('笔画-dashoffset '，函数(){返回d3。插值数字(距离，0)；});城市列表[城市]=1；};mline.append('圆圈')。attr('cx '，pf.x).attr('cy '，pf.y).attr('r '，3).过渡()。持续时间（距离*30)。attr('transform '，' translate '((pt。x-pf。x)'，'(pt.y-pf.y)')').移除();};创建动画队例，实现标记外圈的闪烁效果

var标度=D3。刻度线性()；scale.domain([0，1000，2000]).范围([0,1,0]);var开始=日期。now()；D3。计时器(函数(){ var S1=scale((日期。now()-start)00)；//控制台。原木(S1)；gmap.select('circle#changshaC ').attr('笔画不透明度，S1)；marker.select('圆圈#markerC ').attr('笔画不透明度，S1)；});创建测试按钮和测试的目标城市数据

var city纵坐标={ '哈尔滨' : [126.5416150000，45.808260000]，'石家庄' : [116.46，39.92]，'北京' :[116.46，3787867，13360。上海' :[121.480539，31.235929]，'广州' 3360 [113.271431，23.135336]，'重庆' 3360 [106.558434，29.568996]，'青岛福州' :[119.30347，26.080429]，'兰州' 3333for(city纵坐标中的var键){ city name[total]=key；};//创建一个操作按钮，点击一次启动一条物流线。按钮。追加('圆圈')。attr ('CX '，宽度* 0.9)。attr ('cy '，高度* 0.8)。attr ('r '，宽度/20)。attr ('text '，'。button.append('text ')。attr('x '，宽度*0.87)。attr('y '，高度*0.81)。样式(' font-size '，' 30px ')。文本('点击')；button.on('click '，function(){ var _ index=~ ~(math . random()* total)；moveto(cityname[_index]，city纵坐标[city name[_ index]])；});以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。