Alternatif OpenLayers yang mendukung lebih banyak fitur sisi klien [ditutup]

Ditutup . Pertanyaan ini perlu lebih fokus . Saat ini tidak menerima jawaban.

Ingin meningkatkan pertanyaan ini? Perbarui pertanyaan sehingga berfokus pada satu masalah hanya dengan mengedit posting ini .

Ditutup 2 tahun yang lalu .

Saya sedang mempertimbangkan arsitektur yang berbeda untuk sistem yang idealnya akan menggunakan rendering sisi klien untuk fitur titik dan harus bebas plugin. Saya telah menggunakan aplikasi ini dikembangkan sebagai jawaban atas pertanyaan ini untuk menguji laptop saya (yang cukup mampu - quad-core 2,6 ghz cpu, memori 4 gb, tidak di bawah beban lain, Firefox 8) dengan jumlah titik yang berbeda di OpenLayers dan itu jelas tertinggal di 500 dan mulai berjuang lebih dari 1.000. Fitur yang dibuat secara acak tampaknya tidak memiliki pengendali acara dan semua menggunakan simbologi yang sama.

Saya berharap dapat menampilkan hingga 1.000 fitur, dengan hingga 10 simbol yang berbeda, semua dengan penangan klik dan mouse-over, dan pada platform yang kurang mampu.

Saya berharap untuk kinerja sisi klien yang lebih baik, terutama setelah melihat contoh GIS Cloud ini - saya tahu ini bekerja secara berbeda (HTML5 canvas vs SVG) tetapi perbedaan dalam kinerjanya sangat mencolok.

Pertanyaan kunci saya (jika Anda akan sangat baik) adalah:

Apakah aplikasi penghasil titik acak mewakili kinerja dalam aplikasi OpenLayers lain yang telah Anda tulis / gunakan?
Apakah ada API pemetaan web alternatif yang terbukti dan gratis yang mendukung layanan WMS (yang perlu saya gunakan) dan lebih cepat dengan fitur sisi klien, tanpa menggunakan Flash / Silverlight / plugins lain?
Adakah saran lain tentang apa yang harus saya selidiki?

Mengandalkan terutama pada rendering sisi-server adalah pilihan tetapi saya dan klien ingin menghindari ini karena kekhawatiran tentang peningkatan jumlah pengguna dan responsif dari UI.

— Tomfumb
sumber

Pada dual core 5 tahun saya, desktop 3gb RAM menggunakan aplikasi itu pada Firefox 8 (saat mengunduh distro ISO 1gb), 1.000 poin menarik cukup banyak secara instan, tidak ada kesulitan ... 10.000 membutuhkan waktu sekitar 1,5 detik.

— user2856

@LukePinner apakah itu hanya menggambar dengan cepat * dan panning / zooming dengan lancar? Mengambil data dan menggambar fitur tidak masalah bagi saya juga, tapi interaksi peta itulah masalahnya.

— Tomfumb

Saya baru saja mencoba aplikasi Anda di iPad2 saya dan menangani 1000 poin dengan sangat baik. Dengan 10K poin dibutuhkan beberapa detik untuk membuat awalnya, tapi kemudian berhasil dengan cukup baik. Jika mau, Anda selalu dapat mensubkelas kelas layer OL Vector dan mengimplementasikan kelas kustom. Saya bisa mengarahkan Anda ke satu contoh.

— unicoletti

Ya, tidak ada masalah panning / zooming. 1K poin memang sedikit melambat di netbook Atom 1.6GHz saya :)

— user2856

Jawaban:

Jawaban untuk pertanyaan pertama adalah Ya . Anda menggunakan OL dengan konfigurasi yang cukup umum. Ada trik yang dapat Anda gunakan untuk meningkatkan kinerja, saya akan membahasnya nanti.

Jawaban untuk pertanyaan 2 mungkin (terutama berkaitan dengan tahan luntur). Anda dapat mencari daftar alternatif di situs ini (yang muncul saat ini adalah Leaflet ).

Jawaban untuk pertanyaan 3: mulai dengan mengukur:

Saya mengedit salinan lokal aplikasi sehingga renderer secara eksplisit ditentukan dalam daftar opsi untuk layer Vector. Selama pengujian, saya akan menghilangkan renderer Canvas dan kemudian memuat kembali halaman percobaan dengan yang berbeda:

var pts = new OpenLayers.Layer.Vector("Points", {renderers: ["Canvas", "SVG", "VML"]});

Saya menambahkan timer ke fungsi redraw sehingga mencetak berapa banyak waktu yang dihabiskan untuk menggambar :

function redraw() {
var start = (new Date).getTime();
[...]
var diff = (new Date).getTime() - start;
console.log("redraw completed in "+diff+"ms");

Setelah itu saya mencoba beberapa kali berjalan pada Chrome 17 dan Firefox 8.0.1 pada OSX SL menggambar 1000 dan 5000 fitur. Yang mengejutkan saya, renderer SVG rata-rata 20% lebih cepat daripada renderer Canvas! (Catatan: pada Windows waktu js tidak setepat di OSX sehingga hasilnya bisa kurang konsisten).

Ini dan ceritamu itu

interaksi peta itulah masalahnya

, IMHO, memberi tahu kami bahwa hotspot ada dalam penanganan fitur Vector. Saat mengerjakan aplikasi saya, saya baru-baru ini melihatnya dan memutuskan untuk mensubklasifikasikan dan kemudian membuangnya dari semua kode rumit yang tidak berguna untuk poin sederhana. Memang saya menjadi sangat liar dan bahkan menghapus ketergantungan pada OpenLayers.Geometry.Point dan versi saya sekarang bekerja pada objek js sederhana dengan atribut x, y.

Pilihan Anda adalah, dalam urutan manfaat / biaya:

Opsi pertama adalah untuk menyaring titik-titik yang terlihat sisi-server dengan mengkonfigurasi opsi strategi ke lapisan vektor seperti berikut:

 strategies: [new OpenLayers.Strategy.Refresh({force:true}), new OpenLayers.Strategy.BBOX({ratio:2, resFactor: 3})],

Dengan cara ini ketika Anda memperbesar jumlah fitur yang ditarik sisi klien akan terbatas pada yang visibile pada tingkat itu, bukan semua.

Sebagai opsi kedua Anda dapat mempertimbangkan untuk menulis Vector / Renderer yang disesuaikan . Sebuah contoh dari sebuah kebiasaan, tanpa diputuskan, implementasi yang lebih cepat tersedia di halaman github saya di sini . Meskipun tidak cocok untuk semua penggunaan, itu harus cukup untuk memberikan gambaran kasar tentang apa yang saya sarankan.

Opsi ketiga ketika pengguna sepenuhnya diperbesar adalah menerapkan beberapa jenis fitur pengelompokan sisi-server sehingga titik dekat digabung menjadi satu, sehingga mengurangi jumlah fitur yang diambil.

— unicoletti
sumber

Terima kasih banyak atas tanggapan terperinci dan menyeluruh. Saya akan sangat mungkin melihat server-side clustering, semoga dikombinasikan dengan strategi caching sehingga operasi hanya terjadi ketika diperlukan. Salah satu opsi untuk sisi-server adalah MapGuide, sehingga pendekatan untuk mengambil dan mengelompokkan poin bisa sepenuhnya dikustomisasi. Saya juga akan bermain-main dengan opsi renderer untuk melihat perbedaannya.

— Tomfumb

Saya telah menambahkan tautan ke contoh vektor / kanvas yang saya gunakan dalam proyek saya.

— unicoletti

Wow contoh yang dilucuti membuat perbedaan besar, itu benar-benar mengesankan. Saya beralih dari berjuang dengan 1.000 fitur menjadi terbang dengan 10.000

— tomfumb

Saya memodifikasi contoh pertama (swingley.appspot.com) untuk menggunakan penyaji OL Canvas dan isi yang solid untuk poin, dan kinerja zoom dan pan sebenarnya sangat mirip dengan TagCanvas & TagVector Anda. Saya juga mengimplementasikan kembali fungsionalitas uji-tekan yang Anda hapus dalam modifikasi Anda sehingga saya dapat menguji kinerja komparatif - pendekatan Tag * sekitar 20% lebih cepat untuk mengidentifikasi fitur mana yang terkena (dari 5000). Mengingat upaya signifikan dalam menulis / memperbarui kelas khusus, dan kinerja serupa (dalam tes saya), saya pikir saya akan melihat apa yang dapat dilakukan vanilla OL

— tomfumb

Itu karena hit-test menggambar ulang semua fitur ke kanvas lain, sehingga mereka digambar dua kali dengan setiap penyegaran.

— unicoletti

Menggunakan UTFGrid dan TileMill Anda dapat menampilkan poin tanpa batas dengan kinerja yang cukup bagus. Menampilkan n poin acak adalah semacam contoh yang dibuat yang tidak akan berfungsi dalam situasi itu atau dengan GISCloud atau sihir serupa, meskipun - karena peretasan kinerja vektor biasanya memerlukan pengetahuan tentang dataset lengkap dan beberapa pra-pemrosesan: TileMill dan GISCloud melakukan banyak ubin.

— tmcw
sumber