D3.js で物流マップを作成する方法 (詳細なチュートリアル)
この記事では、D3.js を使用して物流マップを作成するためのサンプル コードを主に紹介します。
この記事では、D3.jsを使用して物流マップを作成するサンプルコードを紹介し、皆さんに共有します。詳細は次のとおりです:
サンプルマップ
制作アイデア
中国を背景として描く必要があります。
道路シートの始点と終点を描画するには、主要都市の緯度と経度の座標が必要です。
物流を受注した都市が点滅マークを描きます。
物流オーダーの対象都市が既に存在するため、ルートは描画されません。
新しい物流注文が生成されるたびに、ターゲットまでのルートに沿ってマークが移動するアニメーション効果が発生します。
ブラウザのリソース使用量を減らすために、描画後のデータをクリーンアップする必要があります。
コーディングを開始します
1. Web ページテンプレートを作成します
デバッグを容易にするために、d3.js ファイルをローカルにダウンロードします。 。 D3 の V4 バージョンが使用されるため、V3 バージョンとは異なることに注意してください。 P ブロックを作成し、描画の準備をします。<!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>var width=1000 , height=800; // 定义SVG宽高
var svg = d3.select("body p.fxmap")
.append("svg")
.attr("width", "width)
.attr("height", height)
.style("background","#000"); //- mline は、始点とターゲットの間の接続およびターゲット ポイントを保存します。
- ボタン、テスト用ボタン
投影関数の作成
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");緯度と経度は描画に直接使用できないため、平面座標に変換する必要があります。 d3js は、比較的豊富な投影メソッドを提供します。この例では、 geoEquirectangular() メソッドが使用されます。
- 投影は経度と緯度を平面座標に変換するメソッドです
- パスは経度と緯度を線描画用の点座標に変換するメソッドです(パスを構築するための関数を自分で作成する必要がありません)
複数の接続エンドポイントを呼び出せるように、マーカー マーカーを作成します
var projection = d3.geoEquirectangular()
.center([465,395]) // 指定投影中心，注意[]中的是经纬度
.scale(height)
.translate([width / 2, height / 2]);
var path = d3.geoPath().projection(projection);複数の物流接続エンドポイントがあるため、それらはすべてマーカー タグで呼び出されます。
- このマークは真ん中の円＋外側のリングで構成されています。外輪の点滅効果は別途作成します。
中国の地図を描き、出発点（長沙）をマークします
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");
});メソッドでは、目的地の都市名(city)と経度・緯度(データ)の入力が必要です
- 事前に確立したproject()メソッドを呼び出して、目的地の経度・緯度を平面座標に変換します。
- 始点(長沙)と終点の間の距離を線の長さとアニメーション時間のパラメータとして計算します。
- ライン上に円形のマークを描き、始点から終点までの動きをアニメーションさせます。
- マークは終点に移動した後、リソース節約のため削除されます。
- 以前に線点が描画されている場合、線は描画されず、移動マークのみが描画されます。
- 物流注文が処理されるたびに、都市レコードは +1 されます。
- マークの外側の円の点滅効果を実現するアニメーションチームのサンプルを作成しますテストボタンを作成し、ターゲット都市データをテストします
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); });ログイン後にコピー
// 创建对象，保存每个城市的物流记录数量
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();
};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]]);
});Baidu Mapを使用してマップグリッドを実装する方法
nodejsでのExpressとKoa2の比較と区別（詳細なチュートリアル）
JSのシングルトンモードは追加、削除、変更、クエリを実装しますデータ
以上がD3.js で物流マップを作成する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7564
15
1386
52
86
11
28
99
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 アプリの横にある をクリックします
uniappで地図と位置情報機能を使用する方法
Oct 16, 2023 am 08:01 AM
uniapp で地図および測位機能を使用する方法 1. 背景の紹介 モバイル アプリケーションの人気と測位技術の急速な発展により、地図および測位機能は現代のモバイル アプリケーションに不可欠な部分になりました。 uniapp は、Vue.js に基づいて開発されたクロスプラットフォーム アプリケーション開発フレームワークであり、開発者が複数のプラットフォームでコードを共有しやすくなります。この記事では、uniapp でのマップと位置決め関数の使用方法を紹介し、具体的なコード例を示します。 2. uniapp-amap コンポーネントを使用してマップ関数を実装します。
小紅樹地図に店舗の住所を追加するにはどうすればよいですか?店舗の住所設定はどのように記入すればよいですか？
Mar 29, 2024 am 09:41 AM
小紅書が若者の間で人気が高まるにつれて、小紅書に店舗を開くことを選択する人が増えています。多くの初心者販売者は、店舗の住所を設定するときに困難に直面し、地図に店舗の住所を追加する方法がわかりません。 1. 小紅樹の地図に店舗の住所を追加するにはどうすればよいですか? 1. まず、あなたのストアが小紅書に登録されたアカウントを持っており、ストアが正常にオープンしていることを確認してください。 2. Xiaohonshu アカウントにログインし、ストア バックエンドに入り、[ストア設定] オプションを見つけます。 3. ストア設定ページで、[ストアアドレス] 列を見つけて、[アドレスを追加] をクリックします。 4. 表示される住所追加ページで、都道府県、市、区、郡、番地、番地などの店舗の詳細な住所情報を入力します。 5. 入力後、「追加を確認」ボタンをクリックします。小紅書が住所をお知らせします
ハイチャートを使用してマップ ヒート マップを作成する方法
Dec 17, 2023 pm 04:06 PM
ハイチャートを使用してマップ ヒート マップを作成するには、特定のコード サンプルが必要です。ヒート マップは、さまざまな色合いで各エリアのデータ分布を表現できる視覚的なデータ表示方法です。データ視覚化の分野では、Highcharts は非常に人気のある JavaScript ライブラリであり、豊富なチャート タイプと対話型関数を提供します。この記事では、Highcharts を使用してマップ ヒート マップを作成する方法を紹介し、具体的なコード例を示します。まず、いくつかのデータを準備する必要があります
Google マップで一目でわかるルートを使用する方法
Jun 13, 2024 pm 09:40 PM
サービス開始から 1 年後、Google マップは新しい機能をリリースしました。地図上に目的地までのルートを設定すると、移動ルートがまとめられます。旅行が始まると、携帯電話のロック画面からルート案内を「参照」できます。 Google マップを使用すると、到着予定時刻とルートを確認できます。旅行中は、ロック画面でナビゲーション情報を表示できます。また、携帯電話のロックを解除すると、Google マップにアクセスせずにナビゲーション情報を表示できます。携帯電話のロックを解除すると、Google マップにアクセスせずにナビゲーション情報を表示できます。携帯電話のロックを解除すると、Google マップにアクセスせずにナビゲーション情報を表示できます。 携帯電話のロックを解除すると、Google マップにアクセスせずにナビゲーション情報を表示できます。 Google マップにアクセスせずにナビゲーション情報を表示できます。
iPhone および iPad で Apple Maps Guide を使用する技術をマスターする
Aug 30, 2023 am 09:25 AM
進化し続けるテクノロジーの世界では、デジタル マップをナビゲートする能力は不可欠なスキルとなっています。この記事では、iPhone および iPad で Apple Maps Guides を使用する方法についての包括的なガイドを提供します。この機能は、ユーザーが周囲を探索し、旅行を計画する方法に革命をもたらす機能です。 Apple マップはすべての Apple デバイスに組み込まれたアプリケーションであり、シームレスなナビゲーション エクスペリエンスを提供するために常に更新および改善されています。最も注目すべき機能の 1 つは、世界中のさまざまな都市で訪れるべき興味深い場所の厳選されたリストを提供するガイド機能です。この機能は旅行者にとって有益であるだけでなく、自分の街の新しい魅力を発見したいと考えている地元の人々にとっても有益です。 iOS で Apple マップを使用する方法ガイド まず、Apple マップにアクセスします
クラウドベースおよび車ベースの MapNeXt がすべて完了しました。次世代オンライン高精度地図の構築
Jan 31, 2024 pm 06:06 PM
上記および著者の個人的な理解 協調的で接続された自動化されたモビリティ (CCAM) では、インテリジェント運転車両が周囲の環境を認識、モデル化、分析する能力が強化されるほど、車両はより認識し、理解して意思決定を行うことができます。複雑な運転シナリオを安全かつ効率的に実行できます。高精度 (HD) マップは、センチメートルレベルの精度と車線レベルのセマンティック情報で道路環境を表現し、インテリジェント モビリティ システムの中核コンポーネントであり、CCAM テクノロジーを実現する重要な要素となっています。これらのマップは、自動運転車両が周囲の状況を理解する上で強力な利点を提供します。 HD マップは、物理センサー (マップ)、つまり LIDAR、カメラ、GPS、IMU からの知識を統合して道路環境のモデルを構築するため、隠れセンサーまたは仮想センサーともみなされます。 HDマップ
HTML、CSS、jQuery を使用してインタラクティブな地図を作成する方法
Oct 25, 2023 am 09:40 AM
HTML、CSS、および jQuery を使用してインタラクティブなマップを作成する方法 マップは、ユーザーが地理的位置および関連情報をより簡単に理解し、ナビゲートするのに役立つ一般的な視覚化ツールです。 HTML、CSS、jQuery を使用すると、インタラクティブなマップを作成し、楽しくて便利な機能を追加できます。この記事では、これらのテクニックを使用して独自のインタラクティブなマップを作成する方法について説明します。 HTML 構造の作成 まず、マップを保持する HTML 構造を作成する必要があります。以下は基本的なものです
