D3.js创建物流地图
这次给大家带来D3.js创建物流地图，D3.js创建物流地图的注意事项有哪些，下面就是实战案例，一起来看一下。
示例图
制作思路
需要绘制一张中国地图，做为背景。
需要主要城市的经纬坐标，以绘制路张起点和终点。
接收到物流单的城市，绘制一个闪烁的标记。
已经有过物流单的目标城市，不再绘制路线。
每次新产生一笔物流单，都有一个标记沿路线移向目标的动画效果。
绘制结束后的数据，需要清理掉，以减少对浏览器的资源占用。
开始撸码
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>中
var width=1000 , height=800; // 定义SVG宽高
var svg = d3.select("body p.fxmap")
.append("svg")
.attr("width", "width)
.attr("height", height)
.style("background","#000"); //创建SVG图形分组，以备调用
gmp，保存背景地图和起点标记。
mline，保存起点和目标之间的连线，以及目标点。
buttion，测试用的按钮
gmap = svg.append("g").attr("id", "map").attr("stroke", "white").attr("stroke-width",1);
mline = svg.append("g").attr("id", "moveto").attr("stroke", "#FFF").attr("stroke-width", 1.5).attr("fill","#FFF");
button = svg.append("g").attr("id", "button").attr("stroke", "white").attr("stroke-width", 1).attr("fill", "white");创建投影函数
经纬度不能直接用来绘图，需要转换成平面坐标。d3js提供了比较丰富的投影方法，本例中使用了geoEquirectangular()方法。
projection 是将经纬度转换为平面坐标的方法
path 是将经纬度转换为连线绘制点坐标的方法（省得自己再写函数构造path路径）
var projection = d3.geoEquirectangular() .center([465,395]) // 指定投影中心，注意[]中的是经纬度 .scale(height) .translate([width / 2, height / 2]); var path = d3.geoPath().projection(projection);
创建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。
// 创建对象，保存每个城市的物流记录数量
var citylist = new Object();
// 创建方法，输入data坐标，绘制发射线
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(data)[0], y:projection(data)[1]};
var distance = Math.sqrt((pt.x - pf.x)**2 + (pt.y - pf.y)**2);
if (city in citylist){
citylist[city]++;
}else{
mline.append("line")
.attr("x1", pf.x)
.attr("y1", pf.y)
.attr("x2", pt.x)
.attr("y2", pt.y)
.attr("marker-end","url(#pointer)")
.style("stroke-dasharray", " "+distance+", "+distance+" ")
.transition()
.duration(distance*30)
.styleTween("stroke-dashoffset", function(){
return d3.interpolateNumber(distance, 0);
});
citylist[city] = 1;
};
mline.append("circle")
.attr("cx", pf.x)
.attr("cy", pf.y)
.attr("r", 3)
.transition()
.duration(distance*30)
.attr("transform", "translate("+(pt.x-pf.x)+","+(pt.y-pf.y)+")")
.remove();
};创建动画队例，实现标记外圈的闪烁效果
var scale = d3.scaleLinear();
scale.domain([0, 1000, 2000])
.range([0, 1, 0]);
var start = Date.now();
d3.timer(function(){
var s1 = scale((Date.now() - start)%2000);
// console.log(s1);
gmap.select("circle#changshaC")
.attr("stroke-opacity", s1);
marker.select("circle#markerC")
.attr("stroke-opacity", s1);
});创建测试按钮和测试的目标城市数据
var cityordinate = {
'哈尔滨':[126.5416150000,45.8088260000],
'石家庄':[116.46,39.92],
'北京':[116.39564503787867,39.92998577808024],
'上海':[121.480539,31.235929],
'广州':[113.271431,23.135336],
'重庆':[106.558434,29.568996],
'青岛':[120.38442818368189,36.10521490127382],
'福州':[119.30347,26.080429],
'兰州':[103.840521,36.067235],
'贵阳':[106.636577,26.653325],
'成都':[104.081534,30.655822],
'西安':[108.946466,34.347269],
'长春':[125.3306020000,43.8219540000],
'台湾':[120.961454,23.80406],
'呼和浩特':[111.7555090000,40.8484230000],
'澳门':[113.5494640000,22.1929190000],
'武汉':[114.3115820000,30.5984670000],
'昆明':[102.71460113878045,25.049153100453159],
'乌鲁木齐':[87.56498774111579,43.84038034721766],
'益阳':[112.36654664522563,28.58808777988717],
'南京':[118.77807440802562,32.05723550180587],
'武昌':[114.35362228468498,30.56486029278519],
};
// 随机获得目标城市
var cityname = [], total = 0;
for (var key in cityordinate){
cityname[total++] = key;
};
// 创建操作按钮，每次点击发射一条物流线
button.append("circle")
.attr("cx", width*0.9)
.attr("cy", height*0.8)
.attr("r", width/20)
.attr("text","click")
.attr("fill", "grey");
button.append("text")
.attr("x", width*0.87)
.attr("y", height*0.81)
.style("font-size", "30px")
.text("click");
button.on("click", function(){
var _index = ~~(Math.random() * total);
moveto(cityname[_index], cityordinate[cityname[_index]]);
});相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是D3.js创建物流地图的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在iPhone中使Google地图成为默认地图
Apr 17, 2024 pm 07:34 PM
iPhone上的默认地图是Apple专有的地理位置提供商“地图”。尽管地图越来越好，但它在美国以外的地区运行不佳。与谷歌地图相比，它没有什么可提供的。在本文中，我们讨论了使用Google地图成为iPhone上的默认地图的可行性步骤。如何在iPhone中使Google地图成为默认地图将Google地图设置为手机上的默认地图应用程序比您想象的要容易。请按照以下步骤操作–先决条件步骤–您必须在手机上安装Gmail。步骤1–打开AppStore。步骤2–搜索“Gmail”。步骤3–点击Gmail应用旁
如何使用WebSocket和JavaScript实现在线语音识别系统
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系
WebSocket与JavaScript：实现实时监控系统的关键技术
Dec 17, 2023 pm 05:30 PM
WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技
如何使用WebSocket和JavaScript实现在线预约系统
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工
如何利用JavaScript和WebSocket实现实时在线点餐系统
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单
小红书如何把店铺地址加入地图？店铺地址设置怎么填？
Mar 29, 2024 am 09:41 AM
随着小红书越来越受到年轻人的喜爱，越来越多的人选择在小红书上开店。许多新手卖家在设置店铺地址时遇到了困难，不知道如何把店铺地址加入地图。一、小红书如何把店铺地址加入地图？1.首先，确保您的店铺在小红书上有注册账号，并且已经成功开设店铺。2.登录小红书账号，进入店铺后台，找到“店铺设置”选项。3.在店铺设置页面，找到“店铺地址”一栏，点击“添加地址”。4.在弹出的地址添加页面，填写店铺的详细地址信息，包括省份、城市、区县、街道、门牌号等。5.填写完毕后，点击“确认添加”按钮。小红书会对您提供的地址
如何使用Highcharts创建地图热力图
Dec 17, 2023 pm 04:06 PM
如何使用Highcharts创建地图热力图，需要具体代码示例热力图是一种可视化的数据展示方式，能够通过不同颜色深浅来表示各个区域的数据分布情况。在数据可视化领域，Highcharts是一个非常受欢迎的JavaScript库，它提供了丰富的图表类型和交互功能。本文将介绍如何使用Highcharts创建地图热力图，并提供具体的代码示例。首先，我们需要准备一些数据
如何在谷歌地图上使用一目了然的方向
Jun 13, 2024 pm 09:40 PM
在发布一年后，谷歌地图推出了一项新的功能。一旦您在地图上设置了目的地的路线，它就会总结您的旅行路线。旅程开始后，您可以从手机锁定屏幕“浏览”路线导航。您可以使用Google地图来查看您的预计到达时间和路线。在整个旅行期间，您可以在锁定屏幕上查看导航信息，通过解锁手机，无需访问Google地图即可查看导航信息。通过解锁手机，无需访问Google地图即可查看导航信息。通过解锁手机，无需访问Google地图,您即可查看导航信息，解锁手机，无需访问Google地图,您即可查看导航信息，解锁手机，无需访问
