検索

ホームページ  >  記事  >  ウェブフロントエンド  >  D3.jsを使って物流マップを作成する手順を詳しく解説

D3.jsを使って物流マップを作成する手順を詳しく解説

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-13 10:32:031848ブラウズ

今回は、D3.jsを使用して物流マップを作成する手順について詳しく説明します。 D3.jsを使用して物流マップを作成する場合の注意事項については、次のとおりです。一見。

制作アイデア

  1. 中国の地図を背景として描く必要があります。

    2. 道路シートの始点と終点を描画するには、主要都市の緯度と経度の座標が必要です。

    3. 物流を受注した都市が点滅マークを描きます。

    4. 物流注文の目的地都市がすでに存在するため、ルートは描画されません。

    5. 新しい物流注文が生成されるたびに、ターゲットまでのルートに沿ってマークが移動するアニメーション効果が発生します。

    6. ブラウザのリソース使用量を減らすために、描画後のデータをクリーンアップする必要があります。

コーディングを始めましょう

1.Webページテンプレートを作成します

D3JS をロードします。

デバッグの便宜上、d3.js ファイルをローカルに直接ダウンロードして、それをロードするパスに変更します。 D3 の V4 バージョンが使用されるため、V3 バージョンとは異なることに注意してください。

P ブロックを作成し、描画できるようにします。

りー

SVG を作成し、以下のコードをすべて <script></script> に配置します

<!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 グラフィック グループを作成します

  1. gmp は、背景マップと開始点マーカーを保存します。

  3. mline は、始点とターゲットの間の接続およびターゲット ポイントを保存します。

  5. ボタン、テスト用のボタン 

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

投影機能の作成

  1. 経度と緯度は描画に直接使用できないため、平面座標に変換する必要があります。 d3js は、比較的豊富な投影メソッドを提供します。この例では、 geoEquirectangular() メソッドが使用されます。

    2. 投影は経度と緯度を平面座標に変換するメソッドです

    3. パスは経度と緯度を線描画用の点座標に変換するメソッドです (パスを構築するための関数を記述する必要がなくなります) 

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

複数の接続エンドポイント呼び出しのマーカーを作成する

  1. 物流ラインの終点は複数あるため、それらはすべてマーカーで呼び出されます。

    2. このマークは、真ん中の円+外側のリングで構成されています。外輪の点滅効果は別途作成します。

    3. りー

中国の地図を描き、出発点(長沙)をマークしてください

地図で使用されている緯度と経度のセットは china.json です。オンラインには多くのファイルがあります

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

指定した始点から終点まで線を描画し、ネットワーク点にマーカーを描画するメソッドを作成します。

  1. このメソッドでは、目的地の都市名(city)と経度・緯度(データ)の入力が必要です

    2. 事前に確立したproject()メソッドを呼び出して、目的地の経度・緯度を平面座標に変換します。

    3. 始点(長沙)と終点の間の距離を線の長さとアニメーション時間のパラメータとして計算します。

    4. ライン上に円形のマークを描き、始点から終点までの移動アニメーションを実装します

    5. マークが終点に移動したら、リソースを節約するために削除されます。

    6. 以前に線点が描画されている場合、線は描画されず、移動マークのみが描画されます。

    7. 物流注文が処理されるたびに、都市レコードは +1 されます。

    8. りー
アニメーション キュー インスタンスを作成して、マークの外側の円の点滅効果を実現します

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");
テスト ボタンを作成し、ターゲットの都市データをテストします 

// 记录长沙坐标
    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");
    });
この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

$.ajax()メソッドでサーバーからjsonデータを取得する方法

vue ショッピングカートの小さなボール放物線効果を実現する詳細な説明

以上がD3.jsを使って物流マップを作成する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JSでの配列の使い方を詳しく解説次の記事：JSでの配列の使い方を詳しく解説

関連記事

続きを見る