Maison >interface Web >js tutoriel >Cartographie avec le géocodeur PHP et leaflet.js

Cartographie avec le géocodeur PHP et leaflet.js

尊渡假赌尊渡假赌尊渡假赌original: 2025-02-22 10:10:14792parcourir

Les cartes interactives à l'intérieur d'une application Web ont de nombreuses utilisations. De la visualisation des données à la mise en évidence des points d'intérêt, les cartes devraient communiquer facilement des idées dans le contexte de l'emplacement.

La partie la plus difficile, cependant, consiste à convertir ces données en coordonnées que la carte peut comprendre. Heureusement, Geocoder PHP nous permet de nous connecter à différents fournisseurs de codages géo-codants. Combinée avec Leaflet.js, une bibliothèque JavaScript simple, la création de cartes est un jeu d'enfant.

Les plats clés

Geocoder PHP et Leaflet.js peuvent être combinés efficacement pour créer des cartes interactives au sein d'une application Web, convertissant les données en coordonnées que la carte peut comprendre facilement.
La bibliothèque Geocoder permet la connexion à différents fournisseurs de géo-codage et la possibilité de changer votre adaptateur si vos besoins changent, sans avoir à réécrire comment votre application reçoit les données.
Leaflet.js est une puissante bibliothèque JavaScript qui facilite la cartographie en manipulant la couche d'interaction des cartes, y compris la création de marqueurs individuels et la mise en forme de la gamme de données d'une manière que le dépliant attend.
L'apparence et l'interactivité de la carte peuvent être personnalisées à l'aide de diverses options et fonctions JS de folioles, et les données de ces fonctionnalités peuvent être récupérées à partir d'une base de données à l'aide de PHP, puis transmise aux fonctions JS de foliole.

Démarrage

avec le compositeur, y compris la bibliothèque GeoDer PHP est simple:

{
  "require": {
    "willdurand/geocoder": "*"
  }
}

Ajoutons également du HTML à un fichier index.php simple pour inclure Bootstrap afin que nous ayons un environnement agréable pour afficher notre carte:

<?php
require 'vendor/autoload.php';

?>
<!DOCTYPE html>
<html>
<head>
    <title>A simple map with Geocoder PHP and Leaflet.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div >
    <div >
        <div >
            <h1 >A simple map with Geocoder PHP and Leaflet.js</h1>
        </div>
        <div >
            <div >

            </div>
        </div>
    </div><!-- /row -->
</div> <!-- /container -->
<script></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Configuration du géocoder

Geocoder se facture comme la bibliothèque géocodeuse manquante pour PHP. Il peut être utilisé en trois étapes simples:

Enregistrez un adaptateur
Enregistrer un fournisseur
géocode!

Enregistrez un adaptateur

L'adaptateur sert de mécanisme pour se connecter et obtenir des données à votre fournisseur choisi via leur API. Certains adaptateurs utilisent la fonctionnalité intégrée dans PHP 5.3, comme Curl et Sockets. D'autres, comme Buzz, Guzzle et Zend HTTP Client, utilisent des bibliothèques open source tierces qui vous obligent simplement à ajouter leur dépendance à votre fichier de compositeur.

La beauté de la bibliothèque Geocoder est cette abstraction de l'étape de l'adaptateur. Il vous permet d'échanger votre adaptateur si vos besoins changent sans vous demander de réécrire comment votre application reçoit les données.

Pour cet exemple, nous allons utiliser Curl et la classe Curlhttpadapter incluse à l'intérieur de la bibliothèque GeoDer PHP.

Dans notre fichier index.php, ajoutons l'adaptateur:

// Setup geocoder adapter.
$adapter = new \Geocoder\HttpAdapter\CurlHttpAdapter();

Enregistrer un fournisseur

Il existe de nombreux fournisseurs de géocodage pris en charge à l'extérieur de la bibliothèque GeoDer PHP, y compris Google Maps, Bing Maps, Nominatim via OpenStreetMap et TomTom.

La liste complète peut être trouvée sur la lecture du référentiel GeoDer PHP.

Chaque fournisseur, représenté par ses classes respectives, a ses propres options. Selon vos besoins, vous pouvez enregistrer plusieurs fournisseurs pour diverses circonstances. Cela peut être utile si votre application doit cartographier des rues spécifiques à San Jose, Costa Rica à l'aide d'OpenStreetMap et de trouver un itinéraire rapide à Pékin, en Chine en utilisant Baidu.

Pour cet exemple, je vais simplement utiliser Google Maps, mais l'enregistrer d'une manière que si je veux ajouter un autre fournisseur à l'avenir, j'ai simplement besoin de l'ajouter à un tableau:

{
  "require": {
    "willdurand/geocoder": "*"
  }
}

géocode

Nous pouvons désormais transmettre l'adresse à la méthode GeoCode () dans votre objet $ Geocoder nouvellement instancié. Cela renverra un objet de résultat instancié par le biais du fournisseur choisi précédemment. Cet objet de résultat a des méthodes getLatitude () et getLongitude () que nous pouvons utiliser.

<?php
require 'vendor/autoload.php';

?>
<!DOCTYPE html>
<html>
<head>
    <title>A simple map with Geocoder PHP and Leaflet.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div >
    <div >
        <div >
            <h1 >A simple map with Geocoder PHP and Leaflet.js</h1>
        </div>
        <div >
            <div >

            </div>
        </div>
    </div><!-- /row -->
</div> <!-- /container -->
<script src="https://img.php.cn/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>

INTÉGRATION À LAFIGHETLET.JS

Leaflet.js est une puissante bibliothèque JavaScript qui rend la cartographie très facile.

Les cartes se composent de trois parties:

carreaux
Couche d'interaction (généralement via JavaScript et CSS)
Points de données

Les carreaux sont les carrés 256 par 256 pixels qui montrent le détail de la carte. Des services comme Mapbox et CloudMade vous permettent de créer vos propres Tilesets. Pour cet exemple, j'ai créé un compte gratuit avec CloudMade et j'utiliserai la clé API donnée pour afficher les tuiles de leur service d'hébergement.

La couche d'interaction est gérée par leaflet.js. J'inclus simplement la bibliothèque JavaScript et CSS dans notre modèle HTML de démarrage:

// Setup geocoder adapter.
$adapter = new \Geocoder\HttpAdapter\CurlHttpAdapter();

Les points de données ont été créés plus tôt avec mon code géocodeur. Je dois simplement formater la gamme de données d'une manière que le dépliant attend.

Dans cet exemple simple, je vais simplement créer des marqueurs individuels en tant que variables JavaScript qui seront incluses dans ma carte via des chaînes produites par PHP.

la dépliante a la possibilité que ces données soient également transmises via le format Geojson pour des ensembles de données plus grands et plus dynamiques.

// Create a chain of providers.
// Be sure to include my previously created adapter.
$chain = new \Geocoder\Provider\ChainProvider(
    array(
        new \Geocoder\Provider\GoogleMapsProvider($adapter),
    )
);

// Instantiate the geocoder.
$geocoder = new \Geocoder\Geocoder();

// Register my providers.
$geocoder->registerProvider($chain);

Parce que la folibre injecte le code de carte dans un élément DOM existant, nous devons d'abord définir cet élément à l'intérieur de notre HTML. Nous pouvons le faire en créant simplement une div avec un ID unique:

Nous pouvons alors cibler cet ID dans la foliole en appelant la méthode JavaScript MAP () intégrée et passer dans notre ID dans le pied de page:

// Demo locations
$locations = array(
    array(
        'address' => '3324 N California Ave, Chicago, IL, 60618',
        'title' => 'Hot Dougs',
    ),
    array(
        'address' => '11 S White, Frankfort, IL, 60423',
        'title' => 'Museum',
    ),
    array(
        'address' => '1000 Sterling Ave, , Flossmoor, IL, 60422',
        'title' => 'Library',
    ),
    array(
        'address' => '2053 Ridge Rd, Homewood, IL, 60430',
        'title' => 'Twisted Q',
    )
);

foreach ($locations as $key => $value) {
    // Try to geocode.
    try {
        $geocode = $geocoder->geocode($value['address']);
        $longitude = $geocode->getLongitude();
        $latitude = $geocode->getLatitude();

    } catch (Exception $e) {
        echo $e->getMessage();
    }
}

Maintenant, nous construisons les trois parties de notre carte. Pour enregistrer les carreaux, nous appelons simplement la méthode intégrée TileLayer (), définissant les attributs et le niveau de zoom si vous le souhaitez, puis ajoutez la méthode addto ():

<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

Enfin, nous imprimons nos données de carte en utilisant le tableau PHP que nous avons défini précédemment et nous assurons que la carte se concentre sur ces points de données en les définissant ensemble en tant que groupe. Dans l'ensemble, le JavaScript dans le pied de page serait:

$mapdata = $marker_group = array();

foreach ($locations as $key => $value) {
    // Try to geocode.
    try {
        $geocode = $geocoder->geocode($value['address']);
        $longitude = $geocode->getLongitude();
        $latitude = $geocode->getLatitude();

        // Create map data array
        $mapdata[] = markerCreator($latitude, $longitude, $value['title'], $key);

        // Marker grouping array
        $marker_group[] = "marker{$key}";

    } catch (Exception $e) {
        echo $e->getMessage();
    }
}

function markerCreator($lat, $long, $label, $key) {
    return "var marker{$key} = L.marker([{$lat}, {$long}]).addTo(map);
    marker{$key}.bindPopup(\"{$label}\");";
}

Si vous êtes arrivé jusqu'ici, vous remarquerez que rien ne se passe.

En effet, le dépliant n'injecte pas de propriétés sur la hauteur ou la largeur de la carte DIV, vous permettant de le coiffer et de le redimensionner comme vous le souhaitez. Donnez simplement à votre div une hauteur et une largeur, et votre carte devrait apparaître!

Conclusion

Vous pouvez créer de belles cartes interactives avec la bibliothèque GeoDer PHP et leaflet.js. Assurez-vous de consulter la documentation respective de chaque projet car il existe de nombreuses personnalisations plus avancées possibles.

Consultez la démo de cet article ou le prévoyez à GitHub.

Questions fréquemment posées (FAQ) sur la cartographie avec le géocodeur PHP et le dépliant JS

Comment puis-je intégrer la foliole JS avec PHP?

Intégration de la brochure JS avec PHP implique quelques étapes. Tout d'abord, vous devez inclure la bibliothèque de folières JS dans votre fichier PHP. Cela peut être fait en téléchargeant la bibliothèque et en le liant dans votre fichier PHP ou en utilisant un CDN. Une fois la bibliothèque incluse, vous pouvez initialiser une carte à l'aide de la fonction l.map (). Vous pouvez ensuite ajouter des couches, des marqueurs et d'autres fonctionnalités à la carte à l'aide de différentes fonctions JS de folioles. Les données de ces fonctionnalités peuvent être récupérées à partir d'une base de données à l'aide de PHP, puis transmises aux fonctions JS de la foliole.

Qu'est-ce que la géocodage et comment est-elle utilisée dans la foliole JS?

Géocodage est le processus est-il le processus de convertir les adresses en coordonnées géographiques, que vous pouvez utiliser pour placer des marqueurs sur une carte ou positionner la carte. Dans leaflet js, vous pouvez utiliser un service de géocodage comme Nominatim ou l'API géocodage de Google pour convertir les adresses en coordonnées. Une fois que vous avez les coordonnées, vous pouvez utiliser la fonction l.marker () pour placer un marqueur sur la carte aux coordonnées spécifiées.

Comment puis-je utiliser PHP pour récupérer les données à partir d'une base de données pour ma carte?

PHP peut être utilisé pour récupérer les données d'une base de données en utilisant ses fonctions intégrées pour l'interaction de la base de données. Par exemple, si vous utilisez une base de données MySQL, vous pouvez utiliser la fonction mysqli_connect () pour vous connecter à la base de données, puis utiliser la fonction mysqli_query () pour exécuter une requête SQL et récupérer des données. Les données récupérées peuvent ensuite être transmises aux fonctions JS de folidlet pour ajouter des fonctionnalités à la carte.

Comment puis-je ajouter des fonctionnalités interactives à ma carte?

Leaflet JS fournit diverses fonctions pour ajouter des fonctionnalités interactives à votre carte. Par exemple, vous pouvez utiliser la fonction l.popup () pour ajouter des fenêtres contextuelles à votre carte, qui peuvent afficher des informations supplémentaires lorsqu'un marqueur ou une autre fonctionnalité est cliqué. Vous pouvez également utiliser la fonction L.Control.layers () pour ajouter un contrôle des calques, ce qui permet aux utilisateurs de basculer entre les différentes couches de base et les couches de superposition.

Comment puis-je personnaliser l'apparence de ma carte?

L'apparence de votre carte peut être personnalisée à l'aide de diverses options et fonctions JS. Par exemple, vous pouvez utiliser la fonction setView () pour définir le centre géographique initial et le niveau de zoom de la carte. Vous pouvez également utiliser la fonction l.tileLayer () pour ajouter une couche de tuile à la carte, qui détermine l'apparence visuelle de la couche de base de la carte. Le paramètre d'options de la fonction l.map () peut être utilisé pour définir diverses autres options, telles que le niveau de zoom maximum de la carte, s'il faut afficher le contrôle d'attribution, etc. Utilisation de services de géocodage?

Lors de l'utilisation de services de géocodage, des erreurs peuvent se produire pour diverses raisons, telles que les problèmes de réseau, les entrées non valides ou dépassant les limites d'utilisation du service. Ces erreurs peuvent être gérées en utilisant des techniques de traitement des erreurs fournies par le langage de programmation que vous utilisez. Par exemple, dans PHP, vous pouvez utiliser l'instruction TRY-Catch pour attraper des exceptions et les gérer de manière appropriée.

Comment puis-je optimiser les performances de ma carte?

Il existe plusieurs façons d'optimiser les performances de votre carte. Une façon consiste à utiliser une couche de tuiles optimisée pour les performances, comme une couche de tuiles vectorielle. Une autre façon consiste à limiter le nombre de fonctionnalités affichées sur la carte à la fois, par exemple en utilisant le clustering ou en affichant uniquement les fonctionnalités dans la vue de carte actuelle. Vous pouvez également optimiser les performances de votre code PHP en utilisant des requêtes de base de données efficaces et en cache les résultats le cas échéant.

Comment puis-je rendre ma carte réactive?

Rendre votre carte réactive implique de m'assurer qu'elle s'affiche correctement sur différentes tailles d'écran et périphériques. Cela peut être réalisé en utilisant les requêtes multimédias CSS pour ajuster la taille et la disposition du conteneur de carte en fonction de la taille de l'écran. Vous pouvez également utiliser la fonction JS Map.invalidateSize () pour mettre à jour la taille et la position de la carte lorsque la taille de son conteneur change.

Comment puis-je ajouter des marqueurs personnalisés à ma carte?

Des marqueurs personnalisés peuvent être ajoutés à votre carte en utilisant la fonction l.icon (). Cette fonction vous permet de spécifier une image personnalisée à utiliser comme icône de marqueur. Vous pouvez également spécifier la taille, le point d'ancrage et d'autres propriétés de l'icône. L'icône personnalisée peut ensuite être utilisée lors de la création d'un marqueur en le faisant passer en option à la fonction l.marker ().

Comment puis-je utiliser la folière JS pour afficher les données d'un fichier Geojson?

Leaflet js fournit la fonction l.geojson (), qui peut être utilisée pour afficher les données d'un fichier Geojson sur votre carte. Cette fonction prend un objet Geojson en entrée et crée une couche contenant les fonctionnalités décrites par les données Geojson. Les fonctionnalités peuvent être stylisées et interagies avec l'utilisation de diverses options et méthodes fournies par la fonction l.geojson (). Les données Geojson peuvent être récupérées à partir d'un fichier ou d'un serveur utilisant PHP ou JavaScript.

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!

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：Création d'une extension chromée pour Diigo, partie 3Article suivant：Création d'une extension chromée pour Diigo, partie 3

Articles Liés

Voir plus