Dron dan Google Maps Tile Overlay (ImageMapType)

Ceritanya, abang saya membeli dron versi pro, walaupun masih versi “mangga dua” istilah salah seorang sekjur yang telah terlibat dalam proyek pemetaan milyaran, tapi saya sangat suka dengan dron jenis ini, karena harganya bersahabat … hehehe dan mudah digunakan (terbang/take-off dan landing)

Nah, selama ini, peggunaan dron tipikal ini hanya untuk pemetaan di kertas ataupun pembuatan point-cloud topography permukaan. Beberapa hari ini saya tertarik untuk menambahkan produk akhir bagi komunitas dron ini, yaitu peta Google Maps kustom, yang telah dilengkapi dengan peta yang dihasilkan dron ini.

Sebenarnya, sangat gampang meng-overlay sebuah gambar yang telah ter-raktifikasi ke Google Maps, namun, kali ini, kita tidak akan meng-upload ukuran gambar yang puluhan mega tersebut ke Internet untuk didownload oleh client. Tentu client akan mengeluh karena banyaknya data yang dibutuhkan untuk mendownload gambar tersebut keseluruhan pada awalnya (misalnya dengan KML/KMZ). Client yang meng-akses peta online kita dengan hand-phone akan cepat kehabisan paket datanya.

Salah satu solusi, adalah dengan menggunakan layanan ubin / tile sendiri.

Tile Server

Dengan metode ini, gambar yang besar tersebut dipotong-potong sesuai dengan ukuran ubin dan skala Google, sehingga client nantinya hanya men-download gambar yang dibutuhkannya saja tanpa harus mendownload semuanya.

 

Namun, yang jadi masalah adalah memotong-motong gambar hasil dron tersebut.

Solusinya:

 

Check dahulu extents dari gambar kita

ini dapat dilakukan degan gdalinfo

gdalinfo

Seperti terlihat di gambar, berkas hasil dron kita memiliki batas-batas koordinat / extents. Nah, yang kita perlu perhatikan adalah Upper Left dan Lower Right nya saja, karena kita butuh dua posisi ini untuk menentukan nomor ubin kita.

BTW, ngomong-ngomong, itu Pixel Size sepertinya sangat keren, ya … satu titik pixel hasil olahan dron tadi adalah 3 senti di dunia nyata (karena satuan gambar kita adalah meter, EPSG 3857). Ukuran peta kita adalah 7602×7864 pixel, maka panjang daerah yang tercover oleh dron adalah sekitar 216,005075286 meter x  223,449606952 meter

Kembali lagi ke Upper Left dan Lower Right …

Dari koordinat titik tersebut, selanjutnya kita perlu mendapatkan bounds x dan y Mapnik.

Menentukan Bounds X dan Y Mapnik

 

Nah, dari kodingan snippet JavaScript di atas, kita dapat dengan mudah menentukan nomor ubin yang akan digunakan untuk pelapis (overlay) di atas peta Google Map.

Contoh penggunaan snippet tadi adalah dengan membuat sebuah textarea dan beri id myTextArea

var myTextArea = document.getElementById('myTextArea');


for (var z=17;z<=22;z++){ myTextArea.value+=z+':[['+long2tile(dronUpperLeft.lng,z)+', '+long2tile(dronLowerRight.lng,z)+'], ['+lat2tile(dronUpperLeft.lat,z)+', '+lat2tile(dronLowerRight.lat,z)+']],'+'\n' }

Nantinya, kodingan ini akan menghasilkan bounds kita:

var bounds = {
    17:[[104393, 104394], [67846, 67847]],
    18:[[208787, 208789], [135693, 135694]],
    19:[[417575, 417578], [271386, 271389]],
    20:[[835150, 835156], [542772, 542778]],
    21:[[1670301, 1670312], [1085545, 1085557]],
    22:[[3340603, 3340625], [2171090, 2171114]]    
};

Jangan lupa membuang koma di ujung object terakhir, ya … karena JavaScript tidak secerdas Java

Nah, bounds tadi dapat digunakan untuk menampilkan peta dron kita ke Google Map

Menambahkan ImageMapType baru ke Google Map

function layer2ImageMapType(namaLayer){

    var _myImageMapType = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) { 
        
            // update as 2017-02-25
            // skip if not within our bounds

            if(
                bounds[zoom][0][0] > coord.x
                || coord.x > bounds[zoom][0][1]
                || bounds[zoom][1][0] > coord.y
                || coord.y > bounds[zoom][1][1]) {
                    return null;
            }
            
            return "/uin/tile20170211/"+zoom+"-"+coord.x+"-"+coord.y+".png";
        },
        tileSize: new google.maps.Size(256, 256),
        minZoom: 17,
        maxZoom: 22,
        //id:'localhost',
        name: namaLayer,
        alt:'Custom tile for '+ namaLayer,
        //opacity:0.70,
        isPng: true
    });
    return _myImageMapType;
}

Nah, kode di atas sebenarnya ngga bagus, tapi setidaknya jalan …

Masih banyak sampah di kode tersebut, namun, bisa untuk dipelajari..

Hasilnya

google-maximum-zoom-level-22

Nah, yang di atas karena kita batasin hanya sampai level 22 zoomnya.

Kalau mau melihat trafik jaringannya, berikut hasilnya: Terlihat bahwa ubin dari Google Maps yang satellite nya hanya sampai level 19, sedangkan kita gambarnya selain lebih bagus, lebih baru, juga bisa sampai ke level 22…

google-satellite-cuma-max-level-19Terlihat

Iklan