在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]]);
});上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在nodejs中Express与Koa2对比区分（详细教程）
Atas ialah kandungan terperinci 在D3.js中如何创建物流地图（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Bagaimana untuk menjadikan Peta Google sebagai peta lalai dalam iPhone
Apr 17, 2024 pm 07:34 PM
Peta lalai pada iPhone ialah Peta, pembekal geolokasi proprietari Apple. Walaupun peta semakin baik, ia tidak berfungsi dengan baik di luar Amerika Syarikat. Ia tiada apa-apa untuk ditawarkan berbanding Peta Google. Dalam artikel ini, kami membincangkan langkah yang boleh dilaksanakan untuk menggunakan Peta Google untuk menjadi peta lalai pada iPhone anda. Cara Menjadikan Peta Google Peta Lalai dalam iPhone Menetapkan Peta Google sebagai aplikasi peta lalai pada telefon anda adalah lebih mudah daripada yang anda fikirkan. Ikut langkah di bawah – Langkah prasyarat – Anda mesti memasang Gmail pada telefon anda. Langkah 1 – Buka AppStore. Langkah 2 – Cari “Gmail”. Langkah 3 – Klik di sebelah apl Gmail
Cara menggunakan fungsi peta dan lokasi dalam uniapp
Oct 16, 2023 am 08:01 AM
Cara menggunakan fungsi peta dan kedudukan dalam uniapp 1. Pengenalan latar belakang Dengan populariti aplikasi mudah alih dan perkembangan pesat teknologi penentududukan, fungsi peta dan penentududukan telah menjadi bahagian yang amat diperlukan dalam aplikasi mudah alih moden. uniapp ialah rangka kerja pembangunan aplikasi merentas platform yang dibangunkan berdasarkan Vue.js, yang boleh memudahkan pembangun berkongsi kod pada berbilang platform. Artikel ini akan memperkenalkan cara menggunakan peta dan fungsi kedudukan dalam uniapp dan memberikan contoh kod khusus. 2. Gunakan komponen uniapp-amap untuk melaksanakan fungsi peta
Bagaimana untuk menambah alamat kedai pada peta Xiaohongshu? Bagaimana untuk mengisi tetapan alamat kedai?
Mar 29, 2024 am 09:41 AM
Memandangkan Xiaohongshu menjadi semakin popular di kalangan golongan muda, semakin ramai orang memilih untuk membuka kedai di Xiaohongshu. Ramai penjual baru menghadapi kesukaran semasa menyediakan alamat kedai mereka dan tidak tahu cara menambahkan alamat kedai pada peta. 1. Bagaimana untuk menambah alamat kedai pada peta di Xiaohongshu? 1. Pertama, pastikan kedai anda mempunyai akaun berdaftar di Xiaohongshu dan telah berjaya membuka kedai. 2. Log masuk ke akaun Xiaohongshu anda, masukkan bahagian belakang kedai, dan cari pilihan "Tetapan Kedai". 3. Pada halaman tetapan kedai, cari lajur "Alamat Kedai" dan klik "Tambah Alamat". 4. Dalam halaman menambah alamat yang muncul, isikan maklumat alamat terperinci kedai, termasuk wilayah, bandar, daerah, daerah, jalan, nombor rumah, dsb. 5. Selepas mengisi, klik butang "Confirm Add". Xiaohongshu akan memberikan anda alamat
Cara membuat peta haba peta menggunakan Highcharts
Dec 17, 2023 pm 04:06 PM
Cara menggunakan Highcharts untuk mencipta peta haba peta memerlukan contoh kod khusus Peta haba ialah kaedah paparan data visual yang boleh mewakili pengedaran data dalam setiap kawasan melalui lorek warna yang berbeza. Dalam bidang visualisasi data, Highcharts ialah perpustakaan JavaScript yang sangat popular yang menyediakan jenis carta yang kaya dan fungsi interaktif. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta peta haba peta dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan beberapa data
Cara menggunakan arah sepintas lalu di Peta Google
Jun 13, 2024 pm 09:40 PM
Setahun selepas pelancarannya, Peta Google telah melancarkan ciri baharu. Sebaik sahaja anda menetapkan laluan ke destinasi anda pada peta, ia meringkaskan laluan perjalanan anda. Setelah perjalanan anda bermula, anda boleh "Semak imbas" panduan laluan daripada skrin kunci telefon anda. Anda boleh menggunakan Peta Google untuk melihat anggaran masa ketibaan dan laluan anda. Sepanjang perjalanan anda, anda boleh melihat maklumat navigasi pada skrin kunci anda dan dengan membuka kunci telefon anda, anda boleh melihat maklumat navigasi tanpa mengakses Peta Google. Dengan membuka kunci telefon anda, anda boleh melihat maklumat navigasi tanpa mengakses Peta Google. Dengan membuka kunci telefon anda, anda boleh melihat maklumat navigasi tanpa mengakses Peta Google Dengan membuka kunci telefon anda, anda boleh melihat maklumat navigasi tanpa mengakses Peta Google Dengan membuka kunci telefon anda, anda boleh melihat maklumat navigasi tanpa mengakses Peta Google anda. anda boleh melihat maklumat navigasi tanpa mengakses Peta Google.
Kuasai seni menggunakan Panduan Peta Apple pada iPhone dan iPad
Aug 30, 2023 am 09:25 AM
Dalam dunia teknologi yang sentiasa berkembang, keupayaan untuk menavigasi peta digital telah menjadi kemahiran penting. Artikel ini menyediakan panduan komprehensif tentang cara menggunakan Panduan Peta Apple pada iPhone dan iPad, ciri yang merevolusikan cara pengguna meneroka persekitaran mereka dan merancang perjalanan mereka. Peta Apple ialah aplikasi terbina dalam pada semua peranti Apple, dan ia sentiasa dikemas kini dan dipertingkatkan untuk memberikan pengalaman navigasi yang lancar. Salah satu ciri yang paling ketara ialah ciri Panduan, yang menyediakan senarai susun tempat menarik untuk dilawati di pelbagai bandar di seluruh dunia. Ciri ini bukan sahaja bermanfaat untuk pengembara, tetapi juga rahmat untuk penduduk tempatan yang ingin menemui tarikan baharu di bandar mereka. Cara menggunakan Peta Apple pada panduan iOS Mula-mula, lawati Peta Apple
MapNeXt berasaskan awan dan berasaskan kereta sudah selesai! Pembinaan peta berketepatan tinggi dalam talian generasi akan datang
Jan 31, 2024 pm 06:06 PM
Ditulis di atas & pemahaman peribadi pengarang Dalam mobiliti kolaboratif, berhubung dan automatik (CCAM), semakin kuat keupayaan kenderaan pemanduan pintar untuk melihat, memodelkan dan menganalisis persekitaran sekeliling, semakin sedar dan mampu mereka untuk memahami dan membuat keputusan, sebagai serta melaksanakan senario pemanduan yang kompleks dengan selamat dan cekap. Peta berketepatan tinggi (HD) mewakili persekitaran jalan raya dengan ketepatan paras sentimeter dan maklumat semantik peringkat lorong, menjadikannya komponen teras sistem mobiliti pintar dan pemboleh utama teknologi CCAM. Peta ini menyediakan kenderaan automatik dengan kelebihan yang hebat dalam memahami persekitaran mereka. Peta HD juga dianggap sebagai sensor tersembunyi atau maya kerana ia menggabungkan pengetahuan daripada sensor fizikal (peta), iaitu lidar, kamera, GPS dan IMU, untuk membina model persekitaran jalan raya. Peta HD
Cara membuat peta interaktif menggunakan HTML, CSS dan jQuery
Oct 25, 2023 am 09:40 AM
Cara Membuat Peta Interaktif Menggunakan HTML, CSS dan Peta jQuery ialah alat visualisasi biasa yang membantu pengguna memahami dan menavigasi lokasi geografi dan maklumat berkaitan dengan lebih mudah. Dengan menggunakan HTML, CSS dan jQuery, kami boleh mencipta peta interaktif dan menambah beberapa ciri yang menyeronokkan dan berguna. Artikel ini akan membimbing anda tentang cara menggunakan teknik ini untuk mencipta peta interaktif anda sendiri. Cipta struktur HTML Mula-mula, kita perlu mencipta struktur HTML untuk memegang peta. Berikut adalah asas
