时间：2021-07-01 10:21:17 帮助过：4人阅读
示例图
制作思路
需要绘制一张中国地图，做为背景。
需要主要城市的经纬坐标，以绘制路张起点和终点。
接收到物流单的城市，绘制一个闪烁的标记。
已经有过物流单的目标城市，不再绘制路线。
每次新产生一笔物流单，都有一个标记沿路线移向目标的动画效果。
绘制结束后的数据，需要清理掉，以减少对浏览器的资源占用。
开始撸码
1.创建网页模板
加载D3JS，为了方便调试，直接下载d3.js文件在本地，实际使用的时候，可以换成加载路径。注意，使用的是V4版的D3，和V3版有差异。
创建一个p块，准备绘图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<script type="text/javascript" src="../../static/d3/d3.js"></script>
<title>地图</title>
</head>
<body>
<p class="fxmap">
</p>
</body>
<script type="text/javascript"></script>
</html>创建SVG，以下所有代码放在<script></script>中
创建SVG图形分组，以备调用
gmp，保存背景地图和起点标记。
mline，保存起点和目标之间的连线，以及目标点。
buttion，测试用的按钮
创建投影函数
经纬度不能直接用来绘图，需要转换成平面坐标。d3js提供了比较丰富的投影方法，本例中使用了geoEquirectangular()方法。
projection 是将经纬度转换为平面坐标的方法
path 是将经纬度转换为连线绘制点坐标的方法（省得自己再写函数构造path路径）
创建marker标记，以便多个连线终点调用
由于会有多个物流连线的终点，所以都放在一个marker标记中调用。
这个标记是由中间的 圆形 + 外圈 构成。外圈的闪烁效果另外创建。
绘制中国地图，并标记起点（长沙）
地图使用的经纬集为china.json，这个文件网上有很多
创建方法，绘制一条从指定起点到终点的连线，并在络点绘制marker标记。
方法需要输入终点城市名称(city)和经纬度(data)
调用之前建立的project()方法，将终点经纬度转换为平面坐标。
计算起点（长沙）和终点之前的距离，做为线条长度和动画时间参数。
在线条上绘制一个圆形标记，并实现从起点到终点的移动动画。
标记移动到终点后，即删除，节省资源。
如果线点在之前已经绘制过，则不绘线条，只绘制移动标记。
每处理一次物流单，则城市记录+1。
创建动画队例，实现标记外圈的闪烁效果
创建测试按钮和测试的目标城市数据
相关推荐：
Three.js实现3D地图实例分享
使用D3.js制作表格方法介绍
d3.js画矢量图+可拖拽的实现思路
以上就是D3.js创建物流地图实例分享的详细内容，更多请关注Gxl网其它相关文章！