Leaflet: Ruang di antara ubin pada tingkat zoom pecahan di browser Webkit

Tidak ada ide. :( Meskipun saya hanya melihat masalah di Safari, - Chrome / Opera berfungsi dengan baik.

Apakah ada yang punya ide bagaimana ini bisa diperbaiki?

Saya punya ide, tapi itu terkait dengan kata "radikal" dan "eksperimental":

https://github.com/IvanSanchez/Leaflet.gl

Salah satu hal yang saya temukan adalah tekstur harus dijepit. yaitu jika baris ini dihapus: https://github.com/IvanSanchez/Leaflet.gl/blob/master/src/core/GlUtil.js#L74 irisan ("spasi di antara ubin") muncul (saat tekstur membungkus segitiga dan setengah piksel dari sisi lain ubin ditampilkan). Jadi, tebakan saya adalah bahwa Webkit antialiasing setengah piksel di tepi setiap gambar.

Sampai sekarang, segitiga tilelayer membentuk jaring lengkap yang dibuat tanpa irisan ... tetapi kata-kata "eksperimental" akan mengatasinya untuk saat ini.

@mourner Efeknya lebih kuat di Safari, tetapi juga terlihat di Chrome.

@IvanSanchez Wow kerja bagus, tapi saya rasa saya belum bisa menggunakannya.

@Eschon ya, saya mungkin tidak memperhatikan ini karena di layar Retina, itu bahkan kurang terlihat.

Ini tampaknya memengaruhi Firefox sekarang juga dalam beberapa kasus.
Saya tidak bisa mereproduksinya di jsFiddle tetapi jika Anda melihat situs itu
Saya mendapatkan ruang yang sama di Firefox 39 dan 41.0a2

Sunting: Tampaknya ada masalah dengan iframe. Jika saya membuka peta secara langsung, itu tidak mereproduksi.

Saya ragu ini akan mungkin dilakukan untuk 1.0 tanpa banyak peretasan. Mendorong ke bagian bawah backlog.

Kami juga mengalami masalah yang sama di Chrome terbaru. Saya berharap Anda menemukan kemungkinan perbaikan karena peta OpenStreet tidak ditampilkan dengan baik dengan garis-garis ini. Terima kasih.

Terutama pada peta atau gambar yang lebih gelap (dalam kasus saya) masalahnya cukup terlihat. Menurut saya antialiasing di browser menyebabkan ruang di antara ubin karena transformasi _fractional_ selama pembesaran, seperti yang disebutkan oleh Ivan.

Sampai solusi yang lebih baik tersedia, saya akan menggunakan solusi ini (atau hack) untuk membuat ubin 1 piksel lebih besar, dengan efek samping yang tumpang tindih dengan 1 px. Selain itu ubin akan sedikit diperbesar dan diskalakan (sebesar 1px).

/* 
 * Workaround for 1px lines appearing in some browsers due to fractional transforms
 * and resulting anti-aliasing.
 * https://github.com/Leaflet/Leaflet/issues/3575
 */
(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });
})()

@cmulders Terima kasih atas solusinya!
Karena kami terutama memiliki peta resor ski yang sebagian besar berwarna putih dan biru. Kami mengabaikan spasi untuk saat ini, dengan solusi Anda, ini terlihat jauh lebih baik.

Membuat jsbin dengan ubin gelap cartodb, garis-garisnya terlihat bahkan di layar retina:
http://jsbin.com/ratoli/5/edit?html , js, keluaran

Safari / Chrome buggy, FF OK untuk saya.

Kami harus membuat laporan bug Chrome tanpa Leaflet untuk ini, jadi ini diperbaiki di versi Chrome mendatang.

@hyperknot Saya rasa sudah ada laporan bug Chrome, tetapi saya tidak dapat menemukannya sekarang.

Saya menggunakan leafletjs 1.0 beta dan terkadang saya melihat bug ini juga di (terbaru: chrome, safari, firefox) di osx El Capitan. ketika saya mengedit properti gambar transform css dengan 1px, ubin yang diedit sejajar dengan ubin di sebelahnya.

// ex.
 transform: translate3d(1556px, -81px, 0px);
 // to
 transform: translate3d(1555px, -80px, 0px);

Terkadang bug ini tidak muncul (selisih 1px itu) !! tidak yakin mengapa :( tapi saat ini saya menebak itu ada hubungannya dengan gaya penampung peta.

Sunting: Katakanlah ubin sejajar dengan benar pada render dan tidak menunjukkan perbedaan 1px apa pun, celah akan terlihat pada acara pemindahan peta. Perilakunya seperti kilatan batas 1px di sekitar ubin.

Saya menemukan solusi css yang menghilangkan masalah bagi saya di Safari 9.1 di OS X El Capitan:

.leaflet-tile-container img {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
}

Namun, saya tidak dapat mengambil banyak kredit, saya mengambilnya dari jawaban Stackoverflow berikut yang juga mengisyaratkan _why_ this help: http://stackoverflow.com/a/17822836/138103

Menggunakan box-shadow menyelesaikan masalah secara lebih langsung: ini memperluas dimensi pengecatan ulang kotak, memaksa WebKit untuk mengecat ulang piksel ekstra. Implikasi kinerja yang diketahui dari box-shadow di browser seluler secara langsung berkaitan dengan radius blur yang digunakan, jadi bayangan satu piksel seharusnya memiliki sedikit atau tanpa efek.

Mungkin ini dapat digunakan sebagai perbaikan yang tepat, meskipun mungkin akan lebih baik jika orang lain mencoba ini terlebih dahulu. Namun, ini berfungsi untuk saya dan sepertinya tidak menyebabkan masalah di browser lain.

@href Mungkin Anda bisa membuat permintaan tarik dengan perbaikan itu? Itu akan mempermudah pengujian.

@href @IvanSanchez Anda yakin ini tidak akan mempengaruhi kinerja rendering? Saya pikir kita harus membuat profil bagaimana menambahkan box-shadow dengan alpha opacity mempengaruhi perangkat seluler misalnya, itu mungkin memiliki efek yang terlihat pada kinerja, atau bahkan mungkin menonaktifkan akselerasi perangkat keras.

@IvanSanchez selesai.

Apakah Anda yakin ini tidak akan mempengaruhi kinerja rendering? Saya pikir kita harus membuat profil bagaimana menambahkan box-shadow dengan alpha opacity mempengaruhi perangkat seluler misalnya, mungkin memiliki efek yang terlihat pada kinerja, atau bahkan mungkin menonaktifkan akselerasi perangkat keras untuk panning.

Saya sama sekali tidak yakin apa efeknya. Dari jawaban Stackoverflow ini sepertinya tidak berpengaruh, tetapi itu hanya mempercayai pendapat orang lain tentang masalah yang terkait secara tangensial. Ini pasti akan menjadi ide yang bagus jika seseorang yang lebih berpengetahuan dapat melihat ke dalamnya dan membuat profil solusi saya.

Saya hanya beruntung ketika saya mencari di Google dan saya ingin orang lain tahu.

@hyperknot @href Saya akan dengan senang hati melakukan beberapa tolok ukur dalam beberapa minggu terhadap kumpulan browser uji saya.

@IvanSanchez @href Selain itu, sebaiknya batasi peretasan ini hanya untuk peramban yang terpengaruh, tidak hanya menerapkannya secara global.

@IvanSanchez adakah alur kerja yang direkomendasikan untuk membuat profil kinerja rendering Leaflet?

Selain itu, sebaiknya batasi peretasan ini hanya untuk browser yang terpengaruh, tidak hanya menerapkannya secara global.

Saya pribadi hanya melihatnya di Safari, jadi masuk akal untuk membatasinya untuk safari. Namun, ada yang menyebutkan tentang orang yang melihat ini di Chrome. Apakah masih ada yang melihat bug ini di browser webkit lain?

Cukup sepele untuk menambahkan kelas CSS ke peta hanya untuk browser yang dipilih, dalam hal konstruktor L.Map .

@href Masalahnya ada di Chromium 49 saya

@hyperknot Saya tidak mengetahui cara terbaik untuk membuat profil tentang hal-hal semacam ini. Mari kita bicarakan itu akhir pekan ini ;-)

@href Juga, perbaikan ini agak mengacaukan ubin di Chromium 49 saya ... ini mengaburkan seluruh gambar, bukan hanya tepinya. Asli, dengan .leaflet-container { background: black } :

Dengan img.leaflet-tile.leaflet-tile-loaded { box-shadow: 0 0 1px rgba(0, 0, 0, 0.05); } :

: cry_cat_face:

Itu aneh. Masalahnya tidak ada untuk saya di Chromium 49 (OS X El Capitan), dan box-shadow sepertinya juga tidak memiliki pengaruh apa pun.

Membuat taman bermain terkini: http://playground-leaflet.rhcloud.com/yid/1/edit?html , keluaran

Saya akan mengirimkan bug tanpa Leaflet ke tim Webkit dan Blink.

Oke, berhasil membuat contoh minimal Leaflet-less yang mereproduksi masalah:
http://playground-leaflet.rhcloud.com/say/1/edit?html , keluaran

Laporan bug Chromium dikirim: https://bugs.chromium.org/p/chromium/issues/detail?id=600120

Bug webkit dikirim: https://bugs.webkit.org/show_bug.cgi?id=156130

versi img-less: http://playground-leaflet.rhcloud.com/foqi/1/edit?html , keluaran

Beberapa pembaruan dari laporan bug Chromium, dari [email protected]

Hei hanya ingin memberi kalian kabar terbaru. Saya secara aktif menangani masalah ini.

Masalahnya adalah karena kita melakukan raster pada benda-benda di ruang lokal suatu elemen. Jika elemen memiliki terjemahan pecahan, maka tekstur raster akan ditempelkan ke layar dengan terjemahan pecahan menggunakan resampling linier, menghasilkan buram.

Solusinya adalah melakukan raster hal-hal di ruang yang selaras dengan piksel ke layar fisik kita. yaitu menerapkan terjemahan pecahan ke perintah grafik vektor daripada tekstur raster.

Perbaikan akan datang dalam dua bagian:

1. Bagian pertama yang memungkinkan sistem raster kita melakukan raster dengan matriks umum apa pun. Bagian ini hampir selesai. Saya memiliki WIP tetapi masih terdapat bug yang menyebabkan regresi kinerja. Saya berharap untuk menyelesaikannya dalam beberapa hari.
   https://codereview.chromium.org/2075873002/
2. Bagian kedua yang memungkinkan manajemen ubin kami untuk dapat mengelola sekumpulan tekstur yang hadir dengan terjemahan raster yang berbeda. Saya awalnya menggunakan matriks umum tetapi ternyata perhitungan cakupan ubin menjadi sangat sulit. Saya malah akan membuat versi yang lebih sederhana yang hanya mendukung terjemahan dan skala. Saya memperkirakan ini akan membutuhkan kerja seminggu lagi.

Saya akan mencoba mendaratkannya di cabang M53 tetapi waktunya sangat sempit. Cukup yakin ini bisa diperbaiki dengan M54.

https://bugs.chromium.org/p/chromium/issues/detail?id=600120

Kepada pelapor bug:

Kasus uji yang Anda unggah memicu kasus tepi di Chromium bahwa kami menangani pengambilan piksel dengan cara yang berbeda. Jika Anda menambahkan beberapa konten ke ubin, Anda tidak akan lagi melihat jahitan di latar belakang. Kami dapat dengan mudah memperbaiki casing tepi, namun, masih ada jahitan di isi ubin.

Ini adalah masalah yang sulit, dan satu-satunya solusi sempurna yang diketahui adalah menggunakan FSAA, yang tidak dilakukan browser karena biaya CPU / memori. Setiap vendor mengembangkan heuristik mereka sendiri untuk membuat beberapa konten terlihat lebih bagus, dengan biaya beberapa konten terlihat tidak benar.

Misalnya: http://jsbin.com/wayapiz/

Chrome menggambar dengan geometri yang tepat, tetapi tepinya berdarah seperti babi yang tersangkut.
Firefox menggambar kotak pertama sebagai 49x49, kotak kedua sebagai 49x50.
Edge menggambar kotak pertama sebagai 50x50, kotak kedua sebagai 50x49. Keduanya dengan aliasing.

Juga jika Anda menambahkan rotasi ke wadah, semua implementasi mengurangi tepinya.

Solusi yang saya rekomendasikan adalah menambahkan beberapa tumpang tindih di antara ubin. Tahukah Anda, seperti membuat poster dengan kertas A4. Idenya adalah untuk memastikan setiap petak overdraw setidaknya satu piksel setelah semua penskalaan, sehingga setiap piksel fisik dijamin akan ditutupi oleh setidaknya satu piksel buram. Lebar tumpang tindih bergantung pada skala terkecil yang ingin Anda dukung. Misalnya, jika Anda ingin mendukung hingga ukuran 1/4, lalu tambahkan 4 piksel tumpang tindih.

Di bawah ini adalah analisis terperinci untuk pengembang lain yang ingin menangani ini.

Repro yang diunggah oleh reporter bukanlah repro yang sangat bagus karena memicu jalur kode yang dioptimalkan dalam cc. Saat kami mendeteksi lapisan yang benar-benar berwarna solid, kami menggambarnya sebagai SolidColorLayerImpl, yang tidak memiliki konsep skala konten. Ini repro yang disederhanakan: http://jsbin.com/hodoxew/

Kotak hitam akan digambar sebagai SolidColorLayerImpl dengan ukuran (100, 100), yang akan menghasilkan satu kotak warna solid dengan ukuran (100, 100), yang akan diproyeksikan ke layar dengan menggambar transformasi menjadi (99.5, 99.5). Dengan anti-alias, kolom paling kanan dan baris bawah piksel akan digambar secara semi-transparan.

Di sisi lain, jika kita menambahkan sesuatu ke lapisan untuk mengelabui cc agar mengira lapisan tersebut berwarna non-solid, sekarang masalahnya muncul dalam dua kasus:

1. Ubin terakhir berwarna solid, misalnya: http://jsbin.com/zexawa/

Ukuran konten akan dibulatkan, jadi meskipun ukuran lapisan yang diskalakan hanya (600, 300) * 0.995 = (597, 298.5), itu akan digambar ulang sebagai (597, 299).

1. Ubin daftar berwarna non-solid, misalnya: http://jsbin.com/mewaguf/

Ukuran isinya akan dibulatkan. Sekali lagi konten berskala sebenarnya hanya mencakup (600, 300) * 0,995 = (597, 298,5), paha depan yang dihasilkan akan mencakup (597,299). Baris terakhir piksel seharusnya semi-transparan karena anti-alias, tapi sebenarnya kita mengisinya dengan warna latar belakang lapisan, yang merupakan warna latar belakang elemen yang membuat lapisan.

Tidak akan ada jahitan di latar belakang, namun latar belakang bisa luntur di bagian tepi saat konten seharusnya menutupinya. Misalnya: http://jsbin.com/vigufo/

Kasus uji lainnya, menggunakan ubin warna non-solid:
http://playground-leaflet.rhcloud.com/giqo/edit?output

@hyperknot pembaruan yang fantastis, tetapi kedua kutipan tersebut tampaknya saling bertentangan (di satu, seseorang mengatakan dia sedang mengerjakan perbaikan, dan yang berikutnya mengatakan tidak ada perbaikan yang baik mungkin). Jadi, apakah kita menunggu perbaikan atau hanya menerima bahwa akan seperti ini selamanya?

@mourner maaf saya tidak menyertakan konteks lengkapnya, dan Anda benar tentu saja. Jadi laporan bug asli adalah:
https://bugs.chromium.org/p/chromium/issues/detail?id=600120

Pada satu titik, masalah tersebut digabung menjadi masalah lain:
https://bugs.chromium.org/p/chromium/issues/detail?id=521364

Dalam masalah lain itu, kami mendapat balasan panjang asli dengan solusi. Saya bertanya apakah dia dapat memeriksa apakah kasus Leaflet benar-benar diperbaiki oleh pekerjaannya dan dia menjawab:

Maaf, masalah selebaran sebenarnya adalah masalah yang berbeda. Saya akan membuka kembali terbitan 600120 dan membagikan analisis saya.

Jadi bug Leaflet sekarang dibuka kembali dan kami mendapat balasan kedua di bug Leaflet. BTW, update terbaru saat ini adalah:

Saya melihat peta Google seluler untuk melihat bagaimana mereka menanganinya. Ternyata mereka diganggu oleh masalah ini juga, tapi mereka melakukan beberapa trik UI untuk membuatnya kurang jelas.

Hal pertama adalah mereka menggunakan tag viewport untuk melarang browser pinch zoom, dan menerapkan pinch zoom di JS. Selama zoom cubit, Anda masih dapat melihat jahitan di antara ubin (sangat halus pada layar resolusi tinggi). Setelah gerakan zoom selesai, mereka memasang faktor skala ke set ubin terdekat yang mereka miliki. Jadi pada dasarnya ubin selalu ditampilkan dalam resolusi asli kecuali selama gerakan zoom.

Sejujurnya kami belum memiliki rencana yang solid. Saya akan berdiskusi dengan orang-orang cat lainnya pada hari Senin.

BTW, tampaknya Google Maps seluler (saya kira situs webnya) menggunakan teknik yang persis sama dengan kami.

@mourner @IvanSanchez beberapa pertanyaan inti dengan kemungkinan solusi menggunakan kemauan-perubahan:
https://bugs.chromium.org/p/chromium/issues/detail?id=600120#c15

Apakah pelapisan saat ini penting? Saya melihat setiap ubin dipaksa menjadi lapisannya sendiri (translate3d), dan lapisan ini diskalakan oleh beberapa nilai pecahan secara independen.

Selama kita menskalakan setiap petak peta secara independen (baik menggunakan lapisan atau melalui drawImageRect + pecahan CTM), untuk nilai skala pecahan kita mendapatkan tepi yang tidak selaras dengan piksel. Hal ini memicu masalah anti-aliasing tepi bertepatan ole di mana AA diskrit menyebabkan warna latar belakang luntur.

Cara saya pikir ini bisa berhasil sebagai gantinya adalah meraster peta dengan skala non-pecahan (katakanlah 1.0) dan kemudian turunkan secara atom:

1) hindari lapisan petak individu (gunakan "transform: translate ()" daripada "transform: translate3d ()")
2) memaksa pelapisan kontainer (seluruh peta) (gunakan "transform: scale3d ()" pada penampung)
3) paksa rasterisasi layer container dengan skala == 1.0

Dengan perubahan ini, gambar petak peta harus di-raster dengan skala 1.0 (=> edge are pixel-aligned => no seaming artifacts), kemudian seluruh layer peta harus diturunkan ukurannya secara atomik.

Sayangnya # 3 tidak sepele, dan satu-satunya peretasan yang dapat saya pikirkan adalah

• mulai dengan skala (1) dan keinginan-perubahan: transformasi (lihat https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/Ufwrhx_iZ7U untuk detailnya)
• setel ulang skala lapisan ke nilai yang diinginkan setelah raster pertama berlalu

misalnya http://jsbin.com/yaqeru/10/embed?output

chrishtr / danakj apakah saya mendapatkan semantik skala raster lapisan dengan benar, dan apakah ada cara yang lebih baik untuk mengunci skala rasterisasi lapisan ke nilai tertentu?

Bisakah Anda membantu menjawabnya?

Saya tahu perbaikan sedang berlangsung (terima kasih semua karena telah mendorongnya!), Tetapi sementara itu ... monkeypatch @cmulders paling cocok untuk saya. Berikut adalah versi yang menghadirkan Leaflet sebagai modul npm, menggunakan ES6, dan memastikan tidak ada patch ganda, jika ada yang mencari kebaikan copypasta.

https://gist.github.com/ericsoco/5712076f69f9068b11d41262b9e93666

import leaflet from 'leaflet';
// ...
patchMapTileGapBug();
// ...
function patchMapTileGapBug () {

    // Workaround for 1px lines appearing in some browsers due to fractional transforms
    // and resulting anti-aliasing. adapted from <strong i="9">@cmulders</strong>' solution:
    // https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-150544739
    let originalInitTile = leaflet.GridLayer.prototype._initTile;
    if (originalInitTile.isPatched) return;

    leaflet.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });

    leaflet.GridLayer.prototype._initTile.isPatched = true;

}

Saya senang orang melihat ini. Jika berguna bagi siapa pun sebagai solusi yang kurang ideal: jika Anda bersedia mengorbankan kelembaman, menyetel intertia:false pada peta init menghilangkan celah, dan mungkin zoomAnimation:false

Saya rasa saya telah menemukan solusi (terlalu rumit) untuk ini, saya telah memasangnya di https://github.com/Leaflet/Leaflet.TileLayer.NoGap - komentar diterima, karena saya tidak yakin dengan kinerjanya tentang hal itu di komputer / ponsel lama.

cc @Eschon @hyperknot

BTW, bug juga terjadi saat menggunakan Chrome pada layar DPI tinggi (2560x1140), tanpa perlu menggunakan zoom fraksional leaflet atau zoom browser.

Maaf atas balasan yang terlambat.

Saya baru saja menguji solusi Anda. Demo berfungsi dengan baik untuk saya, jadi saya mencoba menambahkan perbaikan ke aplikasi saya. Karena saya masih menggunakan Leaflet versi 1.0-dev, saya memperbaruinya menjadi 1.0.0-rc3 dari http://leafletjs.com/download.html

Hal pertama yang saya perhatikan adalah sepertinya ada kesalahan di sini . Ini menunjukkan kesalahan bahwa peta tidak ditentukan jadi saya mengubahnya menjadi this._map .

Setelah itu berhasil tetapi sangat lambat di komputer kerja saya. Terutama di Chrome tapi Firefox juga lambat.

Anehnya, itu tidak berdampak besar pada ponsel yang saya uji.
Firefox di Android sepertinya sama seperti sebelumnya, Chrome sedikit lebih lambat tapi tidak terlalu buruk.
Safari di iOS juga sepertinya hampir sama dengan sebelumnya.

Hal aneh lainnya yang saya perhatikan adalah bahwa pada ponsel Chrome dan Safari, pinch-zooming tampaknya snap ke level tetap

@Eschon Terima kasih telah menguji ini!

Saya selalu membuat kesalahan dengan mengetik map alih-alih this._map :-(

Setelah itu berhasil tetapi sangat lambat di komputer kerja saya. Terutama di Chrome tapi Firefox juga lambat.

Bisakah Anda menjalankan beberapa profiler di komputer itu? Alangkah baiknya mengetahui apakah pelambatan terkait dengan operasi kanvas. Saya perhatikan bahwa ada sedikit kinerja yang berhasil di IE9-IE11.

Berdasarkan apakah solusi ini membuat peta lebih lambat di beberapa platform, mungkin masuk akal untuk menjadikannya opsional dan dinonaktifkan secara default. Beberapa umpan balik di sini penting!

Saya belum benar-benar melihat bagaimana orang-orang OL3 menyelesaikan masalah ini, atau apakah mereka melakukan beberapa deteksi kinerja di browser sebelum mengaktifkan pengomposisian kanvas. Mungkin layak untuk dilihat.

Hal aneh lainnya yang saya perhatikan adalah bahwa pada ponsel Chrome dan Safari, pinch-zooming tampaknya snap ke level tetap

Saya yakin itu hanya mengutak-atik opsi zoomDelta dan zoomSnap , dan tidak terkait dengan bug ini.

Bisakah Anda menjalankan beberapa profiler di komputer itu? Alangkah baiknya mengetahui apakah pelambatan terkait dengan operasi kanvas. Saya perhatikan bahwa ada sedikit kinerja yang berhasil di IE9-IE11.

Haruskah saya merekam Profil CPU JavaScript dengan alat pengembang Chrome? Saya tidak memiliki banyak pengalaman dengan hal-hal pengujian kinerja jadi saya tidak benar-benar tahu apa yang harus dibuat dari data yang ditampilkannya.

Ya, itulah masalahnya. Kemudian cari hal-hal luas pada bagan api.

Saya baru saja membuat profil dengan perbaikan dan satu lagi tanpa itu. Saya mencoba melakukan hal yang sama untuk kedua profil.

Hal pertama yang saya perhatikan bahwa versi dengan perbaikan memiliki "puncak" tambahan (saya tidak tahu apakah ini kata yang tepat) yang disebabkan oleh _onZoomTransitionEnd

Dalam versi tanpa perbaikan _onZoomTransitionEnd membutuhkan 1,8ms dan saya bahkan tidak melihatnya di grafik. Dalam versi dengan perbaikan itu butuh 6ms dan menyebabkan "puncak" dalam aktivitas.

Dua "puncak" lainnya terlihat sangat mirip di dua profil, hal-hal sepertinya terjadi sedikit berbeda tetapi celah di antara keduanya lebih besar dalam versi dengan perbaikan.

Saya harap itu bisa membantu Anda. Saya juga menyimpan dua profil jadi jika Anda membutuhkannya, saya dapat mengunggahnya di suatu tempat.

Sebagai solusi kotor untuk saat ini, saya hanya menambahkan faktor skala 0,002 ke fungsi asli yang menetapkan properti translate3d ke setiap ubin yang menghilangkan celah hampir seluruhnya. ".002" adalah faktor penskalaan terendah dalam kasus pengujian saya untuk membuat celah hilang sepenuhnya. Saya tidak melihat adanya efek samping.

Diuji di Chrome, Firefox, dan IE 11 terbaru. Diuji pada Monitor 4k 40 "dengan penskalaan windows diatur ke 150% dengan berbagai nilai zoom dalam browser.

ada kemajuan dalam bug ini? @AlexanderUhl apakah solusi Anda menyebabkan modifikasi gambar saat ditempatkan atau hanya terpengaruh saat bergerak / zoom?

Tampaknya properti will-change CSS telah ditambahkan untuk mengatasi masalah ini, hanya perlu memeriksa peringatan kinerja FF, dijelaskan di sini: https://github.com/Leaflet/Leaflet/issues/4686

@themre : properti skala berlaku untuk semua ubin gambar ketika ditambahkan dan secara permanen. Atribut gaya akan terlihat seperti ini:
style="width: 256px; height: 256px; transform: translate3d(545px, 745px, 0px) scale(1.002); opacity: 1;"

Tapi itu akan menyebabkan gambar sedikit melebar yang merupakan efek yang tidak diinginkan. Saya mencoba versi 1.0.3 yang memiliki properti will-change CSS tetapi masih menyebabkan celah putih. Akan mencoba untuk melihat lebih banyak.

Tentu itu meregangkan img, itulah pendekatannya ;-) Saya setuju bahwa solusi ini tidak ideal, tapi tbh itu biasanya sifat dari solusi, bukan? Meskipun demikian, pendekatan ini bekerja paling baik untuk saya dengan efek samping yang dapat diabaikan (untuk kasus penggunaan saya yang merupakan aplikasi pemetaan dengan ubin dari kotak peta, di sini, osm, dll.)

Nah, jika kita menggunakan translate normal, masalahnya hilang. Tidak begitu tahu apakah properti translate3d CSS jauh lebih cepat daripada terjemahan normal, mungkin akan lebih baik untuk menambahkan bendera ini sebagai opsi. Saya pikir saya akan mengganti translate3d dengan translate.

lihat beraksi:

Menghadapi masalah yang sama, dengan versi terbaru (1.0.3).

itu akan diperbaiki di 1.1 mungkin

Pada 2017. 8 Maret, Rabu pukul 10:13, Gaurav [email protected] menulis:

[image: image]
https://cloud.githubusercontent.com/assets/13112509/23697357/7dcc4cf6-040d-11e7-881a-df3a44254015.png
Menghadapi masalah yang sama, dengan versi terbaru (1.0.3).

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-284987808 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AAeKj_23QbtFCaXeFjGRJcU-jg0284xBks5rjnEvgaJpZM4FO8Jh
.

Jika nilai nx dan ny, yang digunakan untuk menerjemahkan div .leaflet-pane.leaflet-map-pane dibulatkan menjadi bilangan bulat, maka masalah garis / celah teratasi di Safari. Saya tidak melihat ada efek samping yang merugikan (untuk saya gunakan lagi).

Temukan ini:
translate3d("+n.x+"px,"+n.y+"px,0)")
dan ganti dengan:
translate3d("+Math.round(n.x)+"px,"+Math.round(n.y)+"px,0)")

@LudwigBogner kemungkinan besar tetap gagal setelah Anda melakukan penskalaan (menyetel zoom browser, misalnya, atau selama animasi zoom). Lihat contoh ini, ditautkan di atas, di mana terjemahannya dibulatkan: http://playground-leaflet.rhcloud.com/vicu/edit?html , keluaran

Baru saja digigit oleh yang ini. Bagi saya, ini sepertinya tidak ada di Chromium atau FireFox. Hanya beberapa zoom pecahan di Safari.

Kemajuan?

Masalah ini masih ada di Chrome dan Firefox (Mac). Saya menggunakan zoomDelta dan zoomSnap sebesar 0,25.

Anehnya, menyetel .leaflet-tile { will-change: auto !important; } (atau "tidak disetel") memperbaiki masalah di Firefox (hanya). Masih mencari solusi untuk Chrome.

Perbaikan lain yang diusulkan untuk menonaktifkan inersia dan mengubah kode translate3d untuk menambahkan pembulatan juga tidak berfungsi.

@jawinn Saya pikir Anda mungkin berhasil dengan menyetel L_DISABLE_3D menjadi true , IIRC ini memiliki efek yang sama seperti mengubah will-change , yaitu akan menghapus akselerasi perangkat keras saat merender peta. Harap diperhatikan bahwa ini mungkin akan memberi Anda kinerja yang jauh lebih buruk untuk animasi zoom, panning, dll.

Semua ini sangat sensitif terhadap detail implementasi browser, jadi anggap ini dengan sedikit garam, sudah cukup lama sejak saya melihat ini.

@bayu_joo
Pekerjaan sekitar yang saya gunakan adalah yang dilakukan oleh @cmulders di atas:

/* 
 * Workaround for 1px lines appearing in some browsers due to fractional transforms
 * and resulting anti-aliasing.
 * https://github.com/Leaflet/Leaflet/issues/3575
 */
(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });
})()

Ini tidak sempurna tapi sejauh yang saya tahu itu tidak mempengaruhi kinerja

Terima kasih teman-teman. @Eschon Itu berhasil. Tidak ada lagi celah yang muncul di Chrome atau Firefox.

Bagi mereka yang akan menggunakan "1px fix", bersiaplah bahwa gambar Anda akan menjadi buram dan sedikit rusak:

• perbandingan 1: https://diff.pics/RJC_xRHl8aCX/1
• perbandingan 2: https://diff.pics/8zvB6-PHdqLm/1

Bagi saya, yang menghabiskan waktu berjam-jam untuk merender dan memotret gambar asli, ini tidak dapat diterima. Jadi saya harus menggunakan L_DISABLE_3D = true dan tahan dengan animasi yang berkedip-kedip dan zoom yang tidak menentu pada akhirnya ..

Info lebih lanjut: Saya menggunakan plugin leaflet-rastercoords dan pengaturan peta saya adalah sebagai berikut:

    map = L.map('map', {
        center: [3250, 1700],
        zoom: 5,
        minZoom: 2,
        maxZoom: 6,
        maxBoundsViscosity: 1,
    });

T: Apa alternatif terbaik berikutnya untuk Leaflet yang tidak memiliki bug "ruang antar ubin"?

Saya akan Google sendiri, tapi mungkin seseorang sudah mengambil jalan ini.

@ n3tman apakah Anda juga mencoba plugin NoGap ? Mungkin layak dicoba.

@perliedman terima kasih telah menyebutkan yang satu ini.
Sayangnya, tidak bisa bekerja secara lokal .. Got Cannot read property 'appendChild' of undefined kesalahan dalam _initContainer fungsi.
Mencoba dengan versi Leaflet sebelumnya (hingga 1.0.2) - hasil yang sama. Demo menunjukkan kesalahan yang sama di Chrome / Firefox.
Mungkin saya melewatkan sesuatu yang jelas, bisakah Anda membantu?

Celah 1px yang sama di sini.

Versi Chrome 66.0.3359.139 (64-Bit)
Windows 10 (1709)
Leaflet 1.3.1

Ketika saya pertama kali membuka masalah ini, saya menemukan bahwa ini terkait dengan tingkat zoom pecahan tetapi ini mungkin bukan satu-satunya penyebab lagi.

Saya baru-baru ini memulai proyek yang menggunakan plugin GoogleMutant dan di sana saya menemukan bahwa ini juga terjadi ketika saya hanya mengatur tingkat zoom ke bilangan

Tampaknya terkait dengan # 6069 dan (semacam) diperbaiki oleh # 6240 meskipun celah masih muncul saat memperbesar dan menggeser.

Saya juga menghapus solusi tersebut dari proyek saya yang lain dan tampaknya terjadi di sana juga sehingga tidak spesifik untuk plugin GoogleMutant

Terinspirasi dengan solusi @cmulders 1px ...

(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();
            var map = this._map;
            var isFix = function() {
                return !(parseFloat(tile.style.width) % 0 === 0);
            };
            var fixOn = function() {
                if(!isFix()) return;
                tile.style.width = tileSize.x + 0.5 + 'px';
                tile.style.height = tileSize.y + 0.5 + 'px';
            };
            var fixOff = function() {
                if(isFix()) return;
                tile.style.width = tileSize.x + 'px';
                tile.style.height = tileSize.y + 'px';
            };
            var checkFix = function(){
                var zoom = map.getZoom();
                if(zoom % 1 === 0) {
                    fixOff();
                }
                else {
                    fixOn();
                }                
            };
            map.on('zoomstart',fixOn);
            map.on('zoomend',checkFix);
            checkFix();
        }
    });
})()

Lebih dari 3 tahun kemudian, bug ini masih belum diselesaikan di Chrome! Saya tidak melihat efeknya di Firefox atau Safari. Terima kasih @cmulders atas pekerjaan Anda!

Sama di sini (Windows 7 Enterprise SP1). Garis di sana-sini di Firefox, garis kisi lengkap di Chrome, tapi OK di IE11. @cmulders fix berfungsi di Firefox dan Chrome.

Berikut hasil lengkap dari beberapa pengujian lagi:

• Windows 7 Enterprise SP1
  
  
  
  • IE11: OK
  
  
  • Chrome, Firefox: tidak OK
  
  
• Windows 10
  
  
  
  • IE11, Edge, Firefox: Oke
  
  
  • Chrome: tidak OK
  
  
• macOS
  
  
  
  • Safari, Chrome, Firefox: Oke
  
  
• Linux:
  
  
  
  • Chrome, Firefox: Oke
  
  
• Android:
  
  
  
  • Chrome, Firefox: Oke
  
  
  • Aplikasi yang menggunakan WebView: Oke
  
  

Pengujian lebih lanjut menunjukkan ini jelas merupakan masalah level sangat rendah yang tidak ada hubungannya dengan Leaflet.
Pengujian pada Windows 7 Enterprise SP1 awalnya dilakukan pada dua PC berbeda, tetapi keduanya dengan grafis NVIDIA.

Ketika pengujian yang sama dilakukan pada Windows 7 Enterprise SP1 dengan grafis AMD Radeon, hasilnya OK, tidak ada garis di antara ubin di Chrome atau Firefox!

Karena NoGap telah disebutkan sebelumnya, saya hanya ingin memberi tahu Anda bahwa saya mengambil kode asli dan memodifikasinya agar berfungsi dengan versi selebaran saat ini (yaitu, leaflet ^ 1.3.3):
https://github.com/Endebert/squadmc/blob/master/src/assets/Leaflet_extensions/NoGapTileLayer.js

Kemudian dapat digunakan seperti TileLayer biasa: https://github.com/Endebert/squadmc/blob/master/src/assets/SquadMap.js#L34

Ini menggunakan fungsionalitas es6, jadi Anda mungkin harus membuat beberapa modifikasi agar berfungsi untuk Anda.

Karena NoGap telah disebutkan sebelumnya, saya hanya ingin memberi tahu Anda bahwa saya mengambil kode asli dan memodifikasinya agar berfungsi dengan versi selebaran saat ini (yaitu, leaflet ^ 1.3.3):
https://github.com/Endebert/squadmc/blob/master/src/assets/Leaflet_extensions/NoGapTileLayer.js

Kemudian dapat digunakan seperti TileLayer biasa: https://github.com/Endebert/squadmc/blob/master/src/assets/SquadMap.js#L34

Ini menggunakan fungsionalitas es6, jadi Anda mungkin harus membuat beberapa modifikasi agar berfungsi untuk Anda.

@Endebert Apakah Anda berhasil membuat NoGap bekerja? Saya mendapat kesalahan yang sama dengan @ n3tman beberapa waktu lalu:
Cannot read property 'appendChild' of undefined kesalahan dalam fungsi _initContainer .

Satu-satunya perubahan yang saya temukan dalam versi Anda adalah menambahkan try ... catch ke panggilan level.ctx.drawImage(imageSource, offset.x, offset.y, tileSize.x, tileSize.y);
dan itu tidak membantu.

@TomazicM Ya, implementasi saya sedang digunakan di aplikasi saya SquadMC . Ini mungkin tidak terlalu jelas di desktop, tetapi di ponsel terlihat jelas bahwa zoom fraksional tanpa snapping diaktifkan.

Berkenaan dengan implementasi: Versi asli menggunakan TileLayer.include() , sedangkan saya menggunakan TileLayer.extend() . Saya percaya itulah perbedaan penting. Seperti yang disebutkan, ini adalah kelas baru yang dimaksudkan untuk digunakan sebagai pengganti TileLayer.

Nah, inilah hasil penyelidikan saya selama 2 jam. Masalahnya disebabkan oleh desimal piksel di dalam translate3d .

<div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(-10.7773px, -8.41406px, 0px);"></div>

Itulah mengapa ini berfungsi baik dengan L_DISABLE_3D = true , karena menurut bagian kode sumber ini tidak menggunakan translate3d .

Larutan

Hanya saja, jangan biarkan piksel desimal. Itu dapat dicapai dengan, misalnya:

• mengubah konstruktor Titik menjadi selalu koordinat bulat
• atau pembulatan offset sebelum translate3d disetel

```js
var pos = (offset && offset.round()) || new Point(0, 0);
```

• atau dengan banyak dan banyak solusi lainnya ...

Nah, inilah hasil penyelidikan saya selama 2 jam. Masalahnya disebabkan oleh desimal piksel di dalam translate3d .

Saya kira hari ini adalah 2019 dan menggunakan translate3d untuk memaksa penggunaan browser modern GPU sudah cukup usang. Kerja bagus

@mdorda Hai! Kedengarannya menarik, tetapi harap diperhatikan bahwa pembulatan telah dibahas sebelumnya di utas ini: https://github.com/Leaflet/Leaflet/issues/3575#issuecomment -327237235

Tidak yakin apakah sesuatu yang penting telah berubah sejak saat itu yang membuat perbedaan, tetapi saya tidak akan terlalu berharap sampai kami melakukan beberapa pengujian menyeluruh.

Langkah pertama untuk mengatasinya adalah dengan mengirimkan PR sehingga kami dapat mengujinya.

Bagi mereka yang bekerja dengan Angular 2+, saya telah menyelesaikannya dengan cara ini. Ini berfungsi untuk kasus penggunaan sederhana saya, tidak tahu tentang implikasi lain ...

const tileLayer = new TileLayer(this.tileLayerUrlTemplate, this.tileLayerOptions);
tileLayer.on('load', () => {
    for (const tile of Array.from(document.getElementsByClassName('leaflet-tile'))) {
        (<HTMLElement>tile).style.height = (tile.clientHeight + 1) + 'px';
        (<HTMLElement>tile).style.width = (tile.clientWidth + 1) + 'px';
    }
});
this.map.addLayer(tileLayer);

Saya melihat celah piksel ini pada zoom pecahan di LeafletJS versi 1.5.1 pada Windows 10 Pro 1903 dengan Mozilla Firefox 69.0.1 (64-bit).
Celah piksel
Menurut saya, alasan terjadinya pixel gap mungkin bukan pada fungsi translate3d () CSS melainkan pada scale ().

Dalam versi 1.5.1, seperti yang saya lihat, parameter translate3d () hanya integer.

Hormat kami, IMMSPgisgroup

Apakah Anda menemukan solusi untuk bug ini?

Saya memiliki masalah yang sama saat ini dan saya tidak menemukan solusinya.

Saya menggunakan:

• Windows 10 Home 1803
• Versi Google Chrome 77.0.3865.90 (Bangun resmi) (64 bit)
• Leaflet 1.5.1

Saat saya menggunakan Firefox, garis putih tidak muncul

@ Arenivar93

Na Aku sudah memperhatikan ini selama beberapa tahun sekarang. Mereka telah mencoba sejumlah solusi tetapi tidak ada yang berhasil memperbaikinya tanpa kompromi besar. Akar masalahnya ada di hulu di chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=600120

Pesan terbaru dari tim chromium adalah terlalu sulit untuk melakukan tanpa merusak hal-hal lain sehingga kami mungkin terjebak dengannya untuk sementara waktu.

Terutama pada peta atau gambar yang lebih gelap (dalam kasus saya) masalahnya cukup terlihat. Menurut saya antialiasing di browser menyebabkan ruang di antara ubin karena transformasi _fractional_ selama pembesaran, seperti yang disebutkan oleh Ivan.

Sampai solusi yang lebih baik tersedia, saya akan menggunakan solusi ini (atau hack) untuk membuat ubin 1 piksel lebih besar, dengan efek samping yang tumpang tindih dengan 1 px. Selain itu ubin akan sedikit diperbesar dan diskalakan (sebesar 1px).

/* 
 * Workaround for 1px lines appearing in some browsers due to fractional transforms
 * and resulting anti-aliasing.
 * https://github.com/Leaflet/Leaflet/issues/3575
 */
(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });
})()

kami cukup beruntung dengan solusi ini. Itu tidak sempurna, tapi lebih baik dari garis menurut kami.

Selain itu, kami memastikan warna latar belakang peta lebih sejajar dengan warna peta dasar. misalnya, jika lautan berwarna biru tua, kami akan menggunakannya sehingga ubin menutupi warna itu, meminimalkan beberapa ketidakkonsistenan yang terlihat.

sekali lagi tidak sempurna, tetapi itu membantu

@ Colbyfayock Bolehkah saya bertanya di mana dan bagaimana Anda menerapkan solusi Anda?

Saya sedang membangun aplikasi react sehingga mungkin berbeda, tetapi saya membuat file dengan konten ini:

// Fix via https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-150544739
import L from 'leaflet';

(function () {
  if (!L || !L.GridLayer || !L.GridLayer.prototype) return;

  var originalInitTile = L.GridLayer.prototype._initTile;

  L.GridLayer.include({
    _initTile: function (tile) {
      originalInitTile.call(this, tile);

      var tileSize = this.getTileSize();

      tile.style.width = tileSize.x + 1 + 'px';
      tile.style.height = tileSize.y + 1 + 'px';
    }
  });
})();

keuntungan di atas adalah karena dikompilasi sebelumnya dan tidak selalu tersedia (tidak penting di sini)

lalu saya hanya mengimpornya setelah saya mengimpor brosur

import L from 'leaflet';
...
import '../plugins/leaflet-tilelayer-subpixel-fix';

Solusi saya adalah membulatkan nilai transformasi tanpa menerapkan perubahan pada kode sumber.
Menggunakan with react tetapi dapat digunakan oleh front end mana pun karena ini adalah JQuery
Tidak mengatakan itu adalah pilihan terbaik, hanya membuatnya selesai.
Ini memperbaiki masalah dan saya belum melihat adanya kekaburan atau cacat yang terlihat. Patut dicoba.

    this.leftMap.on('move', () => {
      const mapDiv = window.document.getElementsByClassName("leaflet-pane leaflet-map-pane")
      let styleString = mapDiv.getAttribute("style");
      const transformValue = styleString.substring(styleString.indexOf("(")+1,styleString.indexOf("px,"));
      const roundedTransformValue = Math.round(parseFloat(transformValue));
      styleString = styleString.replace(transformValue,roundedTransformValue);
      mapDiv.setAttribute("style",styleString);
    });

@ Colbyfayock - Sepertinya tidak memperbaikinya untuk saya. :(

Saya menggunakan selebaran react dengan zoom snap 0.

solusinya tidak pernah sempurna bagi kami, tetapi kami jelas tidak memiliki garis yang konsisten seperti itu di kami. saya tidak yakin tentang fitur zoomSnap jadi harus mencarinya, saya tidak begitu yakin bagaimana 0 akan bekerja dengan properti itu dari cara saya membaca deskripsinya. Sudahkah Anda mencoba menghapusnya hanya untuk melihat apakah garis masih ada tanpa itu?

https://leafletjs.com/examples/zoom-levels/#fractional -zoom

Edit: terus membaca setelah contoh gif

zoomSnap dapat disetel ke nol. Ini berarti Leaflet tidak akan mengubah level zoom.

Saya menduga Anda mengalami keadaan pecahan bahwa solusinya tidak dapat menangani di luar snap default integer penuh 🤷‍♂️tetapi tidak yakin

Leaflet 1.7-dev dan masalah masih berlanjut. Garis di perbatasan ubin di Firefox dan Chrome di Windows 7 dan Windows 10. Tidak ada masalah di IE11 dan Edge lama (non Crome), masalah yang sama di Edge baru berbasis Chrome.

Ada dua solusi yang berfungsi, tetapi saya tidak suka salah satunya. Salah satunya adalah menonaktifkan 3d sebesar <script>L_DISABLE_3D = true;</script> , tetapi ini berarti kehilangan operasi animasi. Lainnya adalah memperluas elemen HTML petak sebesar 1 piksel, tetapi ini berarti Anda mendapatkan petak yang sedikit kabur.

Saya menemukan solusi yang sangat primitif, tetapi secara alami primitif, itu berhasil 100%. Mungkin ada yang menganggapnya berguna.

Solusinya adalah menampilkan layer petak yang sama dua kali pada dua panel peta yang berbeda, satu ditempatkan di bawah yang lain dan memiliki offset [-1, -1].

Kode terlihat seperti ini:

<style>
  .originOffset {
    transform: translate(-1px, -1px);
  }
</style>

<script>
  var pane1 = map.createPane('pane1');
  var pane2 = map.createPane('pane2');

  pane1.style.zIndex = 210;
  pane2.style.zIndex = 220;

  L.DomUtil.addClass(pane1, 'originOffset');

  var layer1 = L.tileLayer( ... , {
    pane: 'pane1',
    ...
  });
  var layer2 = L.tileLayer( ... , {
    pane: 'pane2,
    ...
  });
  var layer = L.layerGroup([layer1, layer2]);
</script>

dari saran @cmulders Saya memiliki iklan baris ini dan tidak ada lagi ruang di antara ubin

map.on ('zoomend drag', function () {
$ ('# map> div.leaflet-pane.leaflet-map-pane> div.leaflet-pane.leaflet-tile-pane> div> div> img'). masing-masing (function () {
if (String ($ (this) .css ("width")). termasuk ('. 5') === false) {
var imgW = String ($ (this) .css ("width")). split ("px") .join (".5")
var imgH = String ($ (this) .css ("height")). split ("px") .join (".5")
$ (ini) .css ("lebar", imgW);
$ (ini) .css ("tinggi", imgH);
}
});

Saya menggunakan @mdorda , saat menggeser dan memperbesar hasil dalam bilangan bulat dalam panggilan leaflet-map-pane ke translate3d() , alih-alih pecahan piksel, maka (dengan penutup mata saya aktif) masalahnya hilang dan semuanya indah kembali. Saya tidak mengklaim memahami semua nuansa saat pecahan perlu disimpan, tetapi jika Leaflet memberikan kelegaan dari masalah browser, apakah dapat diterima untuk memiliki L.Draggable._onMove diletakkan di beberapa lantai

    offset.x = Math.floor(offset.x / this._parentScale.x);
    offset.y = Math.floor(offset.y / this._parentScale.y);

atau bahkan di L.DomUtils.setTransform

    pos.x = Math.floor(pos.x);
    pos.y = Math.floor(pos.y);

sehingga tidak ada terjemahan yang diberikan pecahan, tapi itu mungkin akan sia-sia karena gambar ubin tidak menghasilkan terjemahan pecahan (bukan?).

Saya membuang waktu dua jam, untuk mengetahui setelah itu pengaturan browser saya diperbesar, bukan dalam ukuran sebenarnya
Ambil saja zoom kembali ke aktual dan semua bekerja seperti pesona, ini kasus saya

Saya membuang waktu dua jam, untuk mengetahui setelah itu pengaturan browser saya diperbesar, bukan dalam ukuran sebenarnya
Ambil saja zoom kembali ke aktual dan semua bekerja seperti pesona, ini kasus saya

@tokenflow : Topik ini secara harfiah adalah tentang 'Spasi di antara ubin pada tingkat zoom pecahan di browser Webkit'. Saya benar-benar berusaha untuk tidak menjadi sombong di sini, tetapi apakah Anda benar-benar berpikir bahwa informasi Anda tentang pembesaran hingga 100% adalah kontribusi yang berguna bagi siapa pun?

Saya menemukan bug ini pada versi Linux dari Firefox dan Chromium.
Masalahnya (setidaknya untuk Firefox) tampaknya adalah scale() dari .leaflet-tile-container , yang dapat saya temukan dengan document.querySelector('.leaflet-tile-container:last-of-type').getAttribute('style') .
E. g. Anda memiliki scale(0.707107) , tetapi semua img anak adalah lebar / tinggi 256. Jadi Anda menghitung: 0.707107 * 256px = 181.019392px , yang merupakan angka desimal. Ketika Anda kemudian membulatkan piksel dan menganggapnya sebagai skala, tampaknya berfungsi di Firefox / Linux: 181px / 256px = 0.70703125 .

Saya telah menulis fungsi yang membantu debug:

function getCurrentScale (doFix = false) {
    const tileContainer = document.querySelector('.leaflet-tile-container:last-of-type');

    if (!tileContainer) {
        return;
    }

    const tileStyle = tileContainer.getAttribute('style');
    const scaleRegEx = /scale\(([0-9\.]+)\)/i;
    const matches = scaleRegEx.exec(tileStyle);

    if (!matches || matches.length !== 2) {
        return;
    }

    const scale = parseFloat(matches[1]);

    const mod = (scale * 256) % 1;

    if (mod) {
        console.log('scale is off by px:', mod);
        if (doFix) {
            const newScale = Math.round(scale * 256) / 256;
            console.log('old scale / new scale', scale, newScale);
            const newStyle = tileStyle.replace(scaleRegEx, `scale(${newScale})`);
            tileContainer.setAttribute('style', newStyle);
        }
    } else {
        console.log('scale seems to be fine:', scale);
    }
}

Jika Anda menyebutnya dengan true sebagai parameter pertama, ia mencoba untuk memperbaiki skala. Namun, ini hanya berfungsi di Firefox untuk saya.

Saya telah menemukan perbaikan yang bodoh dan seharusnya tidak berhasil.

.leaflet-tile-container img {
    width: 256.5px !important;
    height: 256.5px !important;
}

Ini akan menghasilkan jahitan besar yang menggelegar di sekitar ubin tetapi saya tidak dapat melihatnya sama sekali dan itu memperbaiki ruang di antara ubin.

@ ChrisLowe-Takor entah bagaimana itu benar-benar tampak berhasil meskipun pada pandangan pertama saya tidak tahu mengapa.
Ini mungkin lebih disukai daripada solusi JavaScript yang saya gunakan sekarang tetapi saya harus memeriksanya lebih jauh dan melakukan beberapa pengujian tetapi.

@ ChrisLowe-Takor - Wow, ini juga berhasil untuk saya! Temuan bagus 👍

@ ChrisLowe-Takor Tampaknya juga bekerja untuk saya di R, menggunakan paket Leaflet. Terima kasih banyak!

@ ChrisLowe-Takor Entah bagaimana trik ini benar-benar melakukannya untuk semua browser modern yang bodoh (untuk IE11 lama yang terhormat itu tidak diperlukan)! Hanya ada satu hal yang perlu diingat: jika opsi detectRetina digunakan untuk lapisan petak dan tampilan adalah tampilan retina, ukuran petak akan menjadi 125 x 125 px.

Tetapi solusi ini memiliki kelemahan yang sama dengan semua solusi yang didasarkan pada perluasan wadah ubin: ubin menjadi agak kabur.

@ ChrisLowe-Takor Saya mencobanya. Jika maxZoom lebih besar dari maxNativeZoom, ubin tidak akan ditampilkan dengan benar.