Comment créer une carte logistique dans D3.js (tutoriel détaillé)
Cet article présente principalement l'exemple de code pour créer une carte logistique à l'aide de D3.js. Maintenant, je le partage avec vous et le donne comme référence.
Cet article présente l'exemple de code pour créer une carte logistique à l'aide de D3.js et le partage avec tout le monde. Les détails sont les suivants :
Exemple de carte
.
Idées de production
Vous devez dessiner une carte de la Chine 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 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 un débogage facile. , 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
gmp, enregistrez la carte de fond et le marqueur 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 latitude et la longitude 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 de point de dessin de ligne (sauvegardez-vous Ensuite, écrivez la fonction pour construire le chemin du chemin)
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
Comme il y aura plusieurs points d'extrémité de la ligne logistique, ils sont tous appelés dans un marqueur.
Cette marque est composée d'un cercle médian + d'un anneau 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 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");
});qui tracent une ligne d'un point de départ spécifié à un point final et dessinent des marqueurs aux points du réseau. La méthode
nécessite la saisie du nom de la ville de destination (ville) et de la latitude et de la longitude (données)
Appelez l'établissement précédemment établi Méthode project(), convertissez la latitude et la longitude du point final 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 un repère circulaire sur la ligne et animez le mouvement du point de départ au point final.
Une fois la marque déplacée vers le point final, elle sera supprimée pour économiser 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]]);
});Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.
Articles associés :
Comment implémenter une grille de carte à l'aide de Baidu Maps
Comparaison et distinction entre Express et Koa2 dans nodejs (tutoriel détaillé )
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 utiliser les fonctions de carte et de localisation dans Uniapp
Oct 16, 2023 am 08:01 AM
Comment utiliser les fonctions de carte et de positionnement dans uniapp 1. Introduction générale Avec la popularité des applications mobiles et le développement rapide de la technologie de positionnement, les fonctions de carte et de positionnement sont devenues un élément indispensable des applications mobiles modernes. uniapp est un framework de développement d'applications multiplateforme développé sur la base de Vue.js, qui peut permettre aux développeurs de partager du code sur plusieurs plateformes. Cet article expliquera comment utiliser les cartes et les fonctions de positionnement dans uniapp et fournira des exemples de code spécifiques. 2. Utilisez le composant uniapp-amap pour implémenter la fonction map
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 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
Comment utiliser les directions en un coup d'œil sur Google Maps
Jun 13, 2024 pm 09:40 PM
Un an après son lancement, Google Maps lance une nouvelle fonctionnalité. Une fois que vous avez défini un itinéraire vers votre destination sur la carte, celle-ci résume votre itinéraire de voyage. Une fois votre voyage commencé, vous pouvez « Parcourir » le guidage routier à partir de l'écran de verrouillage de votre téléphone. Vous pouvez utiliser Google Maps pour voir votre heure d'arrivée estimée et votre itinéraire. Tout au long de votre voyage, vous pouvez consulter les informations de navigation sur votre écran de verrouillage et, en déverrouillant votre téléphone, vous pouvez consulter les informations de navigation sans accéder à Google Maps. En déverrouillant votre téléphone, vous pouvez afficher les informations de navigation sans accéder à Google Maps. En déverrouillant votre téléphone, vous pouvez afficher les informations de navigation sans accéder à Google Maps. En déverrouillant votre téléphone, vous pouvez afficher les informations de navigation sans accéder à Google Maps. En déverrouillant votre téléphone, vous pouvez afficher les informations de navigation sans accéder à Google Maps. vous pouvez afficher les informations de navigation sans accéder à Google Maps.
Maîtrisez l'art d'utiliser les guides Apple Maps sur iPhone et iPad
Aug 30, 2023 am 09:25 AM
Dans un monde technologique en constante évolution, la capacité de naviguer sur des cartes numériques est devenue une compétence essentielle. Cet article fournit un guide complet sur la façon d'utiliser les guides Apple Maps sur iPhone et iPad, une fonctionnalité qui révolutionne la façon dont les utilisateurs explorent leur environnement et planifient leurs voyages. Apple Maps est une application intégrée à tous les appareils Apple, et elle est constamment mise à jour et améliorée pour offrir une expérience de navigation fluide. L'une de ses fonctionnalités les plus remarquables est la fonction Guide, qui fournit une liste organisée de lieux intéressants à visiter dans diverses villes du monde. Cette fonctionnalité est non seulement bénéfique pour les voyageurs, mais aussi une aubaine pour les habitants cherchant à découvrir de nouvelles attractions dans leur ville. Guide Comment utiliser Apple Maps sur iOS Tout d'abord, visitez Apple Maps
MapNeXt basé sur le cloud et basé sur la voiture est terminé ! Construction de cartes en ligne de haute précision de nouvelle génération
Jan 31, 2024 pm 06:06 PM
Écrit ci-dessus et compréhension personnelle de l'auteur Dans la mobilité collaborative, connectée et automatisée (CCAM), plus la capacité des véhicules à conduite intelligente à percevoir, modéliser et analyser l'environnement environnant est forte, plus ils sont conscients et capables de comprendre et de prendre des décisions, comme ainsi que d'effectuer des scénarios de conduite complexes en toute sécurité et efficacement. Les cartes de haute précision (HD) représentent les environnements routiers avec une précision centimétrique et des informations sémantiques au niveau des voies, ce qui en fait un composant essentiel des systèmes de mobilité intelligents et un élément clé de la technologie CCAM. Ces cartes offrent aux véhicules automatisés un puissant avantage dans la compréhension de leur environnement. Les cartes HD sont également considérées comme des capteurs cachés ou virtuels car elles rassemblent les connaissances des capteurs physiques (cartes), à savoir le lidar, les caméras, le GPS et l'IMU, pour construire un modèle de l'environnement routier. Carte HD
Comment créer une carte interactive en utilisant HTML, CSS et jQuery
Oct 25, 2023 am 09:40 AM
Comment créer une carte interactive à l'aide de HTML, CSS et jQuery Les cartes sont un outil de visualisation courant qui aide les utilisateurs à comprendre et à naviguer plus facilement dans les emplacements géographiques et les informations associées. En utilisant HTML, CSS et jQuery, nous pouvons créer une carte interactive et ajouter des fonctionnalités amusantes et utiles. Cet article vous expliquera comment utiliser ces techniques pour créer votre propre carte interactive. Créer la structure HTML Tout d'abord, nous devons créer la structure HTML pour contenir la carte. Ce qui suit est une base
