Belajar Cara Membuat WebGIS Menggunakan Leaflet.Js

Mari kita awal bersama perkenalan dulu bersama leaflet. Leaflet adalah Library Javascript yang bersifat Open-Source yang memungkinkan kita untuk membuat grafik di web site. Kita pasti akan berinteraksi bersama Leaflet dengan API yang terdokumentasi bersama efektif.

Leaflet sama {memiliki} pengukuran file yang sangat kecil tetapi dikemas bersama atribut yang berharga dan juga dapat dimanfaatkan lebih kendali jarak jauh bersama pluin. Nah kalau sebenarnya kenal, kalian perlu unduh leaflet js disini.

Pada Tutorial kali ini kalian memerlukan:

  • Komputer
  • Akses Internet (Kita dibutuhkan web untuk terhubung API Leaflet).
  • Browser (Mozilla, Chrome, Safari and so on.)
  • Text Editor (Sublime Text, Atom Editor, atau bahkan Visual Studio Code

Kalian sama perlu memahami umum HTML, CSS dan juga JS.Hanya ada 5 mengukur umum yang perlu kalian mematuhi untuk membuat grafik awalnya kalian.

  1. Buka textual content penerbit kalian dan juga kembangkan file baru-baru ini bersama ekspansi HTML.
  2. Kemudian ketikkan kode dibawah
<html>
<head>
<title>Leaflet Web Map</title>
<model>
</model>
</head>
<physique>
<h1>Peta Leaflet Pertama ku</h1>
    <div id="map"></div>  
<script>
</script>
</physique>
</html>
  1. Setelah miliknya sendiri ketikkan kode CSS dan juga JS pada dibawah tag head
<!--Ini Css-->
   <hyperlink
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />
<!--Ini JS-->
    <script
      src="https://unpkg.com/[email protected]/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
  1. Kemudian kita beri model pada id=map yang sebenarnya kita kembangkan di pertama.
#map {
    width: 960px;
    peak:500px;
}

Sekarang Dasar HTML dan juga CSS untuk MAP kita sebenarnya pelapis, simpan memasukkan JS dan juga MAP awalnya kita pasti akan pelapis.

  1. Berikut adalah kode JS untuk inisiliasi MAP
<!--Di sini saya memberi bagian berubah-ubah L, Kalian mungkin mengubahnya di daerah var-->
<script>
    var map = L.map('map',{
    heart: [-6.2008024,106.830451,12],  
    zoom: 15
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenRoadMap</a> contributors'
    }).addTo(map);
</script>

Kode yang sebenarnya total pasti akan terlihat seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Web Map</title>

   <hyperlink
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

    <script
      src="https://unpkg.com/[email protected]/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
<model>
#map {
    width: 960px;
    peak:500px;
}
</model>
</head>
<physique>
<h1>Peta Leaflet Pertama ku</h1>
    <div id="map"></div>
<script>
    var map = L.map('map',{
    heart: [-6.2008024,106.830451,12],
    zoom: 15
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenRoadMap</a> contributors'
    }).addTo(map);
</script>
</physique>
</html>

Sekarang grafik awalnya kalian sebenarnya pelapis, pada tutorial berikutnya kita pasti akan menemukan membuat pena(marker) pada grafik leaflet.

Lihat lebih banyak:  25 Cara Instal Adobe Premiere Paling Mudah

Anda ringan menonton: Belajar Cara Membuat WebGIS Menggunakan Leaflet.Js

Sumber: https://taylorswift10years.com

Kategori: Teknologi

Leave a Reply