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:371225Durchsuche

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 public

Zugriff in Öffnen Sie den Browser „http://localhost:8000“, um die Webseite mit der Karte anzuzeigen.

Durch das Studium dieses Artikels haben die Leser gelernt, wie man PHP und Leaflet zum Erstellen von Kartenanwendungen verwendet. Wir haben gelernt, wie man das Lumen-Framework verwendet, wie man die Leaflet-Bibliothek importiert, wie man Karten in Vorlagen erstellt und wie man einen Webserver startet. Leser können diesen Artikel nutzen, um ein erstes Verständnis für die Verwendung von PHP zum Erstellen von Web-GIS-Anwendungen zu erlangen.

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!

php JavaScript composer html Token public map github http Access

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So führen Sie eine Datensynchronisierung in Echtzeit mit PHP und Firebase durchNächster Artikel：So führen Sie eine Datensynchronisierung in Echtzeit mit PHP und Firebase durch

In Verbindung stehende Artikel

Mehr sehen