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

Créer une application cartographique en utilisant PHP et OpenLayers

王林original: 2023-05-11 20:31:341030parcourir

Avec le développement d'Internet, de plus en plus d'applications doivent implémenter l'affichage visuel de cartes. Cet article explique comment créer une application cartographique à l'aide de PHP et OpenLayers.

1. Introduction à OpenLayers

OpenLayers est une bibliothèque JavaScript open source qui peut afficher des cartes dynamiques. En plus d'afficher les standards WMS, WFS et Google Maps, OpenLayers peut également afficher des cartes personnalisées, afficher des données vectorielles et prendre en charge des opérations interactives telles que le zoom avant, le zoom arrière et le panoramique sur la carte.

2. Configurer un environnement de développement

Avant de créer une application cartographique, vous devez configurer un environnement de développement local pour PHP et OpenLayers.

Environnement de développement PHP :

Il est recommandé d'utiliser XAMPP pour créer un environnement de développement PHP : https://www.apachefriends.org/download.html. Une fois l'installation terminée, entrez « localhost » dans votre navigateur local.

Environnement de développement OpenLayers :

Téléchargez la bibliothèque OpenLayers, décompressez-la et copiez le dossier "ol" dans le répertoire htdocs de XAMPP (le chemin par défaut est C:
mpphtdocs). Adresse de téléchargement de la bibliothèque : https://openlayers.org/download/.

3. Créer une application cartographique

Cet article prend la carte de la Chine comme exemple pour créer une application cartographique de base.

1. Créez un nouveau fichier HTML et introduisez la bibliothèque OpenLayers :

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="ol/ol.css" type="text/css">
    <script src="ol/ol.js"></script>
    <title>中国地图</title>
  </head>
  <body>
  </body>
</html>

2. Ajoutez un div dans la balise body pour afficher la carte :

<div id="map" class="map"></div>

3. Créez un fichier CSS et définissez la largeur, la hauteur et le style de. le conteneur de la carte :

.map {
  width: 100%;
  height: 500px;
}

4. Créez une carte dans un fichier JavaScript et définissez le point central et le niveau de zoom de la carte :

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([105.088, 36.042]),
    zoom: 4
  })
});

Dans ce code, un nouvel objet cartographique est créé et pointé vers l'élément div de la carte créé. Et créé une couche de tuiles et défini sa source sur OpenStreetMap, qui affiche les tuiles OSM sur la carte.

L'objet de vue spécifie la plage d'affichage initiale de la carte. Dans cet exemple, l'affichage initial a un niveau de zoom de 4 et le point central est réglé sur 105,088 de longitude et 36,042 de latitude.

5. Exécutez l'application cartographique et saisissez « localhost/map file name.html » dans le navigateur pour afficher l'application cartographique.

4. Ajouter des données vectorielles

Pour ajouter des données vectorielles à la carte, vous devez ajouter des sources et des couches au fichier JavaScript. Voici les étapes pour ajouter des données de limites de province :

1 Convertissez les données vectorielles au format GeoJSON. Vous pouvez utiliser QGIS pour convertir les fichiers shp au format GeoJSON.

2. Créez une source Vector dans le fichier JavaScript et utilisez le fichier GeoJSON comme source :

var vectorSource = new ol.source.Vector({
  url: 'data/provinces.geojson',
  format: new ol.format.GeoJSON()
});

Dans ce code, un nouvel objet VectorSource est créé et le fichier GeoJSON est utilisé comme attribut url, en utilisant ol.format. GeoJSON pour lire et analyser les données GeoJSON.

3. Créez un nouveau calque Vector et ajoutez-y la source Vector :

var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#ffcc33',
      width: 2
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255, 204, 51, 0.2)'
    })
  })
});

Dans ce code, un nouvel objet Layer Vector est créé et la source Vector est utilisée comme attribut source. Vous pouvez définir le style, ici vous définissez la couleur de la ligne et la largeur de la frontière de la province, ainsi que la couleur de remplissage et la transparence.

4. Ajoutez la couche Vecteur à la carte :

map.addLayer(vectorLayer);

Exécutez l'application cartographique pour voir les limites des provinces sur la carte de la Chine.

Cet article couvre les étapes de base pour créer une application cartographique à l'aide de PHP et OpenLayers, en ajoutant des données vectorielles. Je pense que cet article constituera une valeur de référence pour les développeurs lors de la création de leurs propres applications cartographiques.

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 css html format 切片 map 对象 https

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：Erreurs de ligne de commande PHP : choses que vous ne savez peut-être pasArticle suivant：Erreurs de ligne de commande PHP : choses que vous ne savez peut-être pas

Articles Liés

Voir plus