Heim > Artikel > Web-Frontend > So erstellen Sie eine Logistikkarte in D3.js (ausführliches Tutorial)

So erstellen Sie eine Logistikkarte in D3.js (ausführliches Tutorial)

亚连Original: 2018-06-09 11:32:363375Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode zum Erstellen einer Logistikkarte mit D3.js vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

In diesem Artikel wird der Beispielcode zum Erstellen einer Logistikkarte mit D3.js vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

Beispielkarte

Produktionsideen

Sie müssen eine Karte von China als Hintergrund zeichnen.
Die Breiten- und Längenkoordinaten von Großstädten werden benötigt, um die Start- und Endpunkte der Straße zu zeichnen.
Die Stadt, die den Logistikauftrag erhalten hat, zeichnet ein blinkendes Zeichen.
Die Zielstadt, für die bereits ein Logistikauftrag vorliegt, zeichnet keine Route mehr.
Jedes Mal, wenn ein neuer Logistikauftrag generiert wird, gibt es einen Animationseffekt der Markierung, die sich entlang der Route zum Ziel bewegt.
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"); //

SVG-Grafikgruppierung als Vorbereitung für den Aufruf

erstellen
gmp, Hintergrundkarte und Startpunktmarkierungen speichern.
mline, speichert die Verbindung zwischen Startpunkt und Ziel sowie den Zielpunkt.
Button, Button 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

Breitengrad und Längengrad 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.
Projektion ist eine Methode zum Umwandeln von Längen- und Breitengraden in Ebenenkoordinaten.
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 aufgerufen werden können

Da es mehrere Endpunkte der Logistiklinie geben wird, werden sie alle in einer Markierung genannt.
Dieses Zeichen besteht aus einem Kreis in der Mitte + einem äußeren Kreis. 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)

Der in der Karte verwendete Breiten- und Längengradsatz ist China. json. Es sind viele Dateien online

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

Erstellen Sie eine Methode zum Zeichnen einer Linie vom angegebenen Startpunkt zum Endpunkt und zeichnen Sie Markierungen an den Netzwerkpunkten. Die

-Methode erfordert die Eingabe des Namens der Zielstadt (Stadt) sowie des Breiten- und Längengrads (Daten).
Rufen Sie die zuvor festgelegten auf project()-Methode, Konvertieren Sie den Breiten- und Längengrad des Endpunkts in ebene Koordinaten.
Berechnen Sie den Abstand zwischen dem Startpunkt (Changsha) und dem Endpunkt als Parameter für Linienlänge und Animationszeit.
Zeichnen Sie eine kreisförmige Markierung auf der Linie und animieren Sie die Bewegung vom Startpunkt bis zum Endpunkt.
Nachdem die Markierung zum Endpunkt verschoben wurde, wird sie gelöscht, um Ressourcen zu sparen.
Wenn der Linienpunkt zuvor gezeichnet wurde, wird keine Linie gezeichnet, sondern nur die bewegliche Markierung.
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 ein Beispiel für 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);
    });

Erstellen Sie eine Testschaltfläche und testen Sie die Zielstadtdaten

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

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie ein Kartenraster mit Baidu Maps

Vergleich und Unterscheidung zwischen Express und Koa2 in NodeJS (ausführliches Tutorial )

Der Singleton-Modus in JS implementiert das Hinzufügen, Löschen, Ändern und Überprüfen von Daten

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Logistikkarte in D3.js (ausführliches Tutorial). 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：Informationen zur Verwendung der ejsExcel-VorlageNächster Artikel：Informationen zur Verwendung der ejsExcel-Vorlage

In Verbindung stehende Artikel

Mehr sehen