Maison > Article > interface Web > Comment créer une carte logistique dans D3.js (tutoriel détaillé)

Comment créer une carte logistique dans D3.js (tutoriel détaillé)

亚连original: 2018-06-09 11:32:363375parcourir

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0

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(&#39;china.json&#39;, 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 = {
      &#39;哈尔滨&#39;:[126.5416150000,45.8088260000],
      &#39;石家庄&#39;:[116.46,39.92],
      &#39;北京&#39;:[116.39564503787867,39.92998577808024],
      &#39;上海&#39;:[121.480539,31.235929],
      &#39;广州&#39;:[113.271431,23.135336],
      &#39;重庆&#39;:[106.558434,29.568996],
      &#39;青岛&#39;:[120.38442818368189,36.10521490127382],
      &#39;福州&#39;:[119.30347,26.080429],
      &#39;兰州&#39;:[103.840521,36.067235],
      &#39;贵阳&#39;:[106.636577,26.653325],
      &#39;成都&#39;:[104.081534,30.655822],
      &#39;西安&#39;:[108.946466,34.347269],
      &#39;长春&#39;:[125.3306020000,43.8219540000],
      &#39;台湾&#39;:[120.961454,23.80406],
      &#39;呼和浩特&#39;:[111.7555090000,40.8484230000],
      &#39;澳门&#39;:[113.5494640000,22.1929190000],
      &#39;武汉&#39;:[114.3115820000,30.5984670000],
      &#39;昆明&#39;:[102.71460113878045,25.049153100453159],
      &#39;乌鲁木齐&#39;:[87.56498774111579,43.84038034721766],
      &#39;益阳&#39;:[112.36654664522563,28.58808777988717],
      &#39;南京&#39;:[118.77807440802562,32.05723550180587],
      &#39;武昌&#39;:[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é )

Le mode singleton dans JS implémente l'ajout, la suppression, la modification et la vérification des données

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos de l'utilisation du modèle ejsExcelArticle suivant：À propos de l'utilisation du modèle ejsExcel

Articles Liés

Voir plus