So erstellen Sie eine Logistikkarte in D3.js (ausführliches Tutorial)
In diesem Artikel wird hauptsächlich der Beispielcode zum Erstellen einer Logistikkarte mit D3.js vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.
In diesem Artikel wird der Beispielcode zum Erstellen einer Logistikkarte mit D3.js vorgestellt und mit allen geteilt. Die Details lauten wie folgt:
Beispielkarte
Produktionsideen
Sie müssen eine Karte von China als Hintergrund zeichnen.
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"); //SVG-Grafikgruppierung als Vorbereitung für den Aufruf
- erstellen
gmp, Hintergrundkarte und Startpunktmarkierungen speichern.
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");Projektionsfunktion erstellen
Breitengrad und Längengrad 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 aufgerufen werden können
Da es mehrere Endpunkte der Logistiklinie geben wird, werden sie 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ängengradsatz 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 Breiten- und Längengrads (Daten).
Rufen Sie die zuvor festgelegten auf project()-Methode, Konvertieren Sie den Breiten- und Längengrad des Endpunkts in ebene Koordinaten.
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 animieren Sie die Bewegung vom Startpunkt bis zum Endpunkt.
Nachdem die Markierung zum Endpunkt verschoben wurde, wird sie gelöscht, um Ressourcen zu 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 ein Beispiel für eine Animationswarteschlange, 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);
});Erstellen Sie eine Testschaltfläche und testen Sie die Zielstadtdaten
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]]);
});Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
So implementieren Sie ein Kartenraster mit Baidu Maps
Vergleich und Unterscheidung zwischen Express und Koa2 in NodeJS (ausführliches Tutorial )
Der Singleton-Modus in JS implementiert das Hinzufügen, Löschen, Ändern und Überprüfen von Daten
Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Logistikkarte in D3.js (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1677
14
1431
52
1334
25
1280
29
1257
24
So machen Sie Google Maps zur Standardkarte im iPhone
Apr 17, 2024 pm 07:34 PM
Die Standardkarte auf dem iPhone ist Maps, Apples proprietärer Geolokalisierungsanbieter. Obwohl die Karte immer besser wird, funktioniert sie außerhalb der Vereinigten Staaten nicht gut. Im Vergleich zu Google Maps hat es nichts zu bieten. In diesem Artikel besprechen wir die möglichen Schritte, um Google Maps als Standardkarte auf Ihrem iPhone zu nutzen. So machen Sie Google Maps zur Standardkarte auf dem iPhone. Das Festlegen von Google Maps als Standardkarten-App auf Ihrem Telefon ist einfacher als Sie denken. Befolgen Sie die nachstehenden Schritte – Erforderliche Schritte – Sie müssen Gmail auf Ihrem Telefon installiert haben. Schritt 1 – Öffnen Sie den AppStore. Schritt 2 – Suchen Sie nach „Gmail“. Schritt 3 – Klicken Sie auf neben der Gmail-App
So verwenden Sie Karten- und Standortfunktionen in Uniapp
Oct 16, 2023 am 08:01 AM
Verwendung von Karten- und Positionierungsfunktionen in uniapp 1. Einführung in den Hintergrund Mit der Popularität mobiler Anwendungen und der rasanten Entwicklung der Positionierungstechnologie sind Karten- und Positionierungsfunktionen zu einem unverzichtbaren Bestandteil moderner mobiler Anwendungen geworden. uniapp ist ein auf Vue.js basierendes plattformübergreifendes Anwendungsentwicklungs-Framework, mit dem Entwickler Code auf mehreren Plattformen teilen können. In diesem Artikel wird die Verwendung von Karten und Positionierungsfunktionen in Uniapp vorgestellt und spezifische Codebeispiele bereitgestellt. 2. Verwenden Sie die Komponente uniapp-amap, um die Kartenfunktion zu implementieren
Wie füge ich eine Geschäftsadresse zur Xiaohongshu-Karte hinzu? Wie fülle ich die Adresseinstellungen des Geschäfts aus?
Mar 29, 2024 am 09:41 AM
Da Xiaohongshu bei jungen Leuten immer beliebter wird, entscheiden sich immer mehr Menschen dafür, Geschäfte auf Xiaohongshu zu eröffnen. Viele unerfahrene Verkäufer stoßen beim Einrichten ihrer Geschäftsadresse auf Schwierigkeiten und wissen nicht, wie sie die Geschäftsadresse zur Karte hinzufügen sollen. 1. Wie füge ich die Geschäftsadresse zur Karte in Xiaohongshu hinzu? 1. Stellen Sie zunächst sicher, dass Ihr Geschäft über ein registriertes Konto bei Xiaohongshu verfügt und erfolgreich ein Geschäft eröffnet hat. 2. Melden Sie sich bei Ihrem Xiaohongshu-Konto an, rufen Sie das Store-Backend auf und suchen Sie die Option „Store-Einstellungen“. 3. Suchen Sie auf der Seite mit den Shop-Einstellungen nach der Spalte „Shop-Adresse“ und klicken Sie auf „Adresse hinzufügen“. 4. Geben Sie auf der angezeigten Seite zum Hinzufügen von Adressen die detaillierten Adressinformationen des Geschäfts ein, einschließlich Provinz, Stadt, Bezirk, Landkreis, Straße, Hausnummer usw. 5. Klicken Sie nach dem Ausfüllen auf die Schaltfläche „Hinzufügen bestätigen“. Xiaohongshu wird Ihnen die Adresse mitteilen
So verwenden Sie Übersichtsanweisungen auf Google Maps
Jun 13, 2024 pm 09:40 PM
Ein Jahr nach seiner Einführung hat Google Maps eine neue Funktion eingeführt. Sobald Sie auf der Karte eine Route zu Ihrem Ziel festgelegt haben, wird Ihre Reiseroute zusammengefasst. Sobald Ihre Reise beginnt, können Sie die Routenführung auf dem Sperrbildschirm Ihres Telefons „durchsuchen“. Sie können Google Maps verwenden, um Ihre voraussichtliche Ankunftszeit und Route anzuzeigen. Während Ihrer Reise können Sie Navigationsinformationen auf Ihrem Sperrbildschirm anzeigen. Wenn Sie Ihr Telefon entsperren, können Sie Navigationsinformationen anzeigen, ohne auf Google Maps zugreifen zu müssen. Wenn Sie Ihr Telefon entsperren, können Sie Navigationsinformationen anzeigen, ohne auf Google Maps zugreifen zu müssen. Durch Entsperren Ihres Telefons können Sie Navigationsinformationen anzeigen, ohne auf Google Maps zuzugreifen. Durch Entsperren Ihres Telefons können Sie Navigationsinformationen anzeigen, ohne auf Google Maps zuzugreifen. Sie können Navigationsinformationen anzeigen, ohne auf Google Maps zuzugreifen.
Meistern Sie die Kunst der Verwendung von Apple Maps Guides auf iPhone und iPad
Aug 30, 2023 am 09:25 AM
In einer sich ständig weiterentwickelnden technologischen Welt ist die Fähigkeit, auf digitalen Karten zu navigieren, zu einer wesentlichen Fähigkeit geworden. Dieser Artikel bietet eine umfassende Anleitung zur Verwendung von Apple Maps Guides auf iPhone und iPad, einer Funktion, die die Art und Weise, wie Benutzer ihre Umgebung erkunden und ihre Reisen planen, revolutioniert. Apple Maps ist eine integrierte Anwendung auf allen Apple-Geräten und wird ständig aktualisiert und verbessert, um ein nahtloses Navigationserlebnis zu bieten. Eine der bemerkenswertesten Funktionen ist die Guide-Funktion, die eine kuratierte Liste interessanter Orte in verschiedenen Städten auf der ganzen Welt bereitstellt. Diese Funktion ist nicht nur für Reisende von Vorteil, sondern auch ein Segen für Einheimische, die neue Attraktionen in ihrer Stadt entdecken möchten. Anleitung zur Verwendung von Apple Maps auf iOS Besuchen Sie zunächst Apple Maps
Cloudbasiertes und autobasiertes MapNeXt ist fertig! Erstellung hochpräziser Online-Karten der nächsten Generation
Jan 31, 2024 pm 06:06 PM
Oben geschrieben und das persönliche Verständnis des Autors: Je stärker die Fähigkeit intelligent fahrender Fahrzeuge, die Umgebung wahrzunehmen, zu modellieren und zu analysieren, bei kollaborativer, vernetzter und automatisierter Mobilität (CCAM) ist, desto bewusster und fähiger sind sie, Entscheidungen zu verstehen und zu treffen sowie komplexe Fahrszenarien sicher und effizient durchzuführen. Hochpräzise (HD) Karten stellen Straßenumgebungen mit zentimetergenauer Genauigkeit und semantischen Informationen auf Fahrspurebene dar und machen sie zu einem Kernbestandteil intelligenter Mobilitätssysteme und einem Schlüsselfaktor für die CCAM-Technologie. Diese Karten bieten automatisierten Fahrzeugen einen großen Vorteil beim Verständnis ihrer Umgebung. HD-Karten gelten auch als versteckte oder virtuelle Sensoren, da sie das Wissen physischer Sensoren (Karten), nämlich Lidar, Kameras, GPS und IMU, zusammenführen, um ein Modell der Straßenumgebung zu erstellen. HD-Karte
So erstellen Sie eine interaktive Karte mit HTML, CSS und jQuery
Oct 25, 2023 am 09:40 AM
So erstellen Sie eine interaktive Karte mit HTML, CSS und jQuery. Karten sind ein gängiges Visualisierungstool, mit dem Benutzer geografische Standorte und zugehörige Informationen leichter verstehen und navigieren können. Mithilfe von HTML, CSS und jQuery können wir eine interaktive Karte erstellen und einige unterhaltsame und nützliche Funktionen hinzufügen. In diesem Artikel erfahren Sie, wie Sie mit diesen Techniken Ihre eigene interaktive Karte erstellen. Erstellen Sie die HTML-Struktur. Zuerst müssen wir die HTML-Struktur erstellen, um die Karte aufzunehmen. Das Folgende ist eine grundlegende
Besser als alle Methoden! HIMap: Durchgängige vektorisierte HD-Kartenkonstruktion
Mar 19, 2024 pm 03:00 PM
Die Erstellung vektorisierter hochauflösender (HD) Karten erfordert die Vorhersage der Kategorien und Punktkoordinaten von Kartenelementen (z. B. Straßengrenzen, Fahrbahntrenner, Zebrastreifen usw.). Moderne Methoden basieren hauptsächlich auf dem Repräsentationslernen auf Punktebene zur Regression präziser Punktkoordinaten. Diese Pipeline weist jedoch Einschränkungen beim Abrufen von Informationen auf Elementebene und beim Behandeln von Fehlern auf Elementebene auf, z. B. falsche Elementformen oder Verschränkungen zwischen Elementen. Um die oben genannten Probleme zu lösen, schlägt dieses Papier ein einfaches und effektives Hybrid-Framework namens HIMap vor, um Informationen auf Punkt- und Elementebene vollständig zu lernen und mit ihnen zu interagieren. Konkret wird eine Hybriddarstellung namens HIQuery vorgestellt
