Maison > Article > interface Web > D3.js crée une carte logistique
Cette fois, je vais vous apporter D3.js pour créer une carte logistique. Quelles sont les précautions pour créer une carte logistique avec D3.js Voici un cas pratique, jetons un oeil.
Exemple de carte
Idées de production
Vous devez dessiner une carte de La Chine comme toile de fond.
Les coordonnées de latitude et de longitude des grandes villes sont nécessaires pour tracer les points de départ et d'arrivée de la route.
La ville qui a reçu la commande logistique dessine une marque clignotante.
La ville de destination qui dispose déjà d'une commande logistique ne tracera plus d'itinéraire.
Chaque fois qu'une nouvelle commande logistique est générée, il y aura un effet d'animation de la marque se déplaçant le long de l'itinéraire jusqu'à la cible.
Les données après le dessin doivent être nettoyées pour réduire l'utilisation des ressources du navigateur.
Commencer à coder
1. Créez un modèle de page Web
Chargez D3JS pour plus de commodité<.>Débogage, téléchargez directement le fichier d3.js localement Lorsque vous l'utilisez réellement, vous pouvez le modifier par le chemin de chargement. Notez que la version V4 de D3 est utilisée, ce qui est différent de la version V3.
Créez un bloc p, prêt à être dessiné.<!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>Créez SVG, tous les codes suivants sont placés dans <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"); //Créez un regroupement de graphiques SVG en vue de l'appel de
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");
Créer une fonction de projection
var projection = d3.geoEquirectangular() .center([465,395]) // 指定投影中心,注意[]中的是经纬度 .scale(height) .translate([width / 2, height / 2]); var path = d3.geoPath().projection(projection);
Créez un marqueur afin que plusieurs points de terminaison de connexion puissent être appelés
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");
Dessinez une carte de la Chine et marquez le point de départ (Changsha)
L'ensemble de longitude et de latitude utilisé dans la carte est china.json, ce fichier est en ligne Il existe de nombreuses méthodes de création// 记录长沙坐标 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"); });
, traçant une ligne du point de départ spécifié au point final et dessinant des marqueurs aux points du réseau. La méthode
// 创建对象,保存每个城市的物流记录数量 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(); };Créez une instance de file d'attente d'animation pour obtenir l'effet clignotant du cercle extérieur de la marque
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); });Créez un bouton de test et testez les données de la ville cible
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]]); });Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! Lecture recommandée :
Méthode JS pour obtenir les N premières valeurs de couleur d'une image
Explication détaillée des graphiques et du texte en utilisant la méthode de rendu
L'applet utilise .getImageInfo() pour obtenir des informations sur l'image
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!