Heim > Artikel > Web-Frontend > D3.js erstellt eine Logistikkarte

D3.js erstellt eine Logistikkarte

php中世界最好的语言Original: 2018-03-23 13:17:342271Durchsuche

Dieses Mal bringe ich Ihnen D3.js, um eine Logistikkarte zu erstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung einer Logistikkarte mit D3.js? Hier ist ein praktischer Fall.

Beispielkarte

Produktionsideen

Sie müssen eine Karte von zeichnen China. als Hintergrund.
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.

Mit dem Codieren beginnen

1. Erstellen Sie eine Webseitenvorlage

Laden Sie zur Vereinfachung D3JSDebuggen 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