cari

Rumah >hujung hadapan web >tutorial js >Pemetaan dengan PHP Geocoder dan Leaflet.js

Pemetaan dengan PHP Geocoder dan Leaflet.js

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌asal
2025-02-22 10:10:14792semak imbas

Pemetaan dengan PHP Geocoder dan Leaflet.js

Peta interaktif di dalam aplikasi web mempunyai banyak kegunaan hebat. Dari menggambarkan data untuk menonjolkan titik minat, peta dijangka menyampaikan idea dalam konteks lokasi dengan mudah.

Bahagian paling sukar, bagaimanapun, menukarkan data itu ke dalam koordinat yang dapat difahami oleh peta. Nasib baik, Geocoder PHP membolehkan kami menyambung ke penyedia geo-pengekodan yang berbeza. Digabungkan dengan leaflet.js, perpustakaan JavaScript yang mudah, membuat peta adalah angin.

Takeaways Key

    Geocoder PHP dan leaflet.js boleh digabungkan dengan berkesan untuk membuat peta interaktif dalam aplikasi web, menukar data ke dalam koordinat bahawa peta dapat difahami dengan mudah. ​​
    • Perpustakaan Geocoder membolehkan sambungan ke penyedia geo-pengekodan yang berbeza dan keupayaan untuk menghidupkan penyesuai anda jika keperluan anda berubah, tanpa perlu menulis semula bagaimana aplikasi anda menerima data.
  • leaflet.js adalah perpustakaan JavaScript yang kuat yang menjadikan pemetaan mudah dengan mengendalikan lapisan interaksi peta, termasuk membuat penanda individu dan memformat pelbagai data dengan cara risalah yang diharapkan.
  • Penampilan dan interaktiviti peta boleh disesuaikan dengan menggunakan pelbagai pilihan dan fungsi JS risalah, dan data untuk ciri -ciri ini dapat diambil dari pangkalan data menggunakan PHP dan kemudian dihantar ke fungsi JS risalah.
    • bermula

dengan komposer, termasuk perpustakaan php geocoder adalah mudah:

mari juga tambahkan beberapa HTML ke fail index.php mudah untuk memasukkan bootstrap supaya kami mempunyai persekitaran yang bagus untuk memaparkan peta kami di: 
{
  "require": {
    "willdurand/geocoder": "*"
  }
}

Menyediakan Geocoder 
<?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>

Geocoder bil sendiri sebagai Perpustakaan Geocoder yang hilang untuk PHP. Ia boleh digunakan dalam tiga langkah mudah:

Daftar penyesuai
  1. Daftar pembekal
  2. Geocode!
    4. Daftar penyesuai

Penyesuai berfungsi sebagai mekanisme untuk menyambung dan mendapatkan data ke pembekal pilihan anda melalui API mereka. Sesetengah penyesuai menggunakan fungsi terbina dalam dalam Php 5.3, seperti curl dan soket. Lain-lain, seperti klien Buzz, Guzzle, dan Zend HTTP, menggunakan perpustakaan sumber terbuka pihak ketiga yang hanya memerlukan anda untuk menambah kebergantungan mereka ke fail komposer anda.

Keindahan Perpustakaan Geocoder adalah abstraksi langkah penyesuai ini. Ia membolehkan anda menukar penyesuai anda jika keperluan anda berubah tanpa memerlukan anda menulis semula bagaimana aplikasi anda menerima data.

Untuk contoh ini, kami akan menggunakan curl dan kelas curlhttpadapter yang disertakan di dalam perpustakaan php geocoder.

Dalam fail index.php kami, mari tambahkan penyesuai:

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

Terdapat banyak penyedia geokod yang disokong oleh kotak perpustakaan Geocoder PHP, termasuk Peta Google, Peta Bing, Nominatim melalui OpenStreetMap, dan TomTom.

Senarai penuh boleh didapati di readme repositori Geocoder PHP.

Setiap pembekal, seperti yang diwakili oleh kelas masing -masing, mempunyai pilihan tersendiri. Bergantung pada keperluan anda, anda boleh mendaftarkan beberapa penyedia untuk pelbagai keadaan. Ini mungkin berguna jika aplikasi anda perlu memetakan jalan -jalan tertentu di San Jose, Costa Rica menggunakan OpenStreetMap dan mencari laluan cepat di Beijing, China menggunakan Baidu.

3

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

kini boleh lulus alamat ke kaedah geocode () di dalam objek geocoder $ yang baru diteruskan. Ini akan mengembalikan objek hasil yang diterapkan melalui penyedia yang dipilih sebelum ini. Objek hasil ini mempunyai kaedah getLitud () dan getLongitude () yang boleh kita gunakan.

Mengintegrasikan dengan leaflet.js 
<?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>

leaflet.js adalah perpustakaan JavaScript yang kuat yang menjadikan pemetaan sangat mudah. ​​

Peta terdiri daripada tiga bahagian:

jubin
  1. Lapisan interaksi (biasanya melalui JavaScript dan CSS)
  2. titik data
    4. Jubin adalah 256 oleh 256 piksel dataran yang menunjukkan perincian peta. Perkhidmatan seperti Mapbox dan CloudMade membolehkan anda membuat tileset anda sendiri. Untuk contoh ini, saya telah membuat akaun percuma dengan Cloudemade dan akan menggunakan kunci API yang diberikan untuk menunjukkan jubin dari perkhidmatan hosting mereka.

Lapisan interaksi dikendalikan oleh leaflet.js. Saya hanya menyertakan Perpustakaan JavaScript dan CSS Risalah ke dalam templat HTML starter kami:

titik data telah dibuat lebih awal dengan kod geokoder saya. Saya hanya perlu memformat pelbagai data dengan cara risalah yang diharapkan. 
// Setup geocoder adapter.
$adapter = new \Geocoder\HttpAdapter\CurlHttpAdapter();

Dalam contoh mudah ini, saya hanya akan membuat penanda individu sebagai pembolehubah JavaScript yang akan dimasukkan ke dalam peta saya melalui rentetan yang dihasilkan oleh PHP.

Risalah mempunyai pilihan untuk data ini juga akan diluluskan melalui format geojson untuk dataset yang lebih besar dan lebih dinamik.

Kerana risalah menyuntik kod peta ke dalam elemen DOM yang sedia ada, kita perlu menentukan elemen tersebut di dalam HTML kami. Kita boleh melakukan ini dengan hanya membuat div dengan ID yang unik: 
// 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);

kita kemudian dapat menargetkan id itu dalam risalah dengan memanggil kaedah JavaScript Peta () JavaScript dan lulus dalam ID kami di Footer:

Sekarang, kami membina tiga bahagian peta kami. Untuk mendaftarkan jubin, kami hanya memanggil kaedah TileLayer () terbina dalam, menentukan atribut dan tahap zum jika dikehendaki, kemudian memajukan kaedah addTo (): 
// 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();
    }
}

Akhirnya, kami mencetak data peta kami menggunakan array PHP yang kami tentukan sebelum ini, dan pastikan peta itu memusatkan diri pada titik data tersebut dengan mendefinisikannya bersama sebagai kumpulan. Semua dalam semua, JavaScript di footer akan menjadi: 
<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>

Jika anda mendapat sejauh ini, anda akan melihat bahawa tiada apa yang berlaku. 
$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}\");";
}

Ini kerana risalah tidak menyuntik sifat pada ketinggian atau lebar div peta, yang membolehkan anda menggayakannya dan mengubah saiznya seperti yang anda suka. Cukup berikan div anda ketinggian dan lebar, dan peta anda sepatutnya muncul!

Kesimpulan

Anda boleh membuat peta yang indah dan interaktif dengan perpustakaan php geocoder dan leaflet.js. Pastikan anda menyemak dokumentasi masing -masing projek kerana terdapat banyak penyesuaian yang lebih maju yang mungkin.

lihat demo untuk artikel ini atau garpu di GitHub.

Soalan Lazim (Soalan Lazim) Mengenai Pemetaan dengan Geocoder PHP dan Leaflet JS

Bagaimana saya boleh mengintegrasikan risalah JS dengan php?

Mengintegrasikan risalah JS dengan PHP melibatkan beberapa langkah. Pertama, anda perlu memasukkan Perpustakaan JS Leaflet dalam fail PHP anda. Ini boleh dilakukan dengan memuat turun perpustakaan dan menghubungkannya dalam fail PHP anda atau dengan menggunakan CDN. Sebaik sahaja perpustakaan dimasukkan, anda boleh memulakan peta menggunakan fungsi l.map (). Anda kemudian boleh menambah lapisan, penanda, dan ciri -ciri lain ke peta menggunakan pelbagai fungsi JS risalah. Data untuk ciri -ciri ini boleh diambil dari pangkalan data menggunakan PHP dan kemudian diserahkan kepada fungsi JS risalah. daripada menukar alamat ke dalam koordinat geografi, yang boleh anda gunakan untuk meletakkan penanda pada peta, atau meletakkan peta. Dalam risalah JS, anda boleh menggunakan perkhidmatan geokod seperti API Nominatim atau Google Geocoding untuk menukar alamat ke dalam koordinat. Sebaik sahaja anda mempunyai koordinat, anda boleh menggunakan fungsi l.marker () untuk meletakkan penanda pada peta pada koordinat yang ditentukan. 🎜>

php boleh digunakan untuk mengambil data dari pangkalan data dengan menggunakan fungsi terbina dalam untuk interaksi pangkalan data. Sebagai contoh, jika anda menggunakan pangkalan data MySQL, anda boleh menggunakan fungsi mysqli_connect () untuk menyambung ke pangkalan data, dan kemudian gunakan fungsi mysqli_query () untuk melaksanakan pertanyaan dan mengambil data SQL. Data yang diambil kemudiannya boleh dihantar ke fungsi JS risalah untuk menambah ciri ke peta.

Bagaimana saya boleh menambah ciri interaktif ke peta saya? ke peta anda. Sebagai contoh, anda boleh menggunakan fungsi l.popup () untuk menambah popup ke peta anda, yang boleh memaparkan maklumat tambahan apabila penanda atau ciri lain diklik. Anda juga boleh menggunakan fungsi L.Control.Layers () untuk menambah kawalan lapisan, yang membolehkan pengguna menukar antara lapisan asas dan lapisan lapisan yang berbeza.

Bagaimana saya boleh menyesuaikan penampilan peta saya?

Penampilan peta anda boleh disesuaikan dengan menggunakan pelbagai pilihan dan fungsi JS risalah. Sebagai contoh, anda boleh menggunakan fungsi setView () untuk menetapkan pusat geografi awal dan tahap zum peta. Anda juga boleh menggunakan fungsi L.TileLayer () untuk menambah lapisan jubin ke peta, yang menentukan penampilan visual lapisan asas peta. Parameter pilihan fungsi l.map () boleh digunakan untuk menetapkan pelbagai pilihan lain, seperti tahap zum maksimum peta, sama ada untuk memaparkan kawalan atribusi, dan sebagainya. Menggunakan perkhidmatan geocoding?

Apabila menggunakan perkhidmatan geokod, kesilapan boleh berlaku untuk pelbagai sebab, seperti isu rangkaian, input tidak sah, atau melebihi had penggunaan perkhidmatan. Kesalahan ini boleh dikendalikan dengan menggunakan teknik pengendalian ralat yang disediakan oleh bahasa pengaturcaraan yang anda gunakan. Contohnya, dalam PHP, anda boleh menggunakan pernyataan percubaan untuk menangkap pengecualian dan mengendalikannya dengan sewajarnya. prestasi peta anda. Salah satu cara ialah menggunakan lapisan jubin yang dioptimumkan untuk prestasi, seperti lapisan jubin vektor. Cara lain adalah untuk mengehadkan bilangan ciri yang dipaparkan pada peta sekaligus, contohnya dengan menggunakan clustering atau hanya memaparkan ciri -ciri dalam paparan peta semasa. Anda juga boleh mengoptimumkan prestasi kod PHP anda dengan menggunakan pertanyaan pangkalan data yang cekap dan dengan hasil caching apabila sesuai. Memaparkan dengan betul pada saiz dan peranti skrin yang berbeza. Ini boleh dicapai dengan menggunakan pertanyaan media CSS untuk menyesuaikan saiz dan susun atur bekas peta berdasarkan saiz skrin. Anda juga boleh menggunakan Fungsi JS Risalah.Invalidatesize () untuk mengemas kini saiz dan kedudukan peta apabila saiz perubahan kontenanya. Penanda tersuai boleh ditambah ke peta anda dengan menggunakan fungsi l.icon (). Fungsi ini membolehkan anda menentukan imej tersuai untuk digunakan sebagai ikon penanda. Anda juga boleh menentukan saiz, titik utama, dan sifat lain ikon. Ikon tersuai kemudiannya boleh digunakan apabila membuat penanda dengan menyampaikannya sebagai pilihan kepada fungsi l.marker ().

Bagaimana saya boleh menggunakan risalah JS untuk memaparkan data dari fail geojson?

Leaflet JS menyediakan fungsi l.geojson (), yang boleh digunakan untuk memaparkan data dari fail geojson pada peta anda. Fungsi ini mengambil objek Geojson sebagai input dan mewujudkan lapisan yang mengandungi ciri -ciri yang diterangkan oleh data geojson. Ciri -ciri ini boleh digayakan dan berinteraksi dengan menggunakan pelbagai pilihan dan kaedah yang disediakan oleh fungsi l.geojson (). Data geojson boleh diambil dari fail atau pelayan menggunakan php atau javascript.

Atas ialah kandungan terperinci Pemetaan dengan PHP Geocoder dan Leaflet.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php JavaScript composer sql mysql css bootstrap html print Array Object define if switch for format include require try catch cURL Error register using class finally map JS number function dom this location display position input github database http zoom Other
Kenyataan：
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
Artikel sebelumnya：Membuat sambungan krom untuk Diigo, Bahagian 3Artikel seterusnya：Membuat sambungan krom untuk Diigo, Bahagian 3

Artikel berkaitan

Lihat lagi