Buat circles dan polygons pada leaflet

Sebelumnya telah saya jelaskan bagaimana cara membuat peta dan marker, pembuatan circle atau lingkaran juga sama seperti membuat marker, namun harus lebih mendetail tentang warna dan radiusnya, untuk membuat circle memerlukan fungsi L.circle(), lihat potongan kode berikut,

var circle = L.circle([51.505, -0.09], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
});
circle.addTo(map);

Berbeda pada pembuatan polygon, polygon memerlukan beberapa koordinat untuk membuat bidang pada peta, untuk membuat polygon kita menggunakan fungsi L.polygon(), lihat potongan kode berikut

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]);
polygon.addTo(map);

untuk kode lengkapnya adalah sebagai berikut

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--include css-->
        <link
            rel="stylesheet"
            href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
            integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
            crossorigin=""/>
        <style>
            #map, body { 
                margin: 0 !important;
                padding: 0 !important;
                height: 100vh;
            }
        </style>
        <!--include javascript-->
        <script
            src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
            integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
            crossorigin=""></script>
        <title>Leaflet Quick Start Guide</title>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">
            var map = L.map('map').setView([51.505, -0.09],13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© OpenStreetMap'
            }).addTo(map);
            var circle = L.circle([51.505, -0.09], {
                         color: 'red',
                         fillColor: '#f03',
                         fillOpacity: 0.5,
                         radius: 500
             });
             circle.addTo(map);
             var polygon = L.polygon([
                                     [51.509, -0.08],
                                     [51.503, -0.06],
                                     [51.51, -0.047]
                                     ]);
            polygon.addTo(map);
        </script>
    </body>
</html>

Buat circles dan polygons pada leaflet

Lainnya

Tinggalkan komentar Batalkan balasan