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

Rumah

pembangunan bahagian belakang

tutorial php

Cipta aplikasi peta menggunakan PHP dan OpenLayers

王林

May 11, 2023 pm 08:31 PM

php apl openlayers

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Akan R.E.P.O. Ada Crossplay?

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7548

Tutorial CakePHP

1382

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Dec 20, 2024 am 11:31 AM

Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c

7 Fungsi PHP Saya Menyesal Saya Tidak Tahu Sebelum ini Nov 13, 2024 am 09:42 AM

Jika anda seorang pembangun PHP yang berpengalaman, anda mungkin merasakan bahawa anda telah berada di sana dan telah melakukannya. Anda telah membangunkan sejumlah besar aplikasi, menyahpenyahpepijat berjuta-juta baris kod dan mengubah suai sekumpulan skrip untuk mencapai op

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Feb 07, 2025 am 11:57 AM

Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data

Jelaskan JSON Web Tokens (JWT) dan kes penggunaannya dalam PHP API. Apr 05, 2025 am 12:04 AM

JWT adalah standard terbuka berdasarkan JSON, yang digunakan untuk menghantar maklumat secara selamat antara pihak, terutamanya untuk pengesahan identiti dan pertukaran maklumat. 1. JWT terdiri daripada tiga bahagian: header, muatan dan tandatangan. 2. Prinsip kerja JWT termasuk tiga langkah: menjana JWT, mengesahkan JWT dan muatan parsing. 3. Apabila menggunakan JWT untuk pengesahan di PHP, JWT boleh dijana dan disahkan, dan peranan pengguna dan maklumat kebenaran boleh dimasukkan dalam penggunaan lanjutan. 4. Kesilapan umum termasuk kegagalan pengesahan tandatangan, tamat tempoh, dan muatan besar. Kemahiran penyahpepijatan termasuk menggunakan alat debugging dan pembalakan. 5. Pengoptimuman prestasi dan amalan terbaik termasuk menggunakan algoritma tandatangan yang sesuai, menetapkan tempoh kesahihan dengan munasabah,

Program PHP untuk mengira vokal dalam rentetan Feb 07, 2025 pm 12:12 PM

Rentetan adalah urutan aksara, termasuk huruf, nombor, dan simbol. Tutorial ini akan mempelajari cara mengira bilangan vokal dalam rentetan yang diberikan dalam PHP menggunakan kaedah yang berbeza. Vokal dalam bahasa Inggeris adalah a, e, i, o, u, dan mereka boleh menjadi huruf besar atau huruf kecil. Apa itu vokal? Vokal adalah watak abjad yang mewakili sebutan tertentu. Terdapat lima vokal dalam bahasa Inggeris, termasuk huruf besar dan huruf kecil: a, e, i, o, u Contoh 1 Input: String = "TutorialSpoint" Output: 6 menjelaskan Vokal dalam rentetan "TutorialSpoint" adalah u, o, i, a, o, i. Terdapat 6 yuan sebanyak 6

Terangkan pengikatan statik lewat dalam php (statik: :). Apr 03, 2025 am 12:04 AM

Mengikat statik (statik: :) Melaksanakan pengikatan statik lewat (LSB) dalam PHP, yang membolehkan kelas panggilan dirujuk dalam konteks statik dan bukannya menentukan kelas. 1) Proses parsing dilakukan pada masa runtime, 2) Cari kelas panggilan dalam hubungan warisan, 3) ia boleh membawa overhead prestasi.

Apakah kaedah Magic PHP (__construct, __destruct, __call, __get, __set, dll) dan menyediakan kes penggunaan? Apr 03, 2025 am 12:03 AM

Apakah kaedah sihir PHP? Kaedah sihir PHP termasuk: 1. \ _ \ _ Membina, digunakan untuk memulakan objek; 2. \ _ \ _ Destruct, digunakan untuk membersihkan sumber; 3. \ _ \ _ Call, mengendalikan panggilan kaedah yang tidak wujud; 4. \ _ \ _ Mendapatkan, melaksanakan akses atribut dinamik; 5. \ _ \ _ Set, melaksanakan tetapan atribut dinamik. Kaedah ini secara automatik dipanggil dalam situasi tertentu, meningkatkan fleksibiliti dan kecekapan kod.

See all articles