Maison > Article > développement back-end > Créer une application cartographique en utilisant PHP et Leaflet

Créer une application cartographique en utilisant PHP et Leaflet

WBOYoriginal: 2023-05-11 15:54:371149parcourir

Ces dernières années, la technologie Web SIG a été de plus en plus largement utilisée, et Leaflet, en tant que bibliothèque de cartes JavaScript open source légère, est devenue le premier choix pour de nombreuses applications de cartes Web. Les applications Web écrites en langage PHP peuvent facilement afficher des informations cartographiques et des données de localisation géographique sur le Web. Cet article explique comment créer une application cartographique à l'aide de PHP et Leaflet.

Préparation

Avant le développement, nous devons préparer quelques outils de développement. Tout d'abord, vous devez installer l'environnement de développement PHP au préalable. Le code de cet article est développé sur la base de la version PHP7.3.12. Deuxièmement, vous devez télécharger la bibliothèque Leaflet. Vous pouvez télécharger la dernière version de la bibliothèque sur le site officiel ou obtenir le code source sur GitHub. Enfin, nous devons choisir un framework web pour nous aider à construire rapidement des services web développés en PHP. Dans cet article nous choisissons d’utiliser un framework PHP : Lumen.

Créer une application cartographique

(1) Créer un projet Lumen

Nous pouvons installer Lumen via Composer. Entrez la commande suivante dans la ligne de commande (à condition que Composer ait été installé) :

composer create-project --prefer-dist laravel/lumen map-app

Cette commande créera un projet Lumen nommé map-app dans le répertoire de fichiers actuel.

(2) Installer les dépendances

Entrez le répertoire racine du projet et exécutez la commande suivante pour installer les dépendances requises :

composer install

(3) Intégrer Leaflet# 🎜🎜#

Nous créons un nouveau dossier (tel que "public") dans le répertoire racine du site Web et extrayons le fichier de bibliothèque Leaflet téléchargé dans ce dossier. Ajoutez le code suivant à la page HTML pour présenter la bibliothèque Leaflet :

<link rel="stylesheet" href="/public/leaflet/leaflet.css" />
<script type="text/javascript" src="/public/leaflet/leaflet.js"></script>

(4) Définir le routage

Dans le framework Lumen, nous utilisons généralement le routage pour gérer les requêtes d'URL. Créez un fichier nommé "web.php" dans le répertoire "routes" et définissez différentes URL correspondant aux différents processeurs. Par exemple :

<?php
$router->get('/', 'MapController@showMap');
?>

Nous créons un fichier nommé « MapController.php » dans le répertoire racine pour gérer différentes requêtes d'URL. Le fichier contient la méthode suivante :

<?php
namespace AppHttpControllers;

use LaravelLumenRoutingController as BaseController;

class MapController extends BaseController {

  public function showMap() {
    return view('map');
  }

}
?>

Cette méthode précise que lorsque l'utilisateur accède à l'URL "/", le modèle Blade nommé "map.blade.php" sera affiché en conséquence.

(5) Définition du modèle Blade

Blade est un moteur de modèle PHP extrêmement populaire qui nous permet d'écrire des fichiers modèles en utilisant un format de syntaxe spécifique. Dans le répertoire « resources/views », nous créons un fichier modèle nommé « map.blade.php ». Le fichier contient le code suivant :

<!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>

Ce fichier modèle définit la position initiale et le niveau de zoom d'une carte, en utilisant le style de plan de rue fourni par Mapbox, dans lequel le "accessToken" doit être renseigné. avec votre propre jeton d'accès Mapbox. Dans le fichier modèle, nous devons également référencer le fichier de bibliothèque Leaflet introduit dans le dossier « public ».

(6) Exécutez l'application

Vous pouvez maintenant saisir la commande suivante dans la ligne de commande pour démarrer le serveur Web :

php -S localhost:8000 -t public

Accès dans le navigateur « http://localhost:8000 » pour voir la page web montrant la carte.

Grâce à l'étude de cet article, les lecteurs ont appris à utiliser PHP et Leaflet pour créer des applications cartographiques. Nous avons appris à utiliser le framework Lumen, à importer la bibliothèque Leaflet, à créer des cartes dans des modèles et à démarrer un serveur Web. Les lecteurs peuvent utiliser cet article pour acquérir une compréhension préliminaire de la façon d'utiliser PHP pour créer des applications SIG Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript composer html Token public map github http Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment effectuer une synchronisation de données en temps réel à l'aide de PHP et FirebaseArticle suivant：Comment effectuer une synchronisation de données en temps réel à l'aide de PHP et Firebase

Articles Liés

Voir plus