Heim > Artikel > Backend-Entwicklung > Erstellen Sie eine Kartenanwendung mit PHP und Leaflet
Erstellen Sie eine Kartenanwendung mit PHP und Leaflet
- WBOYOriginal
- 2023-05-11 15:54:371149Durchsuche
In den letzten Jahren wurde die Web-GIS-Technologie immer häufiger eingesetzt, und Leaflet ist als leichte Open-Source-JavaScript-Kartenbibliothek zur ersten Wahl für viele Webkartenanwendungen geworden. In der PHP-Sprache geschriebene Webanwendungen können problemlos Karteninformationen und geografische Standortdaten im Web anzeigen. In diesem Artikel wird erläutert, wie Sie eine Kartenanwendung mit PHP und Leaflet erstellen.
- Vorbereitung
Vor der Entwicklung müssen wir einige Entwicklungstools vorbereiten. Zunächst müssen Sie die PHP-Entwicklungsumgebung vorab installieren. Der Code in diesem Artikel basiert auf der PHP7.3.12-Version. Zweitens müssen Sie die Leaflet-Bibliothek herunterladen. Sie können die neueste Version der Bibliothek von der offiziellen Website herunterladen oder den Quellcode auf GitHub herunterladen. Schließlich müssen wir ein Web-Framework auswählen, das uns hilft, schnell in PHP entwickelte Webdienste zu erstellen. In diesem Artikel entscheiden wir uns für die Verwendung eines PHP-Frameworks: Lumen.
- Erstellen Sie eine Kartenanwendung
(1) Erstellen Sie ein Lumen-Projekt
Wir können Lumen über Composer installieren. Geben Sie den folgenden Befehl in die Befehlszeile ein (vorausgesetzt, Composer wurde installiert):
composer create-project --prefer-dist laravel/lumen map-app
Dieser Befehl erstellt ein Lumen-Projekt mit dem Namen „map-app“ im aktuellen Dateiverzeichnis.
(2) Abhängigkeiten installieren
Geben Sie das Projektstammverzeichnis ein und führen Sie den folgenden Befehl aus, um die erforderlichen Abhängigkeiten zu installieren:
composer install
(3) Integrieren Leaflet# 🎜🎜#
Wir erstellen einen neuen Ordner (z. B. „public“) im Stammverzeichnis der Website und extrahieren die heruntergeladene Leaflet-Bibliotheksdatei in diesen Ordner. Fügen Sie der HTML-Seite den folgenden Code hinzu, um die Leaflet-Bibliothek vorzustellen:<link rel="stylesheet" href="/public/leaflet/leaflet.css" /> <script type="text/javascript" src="/public/leaflet/leaflet.js"></script>(4) Routing definieren Im Lumen-Framework verwenden wir normalerweise Routing, um URL-Anfragen zu verarbeiten. Erstellen Sie eine Datei mit dem Namen „web.php“ im Verzeichnis „routes“ und definieren Sie verschiedene URLs, die verschiedenen Prozessoren entsprechen. Zum Beispiel:
<?php
$router->get('/', 'MapController@showMap');
?> Wir erstellen eine Datei mit dem Namen „MapController.php“ im Stammverzeichnis, um verschiedene URL-Anfragen zu verarbeiten. Die Datei enthält die folgende Methode: <?php
namespace AppHttpControllers;
use LaravelLumenRoutingController as BaseController;
class MapController extends BaseController {
public function showMap() {
return view('map');
}
}
?>Diese Methode gibt an, dass beim Zugriff des Benutzers auf die URL „/“ die Blade-Vorlage mit dem Namen „map.blade.php“ entsprechend angezeigt wird. (5) Definition Blade-Vorlage Blade ist eine äußerst beliebte PHP-Vorlagen-Engine, die es uns ermöglicht, Vorlagendateien mit einem bestimmten Syntaxformat zu schreiben. Im Verzeichnis „resources/views“ erstellen wir eine Vorlagendatei mit dem Namen „map.blade.php“. Die Datei enthält den folgenden Code: <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/public/leaflet/leaflet.css" />
<script src="/public/leaflet/leaflet.js"></script>
<style>
#mapid { height: 600px; }
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'change me'
}).addTo(mymap);
</script>
</body>
</html>Diese Vorlagendatei definiert die Anfangsposition und Zoomstufe einer Karte unter Verwendung des von Mapbox bereitgestellten Straßenkartenstils, in den das „accessToken“ eingefüllt werden muss mit Ihrem eigenen Mapbox Access Token. In der Vorlagendatei müssen wir auch auf die Leaflet-Bibliotheksdatei verweisen, die im Ordner „public“ eingeführt wurde. (6) Führen Sie die Anwendung aus Jetzt können Sie in der Befehlszeile den folgenden Befehl eingeben, um den Webserver zu starten: php -S localhost:8000 -t publicZugriff in Öffnen Sie den Browser „http://localhost:8000“, um die Webseite mit der Karte anzuzeigen.
- Fazit
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Kartenanwendung mit PHP und Leaflet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!