In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von D3.js zum Erstellen einer Logistikkarte vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
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.
Codierung starten
1. Erstellen Sie eine Webseitenvorlage
Laden Sie D3JS für einfaches Debuggen 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>SVG erstellen, alle folgenden Codes werden in <script></script> 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"); //Erstellen Sie eine SVG-Grafikgruppierung als Vorbereitung für den Aufruf von
gmp und 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");Projektionsfunktion erstellen
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 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);Erstellen Sie eine Markierung, damit mehrere Verbindungsendpunkte vorhanden sein können genannt
Da es mehrere Endpunkte der Logistikverbindung geben wird, werden sie alle in einem Marker-Tag 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");Zeichnen Sie eine Karte von China und markieren Sie den Startpunkt (Changsha)
Breitengrad und Längengrad, der in der Karte verwendet wird. Der Satz ist china.json. 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");
});Erstellungsmethoden vom angegebenen Startpunkt zum Endpunkt und zeichnen Sie Markierungen an Netzwerkpunkten. Die Methode
// 创建对象，保存每个城市的物流记录数量
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 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 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]]);
});Three.js-Implementierung von 3D-Kartenbeispielen Teilen
Einführung in die Methode zum Erstellen von Tabellen mit D3.js
D3.js zeichnet Vektorgrafiken + ziehbare Implementierungsideen
Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Erstellung von Logistikkarten mit D3.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
