Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Schritte zum Erstellen einer Logistikkarte mit D3.js
Detaillierte Erläuterung der Schritte zum Erstellen einer Logistikkarte mit D3.js
- php中世界最好的语言Original
- 2018-04-13 10:32:031772Durchsuche
Dieses Mal gebe ich Ihnen eine detaillierte Schritt-für-Schritt-Anleitung zur Verwendung von D3.js zum Erstellen einer Logistikkarte. Was sind die Vorsichtsmaßnahmen für die Verwendung von D3.js zum Erstellen einer Logistikkarte? Das Folgende ist ein praktischer Fall. Schauen wir uns das gemeinsam an.
Produktionsideen
Als Hintergrund muss eine Karte von China gezeichnet werden.
- 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 D3JS. Um das Debuggen zu erleichtern, 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>
Erstellen Sie SVG und platzieren Sie alle folgenden Codes in <script></script>
var width=1000 , height=800; // 定义SVG宽高
var svg = d3.select("body p.fxmap")
.append("svg")
.attr("width", "width)
.attr("height", height)
.style("background","#000"); //
Erstellen Sie SVG-Grafikgruppierungen, um den Aufruf von
vorzubereiten gmp, speichert die Hintergrundkarte und Startpunktmarkierungen.
mline speichert die Verbindung zwischen Startpunkt und Ziel sowie den Zielpunkt.
Button, Button 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");
Erstellen Sie eine Projektionsfunktion
Längen- und Breitengrad 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 ebene Koordinaten
- Pfad ist eine Methode zum Umwandeln von Längen- und Breitengraden in Punktkoordinaten zum Zeichnen von Linien (Speichern). Sie müssen selbst Funktionen schreiben) Pfad erstellen)
var projection = d3.geoEquirectangular() .center([465,395]) // 指定投影中心，注意[]中的是经纬度 .scale(height) .translate([width / 2, height / 2]); var path = d3.geoPath().projection(projection);
Erstellen Sie Markierungs-Tags für mehrere Verbindungsendpunkte, die aufgerufen werden sollen
Da es mehrere Endpunkte der Logistiklinie geben wird, werden diese alle in einer Markierung genannt.
- Dieses Zeichen besteht aus einem Kreis in der Mitte + einem äußeren Kreis. 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");
Zeichnen Sie eine Karte von China und markieren Sie den Startpunkt (Changsha)
Der in der Karte verwendete Breiten- und Längengrad ist china.json. Es sind viele Dateien online
// 记录长沙坐标
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");
});
Erstellen Sie eine Methode zum Zeichnen einer Linie vom angegebenen Startpunkt zum Endpunkt und zeichnen Sie Markierungen an den Netzwerkpunkten.
Die Methode erfordert die Eingabe des Namens der Zielstadt (Stadt) sowie des Längen- und Breitengrads (Daten)
- Rufen Sie die zuvor eingerichtete project()-Methode auf, um den Längen- und Breitengrad des Ziels in ebene Koordinaten umzuwandeln.
- 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 implementieren Sie eine Bewegungsanimation vom Startpunkt bis zum Endpunkt
- Nachdem sich die Markierung zum verschoben hat Endpunkt, es wird gelöscht, Ressourcen 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();
};
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);
});
Testschaltfläche erstellen und Zielstadtdaten testen
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]]);
});
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:
Wie die Methode $.ajax() JSON-Daten vom Server erhält
Vue implementiert Shopping Warenkorb Detaillierte Erklärung des Small-Ball-Parabel-Effekts
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Erstellen einer Logistikkarte mit D3.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!