Erstellen Sie eine Kartenanwendung mit PHP und OpenLayers-PHP-Tutorial-php.cn

Erstellen Sie eine Kartenanwendung mit PHP und OpenLayers

王林

Freigeben： 2023-05-11 20:32:02

Original

1118 Leute haben es durchsucht

Mit der Entwicklung des Internets müssen immer mehr Anwendungen die visuelle Kartenanzeige implementieren. In diesem Artikel wird erläutert, wie Sie eine Kartenanwendung mit PHP und OpenLayers erstellen.

1. Einführung in OpenLayers

OpenLayers ist eine JavaScript-Open-Source-Bibliothek, die dynamische Karten anzeigen kann. Neben der Anzeige von Standard-WMS, WFS und Google Maps kann OpenLayers auch benutzerdefinierte Karten und Vektordaten anzeigen und interaktive Vorgänge wie das Vergrößern, Verkleinern und Schwenken der Karte unterstützen.

2. Richten Sie eine Entwicklungsumgebung ein

Bevor Sie eine Kartenanwendung erstellen, müssen Sie eine lokale Entwicklungsumgebung für PHP und OpenLayers einrichten.

PHP-Entwicklungsumgebung:

Es wird empfohlen, XAMPP zum Erstellen einer PHP-Entwicklungsumgebung zu verwenden. Download-Adresse: https://www.apachefriends.org/download.html. Geben Sie nach Abschluss der Installation „localhost“ in Ihren lokalen Browser ein.

OpenLayers-Entwicklungsumgebung:

Laden Sie die OpenLayers-Bibliothek herunter, entpacken Sie sie und kopieren Sie den Ordner „ol“ in das htdocs-Verzeichnis von XAMPP (der Standardpfad ist C:#🎜🎜 #mpphtdocs ). Download-Adresse der Bibliothek: https://openlayers.org/download/.

3. Erstellen Sie eine Kartenanwendung

In diesem Artikel wird die Karte von China als Beispiel für die Erstellung einer einfachen Kartenanwendung verwendet.

1 Erstellen Sie eine neue HTML-Datei und führen Sie die OpenLayers-Bibliothek ein:

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

Nach dem Login kopieren

2. Fügen Sie ein div im Body-Tag hinzu, um die Karte anzuzeigen:

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

Nach dem Login kopieren

# 🎜 🎜#3. Erstellen Sie eine CSS-Datei, legen Sie die Breite, Höhe und den Stil des Kartencontainers fest:

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

Nach dem Login kopieren

4. Erstellen Sie die Karte in einer JavaScript-Datei, legen Sie den Mittelpunkt und die Zoomstufe fest Map:

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
  })
});

Nach dem Login kopieren

In diesem Code wird ein neues Map-Objekt erstellt und auf das erstellte Map-Div-Element verwiesen. Und einen Kachel-Layer erstellt und seine Quelle auf OpenStreetMap eingestellt, wodurch OSM-Kacheln auf der Karte angezeigt werden.

Das Ansichtsobjekt gibt den anfänglichen Anzeigebereich der Karte an. In diesem Beispiel hat die anfängliche Anzeige eine Zoomstufe von 4 und der Mittelpunkt ist auf 105,088 Längengrad und 36,042 Breitengrad eingestellt.

5. Führen Sie die Kartenanwendung aus und geben Sie „localhost/map file name.html“ in den Browser ein, um die Kartenanwendung anzuzeigen.

4. Vektordaten hinzufügen

Um Vektordaten zur Karte hinzuzufügen, müssen Sie Quellen und Ebenen in der JavaScript-Datei hinzufügen. Hier sind die Schritte zum Hinzufügen von Provinzgrenzdaten:

1 Konvertieren Sie die Vektordaten in das GeoJSON-Format. Sie können QGIS verwenden, um SHP-Dateien in das GeoJSON-Format zu konvertieren.

2. Erstellen Sie eine Vektorquelle in der JavaScript-Datei und verwenden Sie die GeoJSON-Datei als Quelle:

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

Nach dem Login kopieren

In diesem Code wird ein neues VectorSource-Objekt erstellt und GeoJSON-Dateien als Verwenden Sie für deren URL-Attribut ol.format.GeoJSON, um GeoJSON-Daten zu lesen und zu analysieren.

3. Erstellen Sie eine neue Vektorebene und fügen Sie die Vektorquelle hinzu:

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)'
    })
  })
});

Nach dem Login kopieren

In diesem Code wird ein neues Vektorebenenobjekt erstellt und die Vektorquelle als Quelle verwendet Attribut. Sie können den Stil festlegen. Hier können Sie die Linienfarbe und Breite der Provinzgrenze sowie die Füllfarbe und Transparenz festlegen.

4. Fügen Sie die Vektorebene zur Karte hinzu:

map.addLayer(vectorLayer);

Nach dem Login kopieren

Führen Sie die Kartenanwendung aus, um die Provinzgrenzen auf der China-Karte anzuzeigen.

Dieser Artikel behandelt die grundlegenden Schritte zum Erstellen einer Kartenanwendung mit PHP und OpenLayers und dem Hinzufügen von Vektordaten. Ich glaube, dass dieser Artikel für Entwickler von großem Referenzwert sein wird, wenn sie ihre eigenen Kartenanwendungen erstellen.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Kartenanwendung mit PHP und OpenLayers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!