interface Web
js tutoriel
Explication détaillée des étapes pour créer une carte logistique à l'aide de D3.js
Explication détaillée des étapes pour créer une carte logistique à l'aide de D3.js
Cette fois, je vais vous donner une explication détaillée des étapes pour créer une carte logistique à l'aide de D3.js Quelles sont les précautions pour utiliser D3.js pour créer une carte logistique Ici. sont des cas pratiques, regardons ensemble.
Idées de production
Une carte de la Chine doit être dessinée en arrière-plan.
- 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 feuille de 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 Afin de faciliter le débogage, téléchargez directement le fichier d3.js localement. Lorsque vous l'utilisez réellement, vous pouvez le modifier dans 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, placez tous les codes suivants 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 des regroupements graphiques SVG pour préparer l'appel
gmp, enregistre la carte d'arrière-plan et les marqueurs de point de départ.
mline, enregistre la connexion entre le point de départ et la cible, ainsi que le point cible.
bouton, bouton pour tester
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
La longitude et la latitude ne peuvent pas être utilisées directement pour le dessin et doivent être converties en coordonnées planes. d3js fournit une gamme relativement riche de méthodes de projection. Dans cet exemple, la méthode geoEquirectangular() est utilisée.
- la projection est une méthode pour convertir la longitude et la latitude en coordonnées planes
- le chemin est une méthode pour convertir la longitude et la latitude en coordonnées ponctuelles pour le dessin de lignes (en sauvegardant vous devez écrire des fonctions vous-même) Construire le chemin chemin)
var projection = d3.geoEquirectangular() .center([465,395]) // 指定投影中心，注意[]中的是经纬度 .scale(height) .translate([width / 2, height / 2]); var path = d3.geoPath().projection(projection);
Créez des balises de marqueur pour plusieurs points de terminaison de connexion à appeler
Puisqu’il y aura plusieurs points d’extrémité de la ligne logistique, ils sont tous désignés par un marqueur.
- Cette marque est composée d'un cercle au milieu + d'un cercle extérieur. L'effet clignotant de l'anneau extérieur est créé séparément.
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 latitude et de longitude utilisé dans la carte est china.json. Il existe de nombreux fichiers en ligne
// 记录长沙坐标
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");
});. Créez une méthode pour tracer une ligne du point de départ spécifié au point final et tracez des marqueurs aux points du réseau.
La méthode nécessite de saisir le nom de la ville de destination (ville) ainsi que la longitude et la latitude (données)
- Appelez la méthode project() précédemment établie pour convertir la longitude et la latitude de destination en coordonnées planes.
- Calculez la distance entre le point de départ (Changsha) et le point final en tant que paramètres de longueur de ligne et de temps d'animation.
- Dessinez une marque circulaire sur la ligne et mettez en œuvre une animation mobile du point de départ au point final
- Une fois la marque déplacée vers le point final, il est supprimé, économisez les ressources.
- Si le point de ligne a déjà été tracé, aucune ligne ne sera tracée, seule la marque mobile sera tracée.
- Chaque fois qu'une commande logistique est traitée, l'enregistrement de la ville sera +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();
};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 :
Comment la méthode $.ajax() obtient les données json du serveur
Vue implémente le shopping panier Explication détaillée de l'effet parabole petite boule
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment faire de Google Maps la carte par défaut sur iPhone
Apr 17, 2024 pm 07:34 PM
La carte par défaut sur l'iPhone est Maps, le fournisseur de géolocalisation propriétaire d'Apple. Même si la carte s’améliore, elle ne fonctionne pas bien en dehors des États-Unis. Il n'a rien à offrir par rapport à Google Maps. Dans cet article, nous discutons des étapes réalisables pour utiliser Google Maps afin de devenir la carte par défaut sur votre iPhone. Comment faire de Google Maps la carte par défaut sur iPhone Définir Google Maps comme application cartographique par défaut sur votre téléphone est plus facile que vous ne le pensez. Suivez les étapes ci-dessous – Étapes préalables – Vous devez avoir Gmail installé sur votre téléphone. Étape 1 – Ouvrez l'AppStore. Étape 2 – Recherchez « Gmail ». Étape 3 – Cliquez à côté de l'application Gmail
Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript
Dec 17, 2023 pm 02:54 PM
Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.
WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel
Dec 17, 2023 pm 05:30 PM
WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket
Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel
Dec 17, 2023 pm 12:09 PM
Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande
Comment ajouter l'adresse du magasin à la carte de Xiaohongshu ? Comment renseigner les paramètres d'adresse du magasin ?
Mar 29, 2024 am 09:41 AM
Alors que Xiaohongshu devient de plus en plus populaire parmi les jeunes, de plus en plus de personnes choisissent d'ouvrir des magasins à Xiaohongshu. De nombreux vendeurs débutants rencontrent des difficultés lors de la configuration de l'adresse de leur magasin et ne savent pas comment ajouter l'adresse du magasin à la carte. 1. Comment ajouter l'adresse du magasin à la carte à Xiaohongshu ? 1. Tout d’abord, assurez-vous que votre magasin dispose d’un compte enregistré sur Xiaohongshu et qu’il a ouvert avec succès un magasin. 2. Connectez-vous à votre compte Xiaohongshu, entrez dans le backend du magasin et recherchez l'option « Paramètres du magasin ». 3. Sur la page des paramètres du magasin, recherchez la colonne « Adresse du magasin » et cliquez sur « Ajouter une adresse ». 4. Dans la page d'ajout d'adresse qui apparaît, remplissez les informations détaillées sur l'adresse du magasin, y compris la province, la ville, le district, le comté, la rue, le numéro de maison, etc. 5. Après avoir rempli, cliquez sur le bouton « Confirmer l'ajout ». Xiaohongshu vous fournira l'adresse
Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript
Dec 17, 2023 am 09:39 AM
Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.
JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel
Dec 17, 2023 pm 05:13 PM
JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous
Comment créer une carte thermique à l'aide de Highcharts
Dec 17, 2023 pm 04:06 PM
Comment utiliser Highcharts pour créer une carte thermique nécessite des exemples de code spécifiques. Une carte thermique est une méthode d'affichage visuel des données qui peut représenter la distribution des données dans chaque zone à travers différentes nuances de couleurs. Dans le domaine de la visualisation de données, Highcharts est une bibliothèque JavaScript très populaire qui fournit des types de graphiques riches et des fonctions interactives. Cet article explique comment utiliser Highcharts pour créer une carte thermique de carte et fournit des exemples de code spécifiques. Tout d'abord, nous devons préparer quelques données
