Cipta aplikasi peta menggunakan PHP dan OpenLayers-tutorial php-php.cn

Cipta aplikasi peta menggunakan PHP dan OpenLayers

王林

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

asal

1148 orang telah melayarinya

Dengan perkembangan Internet, semakin banyak aplikasi memerlukan paparan peta visual. Artikel ini menerangkan cara membuat aplikasi peta menggunakan PHP dan OpenLayers.

1. Pengenalan kepada OpenLayers

OpenLayers ialah perpustakaan sumber terbuka JavaScript yang boleh memaparkan peta dinamik. Selain memaparkan WMS, WFS dan Peta Google standard, OpenLayers juga boleh memaparkan peta tersuai, memaparkan data vektor dan menyokong operasi interaktif seperti peta mengezum masuk, mengezum keluar dan menyorot.

2. Sediakan persekitaran pembangunan

Sebelum mencipta aplikasi peta, anda perlu menyediakan persekitaran pembangunan tempatan untuk PHP dan OpenLayers.

Persekitaran pembangunan PHP:

Adalah disyorkan untuk menggunakan XAMPP untuk membina persekitaran pembangunan PHP: https://www.apachefriends.org/download.html. Selepas pemasangan selesai, masukkan "localhost" dalam penyemak imbas tempatan anda.

Persekitaran pembangunan OpenLayers:

Muat turun perpustakaan OpenLayers, nyahzipnya dan salin folder "ol" ke direktori htdocs XAMPP (laluan lalai ialah C:
mpphtdocs). Alamat muat turun perpustakaan: https://openlayers.org/download/.

3. Cipta aplikasi peta

Artikel ini menggunakan peta China sebagai contoh untuk mencipta aplikasi peta asas.

1. Buat fail HTML baharu dan perkenalkan pustaka 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>

Salin selepas log masuk

2. Tambah div dalam teg badan untuk memaparkan peta:

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

Salin selepas log masuk

3 fail CSS, tetapkan lebar, ketinggian dan gaya bekas peta:

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

Salin selepas log masuk

4 Cipta peta dalam fail JavaScript, tetapkan titik tengah dan aras zum peta:

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

Salin selepas log masuk

<🎜. >Dalam kod ini, cipta Buat objek peta baharu dan arahkannya ke elemen div peta yang dibuat. Dan mencipta lapisan Jubin dan tetapkan sumbernya kepada OpenStreetMap, yang memaparkan jubin OSM pada peta.

Objek paparan menentukan julat paparan awal peta. Dalam contoh ini, paparan awal mempunyai tahap zum 4 dan titik tengah ditetapkan kepada 105.088 longitud dan 36.042 latitud.

5. Jalankan aplikasi peta dan masukkan "localhost/map file name.html" dalam pelayar untuk memaparkan aplikasi peta.

4. Tambahkan data vektor

Untuk menambah data vektor pada peta, anda perlu menambah sumber dan lapisan pada fail JavaScript. Berikut ialah langkah untuk menambah data sempadan wilayah:

1. Tukar data vektor kepada format GeoJSON. Anda boleh menggunakan QGIS untuk menukar fail shp ke dalam format GeoJSON.

2. Cipta sumber Vektor dalam fail JavaScript dan gunakan fail GeoJSON sebagai sumbernya:

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

Salin selepas log masuk

Dalam kod ini, objek VectorSource baharu dicipta dan fail GeoJSON digunakan sebagai sumber. atribut url, gunakan ol.format.GeoJSON untuk membaca dan menghuraikan data GeoJSON.

3. Cipta lapisan Vektor baharu dan tambahkan sumber Vektor padanya:

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

Salin selepas log masuk

Dalam kod ini, objek lapisan Vektor baharu dicipta dan sumber Vektor digunakan sebagai sifat sumbernya. Anda boleh menetapkan gaya, di sini anda menetapkan warna garisan dan lebar sempadan wilayah, serta warna isian dan ketelusan.

4. Tambahkan lapisan Vektor pada peta:

map.addLayer(vectorLayer);

Salin selepas log masuk

Jalankan aplikasi peta dan anda boleh melihat sempadan wilayah pada peta China.

Artikel ini merangkumi langkah asas untuk mencipta aplikasi peta menggunakan PHP dan OpenLayers, menambah data vektor. Saya percaya artikel ini akan menjadi nilai rujukan untuk pembangun apabila membina aplikasi peta mereka sendiri.

Atas ialah kandungan terperinci Cipta aplikasi peta menggunakan PHP dan OpenLayers. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!