D3.jsを使って物流マップを作成する手順を詳しく解説-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

php中世界最好的语言

Apr 13, 2018 am 10:32 AM

javascript 地図

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

制作アイデア

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

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

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

gmp は、背景マップと開始点マーカーを保存します。
mline は、始点とターゲットの間の接続およびターゲットポイントを保存します。
ボタン、テスト用のボタン

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

ログイン後にコピー

投影機能の作成

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

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

ログイン後にコピー

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

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

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

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

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

ログイン後にコピー

。

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

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

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

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 までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7517

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

GoogleマップをiPhoneのデフォルト地図にする方法 Apr 17, 2024 pm 07:34 PM

iPhone のデフォルトの地図は、Apple 独自の地理位置情報プロバイダーである Maps です。マップは改善されていますが、米国外ではうまく機能しません。 Googleマップと比べて何も提供するものはありません。この記事では、Google マップを iPhone のデフォルトの地図として使用するための実行可能な手順について説明します。 Google マップを iPhone のデフォルトの地図にする方法 Google マップを携帯電話のデフォルトの地図アプリとして設定するのは、思っているよりも簡単です。以下の手順に従ってください – 前提条件 – 携帯電話に Gmail がインストールされている必要があります。ステップ 1 – AppStore を開きます。ステップ 2 – 「Gmail」を検索します。ステップ 3 – Gmail アプリの横にあるをクリックします

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

小紅樹地図に店舗の住所を追加するにはどうすればよいですか?店舗の住所設定はどのように記入すればよいですか？ Mar 29, 2024 am 09:41 AM

小紅書が若者の間で人気が高まるにつれて、小紅書に店舗を開くことを選択する人が増えています。多くの初心者販売者は、店舗の住所を設定するときに困難に直面し、地図に店舗の住所を追加する方法がわかりません。 1. 小紅樹の地図に店舗の住所を追加するにはどうすればよいですか? 1. まず、あなたのストアが小紅書に登録されたアカウントを持っており、ストアが正常にオープンしていることを確認してください。 2. Xiaohonshu アカウントにログインし、ストアバックエンドに入り、[ストア設定] オプションを見つけます。 3. ストア設定ページで、[ストアアドレス] 列を見つけて、[アドレスを追加] をクリックします。 4. 表示される住所追加ページで、都道府県、市、区、郡、番地、番地などの店舗の詳細な住所情報を入力します。 5. 入力後、「追加を確認」ボタンをクリックします。小紅書が住所をお知らせします

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

ハイチャートを使用してマップヒートマップを作成する方法 Dec 17, 2023 pm 04:06 PM

ハイチャートを使用してマップヒートマップを作成するには、特定のコードサンプルが必要です。ヒートマップは、さまざまな色合いで各エリアのデータ分布を表現できる視覚的なデータ表示方法です。データ視覚化の分野では、Highcharts は非常に人気のある JavaScript ライブラリであり、豊富なチャートタイプと対話型関数を提供します。この記事では、Highcharts を使用してマップヒートマップを作成する方法を紹介し、具体的なコード例を示します。まず、いくつかのデータを準備する必要があります

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック