Marker animasi LeafletJS dengan video

Meskipun Anda telah menulis kode dasar untuk L.animatedMarker, saya akan menjelaskannya untuk pendidikan lebih lanjut. Saya telah menggunakan beberapa referensi eksternal, seperti tutorial Mapbox GoPro dan JSFiddle di posting StackExchange yang menjelaskan peristiwa Vimeo.

Anda dapat melihat hasil saya di JSFiddle berikut: http://jsfiddle.net/GFarkas/4mo8e9da/ . Sayangnya, Anda tidak dapat menguji "manfaat tambahan karena dapat bergerak maju dan mundur dalam video dan penanda di telepon". Namun, Anda dapat mengujinya di situs host lokal.

Pada 9 baris pertama kode Anda mengatur peta Mapbox dasar dengan Leaflet. Ini memiliki level zoom tengah dan standar. Mulai saat itu, Anda dapat melompat ke baris 638, kode panjang itu hanyalah kode GeoJSON yang disalin.

Bagian selanjutnya dari kode menjadikan garis GeoJSON ke peta sebagai fitur garis sederhana.

var line = L.geoJson(ride, {
    style: {
        weight: 7,
        opacity: 1,
        color: '#0d8709',
        opacity: 0.7
    }
});

Pada bagian selanjutnya, saya harus mengekstrak koordinat dari array GeoJSON dan mengganti nilai lan / lot, karena format GeoJSON menggunakan urutan koordinat lon / lat. Saya telah menggunakan loop untuk tugas ini.

var raw = [];

for (var i = 0; i < ride.features[0].geometry.coordinates.length; i++) {
    var tmp = [];
    tmp[0] = ride.features[0].geometry.coordinates[i][1];
    tmp[1] = ride.features[0].geometry.coordinates[i][0];
    raw.push(tmp);
}

Sekarang saya memiliki susunan koordinat yang benar, saya bisa membuat fitur polyline, yang merupakan satu-satunya input yang valid L.animatedMarkersejauh yang saya tahu.

var coords = L.polyline(raw),
    animatedMarker = L.animatedMarker(coords.getLatLngs(), {
        distance: 100,
        interval: 2500,
        autoStart: false
});

The distancedan intervalpilihan menentukan kecepatan penanda pada baris. Anda harus menyetelnya dengan baik, sehingga video Anda akan berakhir pada saat yang sama dengan penanda Anda. Saya juga harus mengatur autoStartopsi false, jadi nanti saya bisa memulai penanda dengan video.

Mulai sekarang, inilah bagian "sihir". Jika Anda ingin memiliki kendali atas video dan marker Anda secara bersamaan, Anda harus menggunakan API situs favorit Anda selain dari Leaflet. Dalam contoh ini saya telah menggunakan kerangka Fimeog Vimeo. Jika Anda ingin menyematkan video dari YouTube, Anda harus melihat bagaimana Anda dapat menggunakan API untuk tugas ini. Pada langkah selanjutnya saya telah menambahkan L.popuplayer dan mengikatnya ke marker.

var popup = L.popup({
    keepInView: false,
    autoPan: false,
    closeButton: false,
    closeOnClick: false,
    maxWidth: 1000
}).setContent('<iframe id="player1" src="https://player.vimeo.com/video/69426498?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0&amp;api=1&amp;player_id=player1" width="200" height="150" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');

animatedMarker.bindPopup(popup).openPopup();

Opsi paling penting dalam objek ini adalah konten. Anda harus menambahkan ID ke iframetag dan memasukkannya ke tautan video, juga sebagai permintaan &player_id=player1. Anda juga harus memasukkan permintaan untuk menggunakan API Vimeo dengan &api=1.

Saya menggunakan kode sampel untuk menulis acara pendengar untuk video. Kode sampel menggunakan JQuery, begitu juga saya dan saya hanya akan merinci bagian kode yang dikustomisasi.

player.addEvent('ready', function() {
    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('play', onPlay);
    player.addEvent('seek', onSeek);
});

Kami akan membutuhkan empat acara dari video. Kita harus tahu apakah itu dijeda ( pause), jika sudah selesai ( finish), apakah sedang diputar ( play) atau jika kita melompat di video ( seek). Perhatian: jangan gunakan playProgressacara untuk mengikatnya animatedMarker.start(), itu akan menyebabkan marker berakselerasi tak terkendali. Sekarang untuk membuat fungsi yang tepat untuk acara tersebut.

function onPause(id) {
    animatedMarker.stop();
}

function onFinish(id) {
    animatedMarker.stop();
}

function onPlay(id) {
    animatedMarker.start();
}

function onSeek(data, id) {
    animatedMarker._i = Math.round(data.percent*raw.length);
}

Tiga peristiwa pertama akan mengembalikan fungsi untuk memulai atau menghentikan penanda di telepon jika video telah dimulai atau dihentikan. Acara keempat sedikit berbeda. Untuk memindahkan penanda di peta dengan video, kita harus menggunakan rumus untuk mengatur tempat baru penanda di peta. Tempat penanda saat ini (simpul dalam polyline) disimpan dalam marker._iatribut jika L.animatedMarkervariabel Anda dipanggil marker. Untungnya ituseekevent mengembalikan objek dengan durasi, posisi, dan persentase video yang diputar (dalam skala antara 0 dan 1). Jika kami mengembalikan titik terdekat ke jumlah titik dikalikan dengan persentase video yang diinginkan, dan membulatkannya ke bilangan bulat terdekat, kami mendapatkan posisi penanda di telepon pada momen video yang diinginkan dengan perkiraan yang baik. Anda dapat mengoptimalkan keakuratan metode ini dengan membuat durasi gerakan penanda selama video dan bekerja dengan banyak poin (tentu saja itu hanya berfungsi dengan baik jika simpul terdistribusi secara merata di garis).

Saya harap jawaban ini akan membantu dan maaf untuk bahasa Inggris saya yang buruk.

MEMPERBARUI:

Jika Anda ingin penanda Anda mengikuti petunjuk Anda saat video dijeda, Anda tidak akan bisa menggunakannya L.animatedMarker.update(). Anda harus menggunakan L.animatedMarker.start()dan L.animatedMarker.stop()yang akan menyebabkan penanda melompati titik. Sayangnya ini akan mengurangi akurasi animasi, tetapi ini adalah harga yang harus Anda bayar untuk peta interaktif (sampai penulis memperbaiki L.animatedMarker.update()fungsinya).

Gabor Farkas
sumber

Marker animasi LeafletJS dengan video

Jawaban: