简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Teilen Sie Beispiele für die Erstellung von Logistikkarten mit D3.js

Teilen Sie Beispiele für die Erstellung von Logistikkarten mit D3.js

小云云
小云云Original
2018-01-29 09:11:362294Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von D3.js zum Erstellen einer Logistikkarte vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Beispielkarte

Produktionsideen

  1. Sie müssen eine Karte von zeichnen China. als Hintergrund.

  2. Die Breiten- und Längenkoordinaten von Großstädten werden benötigt, um die Start- und Endpunkte der Straße zu zeichnen.

  3. Die Stadt, die den Logistikauftrag erhalten hat, zeichnet ein blinkendes Zeichen.

  4. Die Zielstadt, für die bereits ein Logistikauftrag vorliegt, zeichnet keine Route mehr.

  5. Jedes Mal, wenn ein neuer Logistikauftrag generiert wird, gibt es einen Animationseffekt der Markierung, die sich entlang der Route zum Ziel bewegt.

  6. Die Daten nach dem Zeichnen müssen bereinigt werden, um die Ressourcennutzung des Browsers zu reduzieren.

Codierung starten

1. Erstellen Sie eine Webseitenvorlage

Laden Sie D3JS für einfaches Debuggen Laden Sie die Datei d3.js direkt lokal herunter. Wenn Sie sie tatsächlich verwenden, können Sie sie in den Ladepfad ändern. Beachten Sie, dass die V4-Version von D3 verwendet wird, die sich von der V3-Version unterscheidet.

Erstellen Sie einen P-Block, der zum Zeichnen bereit ist. 


<!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 erstellen, alle folgenden Codes werden in 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 platziert;


var width=1000 , height=800; // 定义SVG宽高
var svg = d3.select("body p.fxmap")
            .append("svg")
            .attr("width", "width) 
            .attr("height", height)
            .style("background","#000"); //

Erstellen Sie eine SVG-Grafikgruppierung als Vorbereitung für den Aufruf von

  1. gmp und speichern Sie die Hintergrundkarte und die Startpunktmarkierung.

  2. mline, speichert die Verbindung zwischen Startpunkt und Ziel sowie den Zielpunkt.

  3. Schaltfläche, Schaltfläche zum Testen


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");

Projektionsfunktion erstellen

  1. Längen- und Breitengrad können nicht direkt zum Zeichnen verwendet werden und müssen in ebene Koordinaten umgewandelt werden. d3js bietet eine relativ große Auswahl an Projektionsmethoden. In diesem Beispiel wird die Methode geoEquirectangular() verwendet.

  2. Projektion ist eine Methode zum Umwandeln von Längen- und Breitengraden in Ebenenkoordinaten.

  3. Pfad ist eine Methode zum Umwandeln von Längen- und Breitengraden in Strichzeichnungspunktkoordinaten (Speichern Sie sich selbst. Schreiben Sie dann die Funktion zum Erstellen des Pfadpfads.) 


var projection = d3.geoEquirectangular()
              .center([465,395]) // 指定投影中心，注意[]中的是经纬度
              .scale(height)
              .translate([width / 2, height / 2]);
var path = d3.geoPath().projection(projection);

Erstellen Sie eine Markierung, damit mehrere Verbindungsendpunkte vorhanden sein können genannt

  1. Da es mehrere Endpunkte der Logistikverbindung geben wird, werden sie alle in einem Marker-Tag genannt.

  2. Dieses Zeichen besteht aus einem mittleren Kreis + einem äußeren Ring. Der Blinkeffekt des Außenrings wird separat erzeugt. 


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");

Zeichnen Sie eine Karte von China und markieren Sie den Startpunkt (Changsha)

Breitengrad und Längengrad, der in der Karte verwendet wird. Der Satz ist china.json. Es gibt viele 


// 记录长沙坐标
    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");
    });

Erstellungsmethoden vom angegebenen Startpunkt zum Endpunkt und zeichnen Sie Markierungen an Netzwerkpunkten. Die Methode

  1. erfordert die Eingabe des Namens der Zielstadt (Stadt) sowie des Breiten- und Längengrads (Daten).

  2. Rufen Sie die zuvor festgelegten auf project()-Methode, Konvertieren Sie den Breiten- und Längengrad des Endpunkts in ebene Koordinaten.

  3. Berechnen Sie den Abstand zwischen dem Startpunkt (Changsha) und dem Endpunkt als Parameter für Linienlänge und Animationszeit.

  4. Zeichnen Sie eine kreisförmige Markierung auf der Linie und animieren Sie die Bewegung vom Startpunkt bis zum Endpunkt.

  5. Nachdem die Markierung zum Endpunkt verschoben wurde, wird sie gelöscht, um Ressourcen zu sparen.

  6. Wenn der Linienpunkt zuvor gezeichnet wurde, wird keine Linie gezeichnet, sondern nur die bewegliche Markierung.

  7. Jedes Mal, wenn ein Logistikauftrag bearbeitet wird, beträgt der Stadtrekord +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();
    };
Erstellen Sie eine Animationswarteschlange, um den Blinkeffekt des äußeren Kreises der Markierung zu erzielen


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);
    });
Testschaltfläche erstellen und Zielstadtdaten testen


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]]);
    });
Verwandte Empfehlungen:

Three.js-Implementierung von 3D-Kartenbeispielen Teilen

Einführung in die Methode zum Erstellen von Tabellen mit D3.js

D3.js zeichnet Vektorgrafiken + ziehbare Implementierungsideen

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Erstellung von Logistikkarten mit D3.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einfaches Tutorial zur Verwendung der NavigatorIOS-Komponente in React NativeNächster Artikel：Einfaches Tutorial zur Verwendung der NavigatorIOS-Komponente in React Native

In Verbindung stehende Artikel

Mehr sehen