webgis-andi/project1.html at main · suryaalam12/webgis-andi · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mengembangkan WebGIS</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
    <link rel="stylesheet" href="index.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <button class="btn btn-primary back-button" onclick="goBack()">
      <i class="fas fa-arrow-left"></i> Kembali
    </button>
    <div class="container">
      <div class="konten">
        <h5 class="judul-tulisan">Fitur Edit Geometri Pada Polygon</h5>
        <img src="data/edit.jpeg" class="gambar" />
        <p class="tulisan">
          Proses data ini memiliki beberapa langkah yaitu menduplikasi layer
          atau get GeoJSON berdasarkan id yang akan dibuat untuk wadah mengedit
          suatu bentuk geometri kemudian layer duplikasi memiliki value yang
          akan dikonversi menggunakan JSON.stringfy untuk memasukan koordinat
          kedalam tabel geometri melalui plugin PostGIS kedalam Query INSERT.
        </p>
        <h5 class="judul-tulisan">Fitur Edit Geometri Pada Polygon</h5>
        <img src="data/pecah.jpeg" class="gambar" />
        <p class="tulisan">
          Proses ini memiliki 3 langkah utama yaitu duplikasi, delete, dan
          update duplikasi memiliki langkah sama dengan bagian edit geometri
          kemudian setelah itu langkah split polygon dilakukan melalui fungsi
          turfjs yang ada pada
          <a href="https://gis.stackexchange.com/questions/338322/splitting-a-polygon-into-multiple-polygon-by-multiple-line-strings-in-leaflet-an" target="_blank" style="color: blue; text-decoration: none"
            >link</a
          >, setelah mendapatkan 2 data geometri akan dikonversi menggunakan
          JSON.stringfy untuk memasukan koordinat kedalam tabel geometri melalui
          fungsi insert yang dimodifikasi untuk memberhentikan looping yang
          dlakukan oleh fungsi splitPolygon
          <a href=" https://jsfiddle.net/andisurya/9vt52ux7/1/" target="_blank" style="color: blue; text-decoration: none"
            >berikut</a
          >
          <p class="tulisan">WebGIS ini Juga memiliki fitur untuk CRUD data non spasial sebagai contoh pada saat pemecahan geomteri sendiri sudah membawa value pada atrribut tabel yang ada di data spasial yang juga bisa dirubah pada side-bar. Untuk proses seleksi data sendiri dilakukan kondisi yang ada pada fungsi PHP apakah colom memiliki value geomteri atau hanya kolom biasa </p>
        </p>
      </div>
    </div>
  </body>
  <script>
    function goBack() {
        window.history.back();
    }

    window.addEventListener('scroll', function() {
        var backButton = document.querySelector('.back-button');
        backButton.style.top = (10 + window.scrollY) + 'px';
    });
</script>
</html>