D3.js erstellt eine Logistikkarte-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

D3.js erstellt eine Logistikkarte

Mar 23, 2018 pm 01:17 PM

javascript 地图

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.

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf8&quot;&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;../../static/d3/d3.js&quot;&gt;&lt;/script&gt;
    &lt;title&gt;地图&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p class=&quot;fxmap&quot;&gt;
    &lt;/p&gt;
  &lt;/body&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;/html&gt;

Nach dem Login kopieren

SVG erstellen, alle folgenden Codes werden in <script></script&gt 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"); //

Nach dem Login kopieren

SVG-Grafikgruppierung als Vorbereitung für den Aufruf erstellen

gmp, speichern Sie die Hintergrundkarte und die Startpunktmarkierung.
mline, speichert die Verbindung zwischen Startpunkt und Ziel sowie den Zielpunkt.
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");

Nach dem Login kopieren

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

Nach dem Login kopieren

Erstellen Sie eine Markierung, damit mehrere Verbindungsendpunkte aufgerufen werden können

Da es mehrere Endpunkte der Logistiklinie geben wird, werden diese alle in einer Markierung genannt.
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");

Nach dem Login kopieren

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

Der in der Karte verwendete Längen- und Breitengrad ist china.json, diese Datei ist online. Es gibt viele

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

Nach dem Login kopieren

Erstellungsmethoden, das Zeichnen einer Linie vom angegebenen Startpunkt zum Endpunkt und das Zeichnen von 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();
    };

Nach dem Login kopieren

Erstellen Sie eine Animationswarteschlangeninstanz, 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);
    });

Nach dem Login kopieren

Erstellen Sie eine Testschaltfläche und testen Sie die Zielstadtdaten

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS-Methode zum Erhalten der Top-N-Farbwerte von Bildern

Detaillierte Erläuterung von Grafiken und Texten mithilfe von Render Methode

Das Applet verwendet .getImageInfo(), um Bildinformationen abzurufen

Das obige ist der detaillierte Inhalt vonD3.js erstellt eine Logistikkarte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

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