Leaflet: L.Icon.Default membawa url gambar yang salah

• Apakah ada halaman web publik di server Anda yang dapat kami kunjungi, sehingga kami dapat mereproduksi masalahnya sendiri?
• Apa OS dan browser web yang Anda gunakan?

leaflet.min.js:5 DAPATKAN https://uismedia.geo-info-manager.com/apis/leaflet_1/images/ 403 (Terlarang)

Ini mungkin dari masalah yang sama yang dibahas di https://github.com/Leaflet/Leaflet/issues/4849

Memang. Itulah mengapa saya penasaran untuk mengetahui keadaan ini dapat direproduksi, sehingga kami dapat melakukan tes unit terhadap itu.

Saya memiliki masalah yang sama saat berpindah dari RC3 ke 1.0.1 - dalam kode saya, saya memiliki baris L.Icon.Default.imagePath = 'images'; - tidak dapat mengingat mengapa ini terjadi, tetapi mengomentarinya memecahkan masalah - mungkin perlu diperiksa Anda tidak memiliki yang serupa

tiba-tiba mendapat masalah yang sama di dua proyek yang sama sekali berbeda, keduanya menggunakan webpack dan leaflet.
Jika saya menambahkan penanda ke peta, gambar tidak ditemukan. Browser melempar kesalahan ini:

oke aku punya sesuatu.

Jadi penanda terlihat seperti ini saat ini karena gambar (ikon dan bayangan) tidak ditemukan.

fungsi ini dalam selebaran:

_getIconUrl: function (name) {
    if (!L.Icon.Default.imagePath) {    // Deprecated, backwards-compatibility only
        L.Icon.Default.imagePath = this._detectIconPath();
    }

    // <strong i="10">@option</strong> imagePath: String
    // `L.Icon.Default` will try to auto-detect the absolute location of the
    // blue icon images. If you are placing these images in a non-standard
    // way, set this option to point to the right absolute path.
    return (this.options.imagePath || L.Icon.Default.imagePath) + L.Icon.prototype._getIconUrl.call(this, name);
},

menyebabkan url data:image memiliki string berikut di akhir url:
")marker-icon-2x.png .

Nama file dapat dihapus jika Anda menghapus + L.Icon.prototype._getIconUrl.call(this, name) . Bagian ") mungkin dari sihir regex _detectIconPath . Saya tidak dapat memperbaikinya, jadi saya hanya mencoba memotong dua karakter terakhir, yang menghasilkan fungsi ini:

_getIconUrl: function (name) {
    if (!L.Icon.Default.imagePath) {    // Deprecated, backwards-compatibility only
        L.Icon.Default.imagePath = this._detectIconPath();
    }

    // <strong i="21">@option</strong> imagePath: String
    // `L.Icon.Default` will try to auto-detect the absolute location of the
    // blue icon images. If you are placing these images in a non-standard
    // way, set this option to point to the right absolute path.
  var url = (this.options.imagePath || L.Icon.Default.imagePath);

  return url.slice(0, - 2);
},

dan ini dia, ikonnya muncul. Satu masalah terakhir adalah bahwa gambar bayangan juga merupakan ikon penanda - jalur src sudah salah, saya tidak tahu mengapa (belum). Jadi penanda sekarang terlihat seperti ini:

@IvanSanchez apakah ini membantu Anda sedikit mempersempit masalah?

@codeofsumit akan menyenangkan untuk menelusuri _detectIconPath dan melihat apa yang terjadi di sana, terutama nilai apa yang dimiliki variabel path sebelum melewati regex.

@IvanSanchez @perliedman Saya pikir saya menemukan bug.

Ini _detectIconPath

_detectIconPath: function () {
    var el = L.DomUtil.create('div',  'leaflet-default-icon-path', document.body);
    var path = L.DomUtil.getStyle(el, 'background-image') ||
               L.DomUtil.getStyle(el, 'backgroundImage');   // IE8
    document.body.removeChild(el);

    return path.indexOf('url') === 0 ?
        path.replace(/^url\([\"\']?/, '').replace(/marker-icon\.png[\"\']?\)$/, '') : '';
}

variabel path adalah seperti ini:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQ…n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=") .

Yang mana yang benar.

Sekarang regex ingin mengekstrak url data.image dari ini, dan mengembalikan ini:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQ…n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=")

Perhatikan ") yang tidak dihapus dari variabel path . Regex /^url\([\"\']?/ hanya menargetkan url(" di awal jalur, bukan ") di akhir.
Menggunakan regex ini berfungsi:

return path.indexOf('url') === 0 ?
    path.replace(/^url\([\"\']?/, '').replace(/\"\)$/, '').replace(/marker-icon\.png[\"\']?\)$/, '') : '';

Ini memperbaiki masalah gambar, bersama dengan

var url = (this.options.imagePath || L.Icon.Default.imagePath);

di dalam _getIconUrl . Tapi itu tidak memperbaiki bayangan - saya masih tidak tahu apa yang terjadi dengan bayangan itu.

memiliki masalah yang sama,
nilai jalur di _detectIconPath adalah seperti "url("data:image/png;base64,i...5CYII=")"
dan sepertinya _getIconUrl dan _detectIconPath tidak dirancang untuk menangani URL data

masalah bayangan tampaknya disebabkan oleh fakta bahwa dalam _getIconUrl nilai untuk L.Icon.Default.imagePath sudah disetel dengan URL data penanda, jadi gambar untuk penanda digunakan dan diregangkan

mungkinkah ini terkait dengan komit ini mengkodekan gambar penanda?
https://github.com/Leaflet/Leaflet/commit/837d19093307eb5eeb1fca6536962a1ab1573dd5

@Radu-Filip Saya dapat memperbaikinya dengan modifikasi ini pada PR Anda - Saya tidak yakin apa efek lain yang mungkin terjadi:

Masalahnya adalah - seperti yang Anda katakan - bahwa URL default adalah gambar penanda, untuk semua ikon pada dasarnya.
Jadi pertama-tama saya menambahkan URL default untuk bayangan ke CSS:

/* Default icon URLs */
.leaflet-default-icon-path {
    background-image: url(images/marker-icon.png);
}

.leaflet-default-shadow-path {
    background-image: url(images/marker-shadow.png);
}

Kemudian saya meneruskan nama dari _getIconUrl ke _detectIconPath dan menggunakannya untuk menambahkan kelas ke elemen tempat path diekstraksi:

_getIconUrl: function (name) {

  L.Icon.Default.imagePath = this._detectIconPath(name);

    // <strong i="15">@option</strong> imagePath: String
    // `L.Icon.Default` will try to auto-detect the absolute location of the
    // blue icon images. If you are placing these images in a non-standard
    // way, set this option to point to the right absolute path.
  var path = this.options.imagePath || L.Icon.Default.imagePath;
  return path.indexOf("data:") === 0 ? path : path + L.Icon.prototype._getIconUrl.call(this, name);
},

_detectIconPath: function (name) {
    var el = L.DomUtil.create('div',  'leaflet-default-' + name + '-path', document.body);
    var path = L.DomUtil.getStyle(el, 'background-image') ||
               L.DomUtil.getStyle(el, 'backgroundImage');   // IE8

    document.body.removeChild(el);

    return path.indexOf('url') === 0 ? path.replace(/^url\([\"\']?/, '').replace(/(marker-icon\.png)?[\"\']?\)$/, '') : '';
}

Saya juga harus menghapus if/else sekitar detectIconPath , karena itu tidak dipanggil untuk ikon bayangan. Sekarang semuanya berfungsi untuk ikon penanda default - tidak yakin tentang yang khusus.

@codeofsumit ya, saya melakukan hal serupa di sini https://github.com/Radu-Filip/Leaflet/tree/temp
dan saya akan menggunakan if untuk saat ini sebagai peretasan. Semoga akan ada lebih banyak solusi bukti masa depan bagi mereka yang menggunakan webpack et al

@Radu-Filip apakah Anda keberatan memperbarui PR Anda dengan solusi itu? Mungkin bisa digabungkan.

@codeofsumi selesai, mari kita lihat apakah berhasil

Hai,

Mungkin saya melewatkan sesuatu, tetapi menurut saya masalah pembuatan Webpack ini dapat diatasi dengan plugin Leaflet, yang akan menggantikan perilaku L.Icon.Default .

Demo: http://playground-leaflet.rhcloud.com/nexo/1/edit?html ,css,output

Dengan pendekatan ini, Anda menyingkirkan RegExp yang rumit, dan gambar penanda default disejajarkan (dengan pengkodean keras), yang merupakan salah satu hasil yang dimaksudkan Webpack untuk gambar kecil.

Kelemahan yang mungkin adalah bahwa setiap penanda memiliki ikon base64 sendiri, tidak yakin apakah browser dapat menyimpannya… (kelemahan yang sama untuk PR #5041)
Kita dapat membayangkan penyempurnaan dengan menyetelnya sebagai gambar latar daripada menempatkannya di atribut gambar src , seperti yang dilakukan untuk ikon Kontrol Lapisan misalnya.
Mungkin ada jebakan tersembunyi dengan ide ini (edit: terdengar seperti itu ), jika tidak, saya yakin itu akan diterapkan sejak lama, karena itu akan menghindari deteksi jalur gambar di tempat pertama.

Demo: http://playground-leaflet.rhcloud.com/mey/1/edit?html ,css,output (tidak merawat retina)

Keuntungan terbesar dari pendekatan plugin, adalah mempertahankan perilaku khusus ini hanya untuk proyek Webpack.

Semoga ini membantu.

BTW, menurut saya ada sesuatu yang salah secara intrinsik di sini.

Leaflet membuat deteksi jalur "kompleks" ke gambar, yang harus berada di tempat yang telah ditentukan sebelumnya dibandingkan dengan file CSS.

Tetapi proses pembuatan webpack membundel CSS dan mungkin (atau tidak) memindahkan gambar juga (dan mengganti namanya!), Tergantung pada apa yang diminta pengembang ke webpack (seperti membutuhkan gambar).
Oleh karena itu deteksi Leaflet pasti gagal saat webpack digunakan.

PR #5041 seperti trik untuk menerima kasus di mana webpack menyejajarkan gambar ke dalam CSS, dengan biaya menduplikasi gambar Base64 ke setiap penanda. Bahkan tidak berbicara tentang biaya untuk pengguna non-webpack.

PR #4979 dimaksudkan hanya untuk mencegah pesan kesalahan pembuatan webpack (karena file yang hilang), ia tidak terlihat menangani sama sekali resolusi jalur gambar yang sebenarnya.
Saya kira pengembang kemudian secara manual menentukan L.Icon.Default.imagePath ?
@jasongrout dan @Eschon , mungkin Anda bisa berbagi bagaimana Anda mengelolanya?

Saya tidak benar-benar mengelolanya. Saya hanya tidak menggunakan ikon default sehingga bug ini tidak menjadi masalah bagi saya sampai sekarang.

Hai, hanya catatan untuk mengatakan bahwa saya dapat mereproduksi kesalahan jalur ini menggunakan versi 1.0.1 dari perpustakaan ini.
Saya menggunakannya bersama dengan modul selebaran Drupal (7.x-1.x-dev), dan di sini ada masalah yang dilaporkan ke modul: https://www.drupal.org/node/2814039 jika berguna.

Sejauh yang saya bisa lihat "masalah" ada di fungsi _getIconUrl? karena setelah L.Icon.Default.imagePath ada garis miring yang hilang, jadi jalur gambar misalnya di Drupal akan dibuat seperti ini " /sites/all/libraries/leaflet/imagesmarker-icon.png ". Di antara jalur gambar dan nama file gambar penanda (marker-icon.png) harus ada garis miring /.

Hai @anairamzap-mobomo,

Kedengarannya seperti apa yang Anda laporkan adalah masalah yang berbeda.

Sayangnya, karena tampaknya melibatkan port ke kerangka kerja (Drupal), Anda harus terlebih dahulu memastikan bahwa bug tersebut tidak terkait dengan cara kerja port tersebut.

Leaflet 1.0.x dengan vanilla JS dengan benar menyertakan garis miring: http://playground-leaflet.rhcloud.com/fosa/1/edit?html ,output

Lihat misalnya http://cgit.drupalcode.org/leaflet/tree/leaflet.module#n51 , di mana L.Icon.Default.imagePath diganti oleh modul Drupal.

Sepertinya modul itu tidak menangani perubahan antara Leaflet 0.7.x dan 1.0.x, di mana garis miring sekarang harus disertakan dalam L.Icon.Default.imagePath .

Karena Leaflet 1.0.0 adalah rilis utama, saya rasa tidak ada komitmen untuk kompatibilitas mundur.

hey @ghybs begitu... Saya akan menghubungi pengelola modul Drupal untuk memberi tahu mereka tentang hal ini. Seperti yang Anda katakan, sepertinya mereka harus memodifikasi modul agar sesuai dengan versi 1.0.x dari perpustakaan, atau setidaknya menambahkan beberapa baris ke dokumen yang memperingatkan tentang hal ini.

Terima kasih atas tanggapan Anda!

Saya mengalami masalah yang sama persis seperti yang dilaporkan sebelumnya -- dalam proyek aurulia skeleton/esnext+webpack.

Sampai ini diperbaiki, saya telah menyalin gambar ke folder sumber saya dan menggunakan penanda khusus - menghilangkan info ukuran/penempatan tampaknya tidak masalah ...

        var customDefault = L.icon({
            iconUrl: 'images/marker-icon.png',
            shadowUrl: 'images/marker-shadow.png',
        });

Ingin berbagi apa yang saya lakukan untuk mengatasi data yang tidak valid url . Pada dasarnya atur ikon default ke yang baru yang menggunakan ikon penanda dan bayangan yang disediakan, tetapi akan membiarkan webpack menangani penyandian data dari gambar-gambar itu satu per satu. Cukup sertakan file seperti ini di suatu tempat.

import L from 'leaflet';

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

Mungkin bisa di-tweak untuk menyertakan ikon retina juga.

adakah yang bisa mengirim file leaflet.js yang dimodifikasi?
kode yang @ajoslin103 gunakan:
```var customDefault = L.icon({
iconUrl: 'gambar/penanda-ikon.png',
shadowUrl: 'gambar/penanda-bayangan.png',
});

Saya tidak mengubah file leaflet.js, saya hanya menyalin gambar marker dari distribusi leaflet ke folder gambar normal saya, dan kemudian menggunakan fragmen yang saya posting sebagai ikon kustom.

Saya tidak dapat menggunakan solusi crob611 karena mereka direferensikan dalam css asli sebagai http dan situs saya dilayani melalui https.

``` function onLocationFound(e) {
var radius = e.accuracy / 2;
var customDefault = L.icon({
iconUrl: 'marker_icon_2x',
shadowUrl: 'marker_shadow.png'
});
L.marker(e.latlng).addTo(peta)
.bindPopup("Anda berada dalam " + radius + " meter dari titik ini").openPopup();
L.circle(e.latlng, radius).addTo(peta);
}

bagaimana saya bisa mengatur ikon baru?

Saya membuat ikon khusus di konstruktor saya (saya menggunakan kerangka kerja Aurelia)

        this.customDefault = L.icon({
            iconUrl: 'images/marker-icon.png',
            shadowUrl: 'images/marker-shadow.png',
        });

Kemudian saya menggunakannya ketika saya menambahkan penanda dalam metode terlampir ()

        var map = L.map('mapid').setView([latitude, longitude], 13);
        let urlTemplate = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
        map.addLayer(L.tileLayer(urlTemplate, { minZoom: 4 }));
        L.marker([latitude, longitude], { icon: this.customDefault }).addTo(map);

Referensi: http://leafletjs.com/examples/custom-icons/

Sampai ada perbaikan yang baik untuk masalah ini, bolehkah saya menyarankan untuk menambahkan peringatan runtime ketika _getIconUrl() (atau apa pun) tiba-tiba menemukan UI data, menunjuk ke URL Masalah Github melalui console.warn atau sesuatu seperti itu.

Itu akan membawa orang dengan masalah yang sama ke tempat yang tepat dan menyarankan solusi (seperti ini yang berhasil untuk saya).

Begitulah cara React (dev build) membantu pengembang untuk mengidentifikasi masalah.

Dari masalah reaksi, solusi oleh @PTihomir

import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

ini memperbaiki masalah tanpa mengubah file inti selebaran.

@codeofsumit : FYI, dari apa yang saya pahami, solusi ini hanya berfungsi untuk tiga ikon yang disebutkan.

Solusinya perlu dilakukan untuk disesuaikan jika Leflet (atau akan di masa depan) memerlukan ikon lain dengan cara yang sama (mungkin untuk komponen lain - saya tidak tahu).

Bagi mereka yang tidak terbiasa dengan Webpack: Webpack akan menetapkan URL baru ke properti ini:

/***/ 5305024559067547:
/***/ function(module, exports, __webpack_require__) {

    module.exports = __webpack_require__.p + "d95d69fa8a7dfe391399e22c0c45e203.png";

/***/ },


...


    _leaflet2['default'].Icon.Default.mergeOptions({
      iconRetinaUrl: __webpack_require__(5305024559067547),
      iconUrl: __webpack_require__(6633266380715105),
      shadowUrl: __webpack_require__(880063406195787)
    });

(detailnya sangat bergantung pada konfigurasi Webpack yang digunakan)

@jampy ya tentu saja. Oleh karena itu ini adalah solusi. Namun, modifikasi apa pun pada inti selebaran akan dihapus dengan setiap pembaruan. Saya akan menggunakan solusi yang disebutkan sampai ada perbaikan yang tepat karena sepertinya paling tidak menyakitkan.

Masalah yang sama di sini, fungsi detectIconPath mengembalikan http://localhost:8080/2273e3d8ad9264b7daa5bdbf8e6b47f8.png") untuk jalur url("http://localhost:8080/2273e3d8ad9264b7daa5bdbf8e6b47f8.png")

itu jauh dari ideal, tetapi saya menggunakan webpack dan saya menggunakan solusi ini

Saya menyalin gambar ke folder gambar di root proyek saya

kemudian di package.json saya, saya menambahkan skrip npm postbuild (di bagian skrip)
" postbuild:prod ": "./Post-Build4Prod.sh"

yang menyalin folder gambar ke dist

#bin/bash
cp -r ./images ./dist/.

lalu saya mendefinisikan customDefault untuk ikon

    this.customDefault = L.icon({
        iconUrl: 'images/marker-icon.png',
        shadowUrl: 'images/marker-shadow.png',
    });

dan gunakan itu di mana saja

    L.marker([latitude, longitude], { icon: this.customDefault }).addTo(map);

@ajoslin103 , pertimbangkan solusi ini . Ini lebih sederhana dan Anda berakhir dengan hasil yang sama.

Saya menggunakan yang berikut ini untuk mengatasinya dalam proyek webpack Vue:

import L from 'leaflet';

L.Icon.Default.imagePath = '/';
L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

Saya memiliki masalah yang sama dengan Django's collectstatic dan CachedStaticFilesStorage yang menambahkan hash konten file ke nama file statis, jadi marker-icon.png menjadi marker-icon.2273e3d8ad92.png dan kemudian regexp di akhir _detectIconPath gagal untuk mencocokkan.

Saya mengubahnya menjadi replace(/marker-icon[^"']+\.png[\"\']?\)$/, '') yang berhasil untuk saya.

Saya memiliki masalah ini saat ini, juga.
Menggunakan Leaflet 1.0.3, dan Angular2.
Saya akui, saya tidak melihat bagaimana menyelesaikannya mengingat utas ini.

Untuk Sudut 2 & 4
Saya membuat file require.d.ts dengan kode :

interface WebpackRequire {
    <T>(path: string): T;
    (paths: string[], callback: (...modules: any[]) => void): void;
    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
}
interface NodeRequire extends WebpackRequire {}
declare var require: NodeRequire;

dan kemudian menggunakan membutuhkanuntuk masalah ini:

                  this.marker = L.marker(e.latlng, {
                    icon: L.icon({
                        iconUrl: require <any>('../../images/marker-icon.png'),
                        shadowUrl: require <any>('../../images/marker-shadow.png'),
                    })

Solusi (dengan ukuran & jangkar) untuk Vue.js dengan webpack :

import L from 'leaflet'

// BUG https://github.com/Leaflet/Leaflet/issues/4968
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'
import iconUrl from 'leaflet/dist/images/marker-icon.png'
import shadowUrl from 'leaflet/dist/images/marker-shadow.png'
L.Marker.prototype.options.icon = L.icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41]
})

Saya melakukan beberapa tes kinerja cepat untuk menyejajarkan ikon default sebagai base64 versus menggunakan URL gambar eksternal. Saat memuat _a lot_ penanda (1000, dalam kasus saya), kinerjanya terasa lebih buruk untuk gambar sebaris base64.

Berikut tampilan kinerja Chrome devtools saat memuat 1000 ikon penanda sebagai URL eksternal:

Sebagai perbandingan, dengan 1000 ikon penanda sebagai base64 sebaris (harap perhatikan skala waktu yang berbeda, maaf):

Seperti yang dapat dilihat, untuk beberapa alasan komposisi lapisan tertunda saat menggunakan gambar sebaris, yang membuat seluruh pemuatan memakan waktu kira-kira satu detik lebih lama.

Untuk penggunaan biasa, ini mungkin tidak masalah, tetapi jika Anda menggunakan banyak penanda, ini mungkin relevan.

Usulan cara penanganan jangka panjang ini:

• Perbaiki #5041 untuk mengatasi masalah yang disebutkan dalam tinjauan kode; ini akan membuat ikon sebaris berfungsi di luar kotak
• Catat peringatan jika ikon sebaris digunakan, untuk menunjukkan bahwa ini mungkin tidak ideal

Pilihan lain adalah kembali ke metode lama (0.7) untuk mendeteksi jalur gambar, tetapi kami tahu bahwa ada masalah lain yang tidak dapat kami selesaikan.

Hai @perliedman ,

Profil yang bagus!
Ini menjawab keraguan yang saya miliki tentang sisi buruk penggunaan kembali gambar sebaris.

Memang PR #5041 dapat difaktorkan ulang sehingga Leaflet dapat langsung bekerja saat gambar ikon dimasukkan ke dalam CSS (oleh mesin pembuat seperti webpack).
Solusi yang dapat saya pikirkan (kebanyakan mirip dengan PR yang disebutkan) akan menyiratkan pembuatan 1 kelas per gambar, oleh karena itu akan meningkatkan ukuran file CSS (dan mungkin JS) beberapa lusin byte.

Contoh: http://playground-leaflet.rhcloud.com/dulox/1/edit?html ,css,output

Tetapi seperti yang saya sebutkan sebelumnya , sangat disayangkan bahwa perubahan seperti itu karena alasan kompatibilitas (dengan mesin build) memengaruhi pengguna yang tidak menggunakan kerangka kerja dan proses pembangunan ini.

Di sisi lain, hasilnya bisa menjadi "lebih bersih" karena kita bisa menyingkirkan nama file hard-code di opsi kelas IconDefault , dan mendelegasikan path lengkap (termasuk nama file) ke CSS.
Ini sangat menarik karena (jika saya mengerti dengan benar) inti dari deteksi kompleks ini adalah untuk memisahkan lokasi gambar dari file JS, dan mengandalkan lokasi relatifnya ke file CSS sebagai gantinya. Oleh karena itu masuk akal bagi saya bahwa bahkan nama file didefinisikan dalam CSS.

Tetapi kemudian mencoba mempertahankan kompatibilitas dengan opsi imagePath juga bisa menjadi rumit, karena mungkin memerlukan pengerjaan ulang jalur gambar yang sebelumnya terdeteksi, untuk mengganti jalur utama dan mempertahankan nama file. Oleh karena itu kami akan memperkenalkan RegExp baru di sana.

Akhirnya, saya tidak yakin ini akan mencakup semua kasus.
Proses pembuatan dapat sangat disesuaikan, yang mengarah ke situasi yang sangat berbeda terkait aset statis seperti gambar ikon. Mungkin masih ada beberapa kasus sudut di mana bahkan hal di atas akan gagal.

@ghybs Saya suka contoh itu ( http://playground-leaflet.rhcloud.com/dulox/)!

Mungkin berlebihan, tetapi apa pendapat Anda tentang juga menentukan ikon _size_ di CSS ini (menggunakan width dan height )? Saya dapat membayangkan seseorang mengesampingkan aturan CSS tersebut untuk mengubah ikon default, hanya untuk menemukan bahwa sekarang memiliki dimensi yang salah.

Dengan atau tanpa dimensi dalam CSS, saya pikir ini adalah cara yang bagus untuk maju. Maukah Anda membuat PR seperti contoh Anda? Jika Anda tidak punya waktu atau energi sekarang, saya dapat melanjutkan dan melakukannya, katakan saja apa yang Anda inginkan.

Saya ingin menutup yang ini, karena saya sendiri kebetulan menemukan masalah ini.

Hai @perliedman ,

Saya setuju akan lebih baik untuk dapat menentukan ukuran ikon juga melalui CSS.

Namun dalam hal ini, untuk konsistensi kita juga harus dapat menentukan titik jangkar. Saya tidak yakin aturan CSS mana yang cocok untuk ini (mungkin margin?). Jika itu mungkin, maka hasilnya akan sangat bagus menurut saya: ikon akan sepenuhnya ditentukan dalam CSS.

Mendorong lebih jauh, itu bisa menjadi cara ekstra untuk mendefinisikan ikon: tentukan 3 kelas CSS (ikon, retina, bayangan) dan Leaflet akan mengekstrak semua opsi ikon dari mereka.

Tolong jangan ragu untuk mengerjakan ini, sayangnya saya tidak yakin kapan saya bisa mendapatkan waktu ...

Berdasarkan contoh sebelumnya, berikut adalah konsep membaca aturan CSS padding dan margin untuk menentukan iconAnchor ( shadowAnchor ) dan popupAnchor pilihan:
http://playground-leaflet.rhcloud.com/xuvi/1/edit?html ,css,output

Saya tidak suka fakta bahwa saya menggunakan padding untuk menentukan iconAnchor , karena pada akhirnya Leaflet menggunakan margin untuk memposisikan gambar ikon…
Tapi itu yang paling mudah saya temukan untuk dengan cepat menentukan hal-hal di CSS, dan menghindari pengembalian nilai dibandingkan dengan cara kami menentukan opsi ikon.

Meskipun saya menyukai hasil dari menentukan semuanya dalam CSS, masih ada lebih banyak pekerjaan yang diperlukan untuk mempertahankan kompatibilitas mundur dengan L.Icon.Default.imagePath .

Saya minta maaf saya tidak punya waktu untuk membuat PR.

Saya baru saja mendiagnosis kasus lain di mana _detectIconPath gagal: Saat menggunakan Firefox (diuji dengan ESR dan versi saat ini) dan mengatur Preferensi → Konten → Warna… → Ganti warna yang ditentukan oleh halaman dengan pilihan Anda di atas: Selalu Firefox akan menghapus background-image properti termasuk yang ada di .leaflet-default-icon-path dan dengan demikian merusak _detectIconPath .

Saya tidak yakin berapa banyak orang yang menggunakan fitur Firefox ini, tetapi saya telah menggunakannya untuk waktu yang sangat lama.

Bisakah url() digunakan sebagai nilai properti CSS lainnya juga? Seperti menggunakan CSS berikut: .leaflet-default-icon-path { -leaflet-icon: url(images/marker-icon.png); } atau tidak mungkin untuk mendefinisikan dan menggunakan properti CSS khusus sendiri? Tidak ada browser yang perlu _memahami_ properti -leaflet-icon , namun mereka masih perlu mengisinya dan membuat nilainya tersedia untuk skrip.

Hai @roques ,

Terima kasih telah melaporkan masalah ini saat menggunakan opsi khusus ini di Firefox!
Sepertinya Chrome memiliki ekstensi Kontras Tinggi tetapi hanya mengubah warna, tanpa merusak apa pun di Leaflet.

Sayangnya Firefox menghapus properti CSS yang tidak dipahaminya.
Namun tipe data CSS gambar dapat digunakan dengan beberapa aturan lain, termasuk cursor , yang terlihat berfungsi dengan baik bahkan ketika pengaturan penimpaan warna digunakan di Firefox:
http://playground-leaflet.rhcloud.com/yov/1/edit?html ,css,output

Saya merasa kurang elegan untuk menggunakan cursor daripada background-image , karena penggunaannya jauh lebih jauh dari apa yang akan kita lakukan untuk membuat penanda melalui penataan CSS… deteksi saja.

Saya akan membuat PR untuk mengatasi masalah webpack, saya akan menyertakan solusi ini sekarang.
Saya tidak tahu bagaimana kami bisa membuat tes otomatis untuk kasus ini, tapi saya pikir solusinya seharusnya sudah bagus.

Adakah yang menemukan solusi yang jelas untuk masalah ini?

Membangun jawaban @ Shiva127 , bagi siapa saja yang menggunakan Angular + Angular CLI:

Anda dapat memasukkan ini ke dalam app.module.ts :

// BUG https://github.com/Leaflet/Leaflet/issues/4968
import {icon, Marker} from 'leaflet';
const iconRetinaUrl = 'assets/marker-icon-2x.png';
const iconUrl = 'assets/marker-icon.png';
const shadowUrl = 'assets/marker-shadow.png';
const iconDefault = icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41]
});
Marker.prototype.options.icon = iconDefault;

dan tambahkan baris glob di .angular-cli.json :

"assets": [
        "assets",
        "favicon.ico",
        { "glob": "**/*", "input": "../node_modules/leaflet/dist/images/", "output": "./assets/" }
      ],

Ini akan menyalin ikon ke folder aset di folder dist pada waktu pembuatan (Anda tidak akan melihatnya di src/assets). Selain itu, bekerja di sekitar app.module.ts adalah tempat yang baik untuk menjaga prototipe global yang memodifikasi impor (seperti patch yang dapat diamati RxJS). Dengan itu, mengimpor Marker di tempat lain di basis kode akan berfungsi dengan benar.

Saya telah memperbaiki masalah ini seperti ini.

Saya telah menyediakan ikon default untuk penanda drawOptions:

const myIcon = L.icon({
    ...
    ...
});

const drawOptions = {
      ....
      marker: {
         icon: myIcon
      }
};

...

Kemudian simpan jalur ke ikon di L.Draw.Event.CREATED

this.map.on(L.Draw.Event.CREATED, (e) => {

      const layer: any = (e as L.DrawEvents.Created).layer;
      const type = (e as L.DrawEvents.Created).layerType;

      // Create a marker.
      if (type === 'marker') {

        let feature = layer.feature = layer.feature || {};
        feature.type = "Feature";
        feature.properties = feature.properties || {};
        feature.properties["markerIconsPath"] = "/assets/icons/";
       }
 });

Akhirnya saat menampilkan lapisan saya mengatur imagePath:

if(layer instanceof L.Marker) {
            L.Icon.Default.imagePath = layer.feature.properties.markerIconsPath;
            layer.setIcon(greenIcon);
 }

@codeofsumi apakah perbaikan ini termasuk dalam versi terbaru 1.3.1? Anehnya, saya menggunakan versi 1.3.1 dan masih menghadapi masalah yang sama.

@vishalrajole sepengetahuan saya, satu-satunya PR yang dikirimkan untuk mengatasi ini adalah #5041, yang telah dibuka dengan perubahan yang diminta untuk waktu _lama_.

Kami juga memiliki solusi alternatif #5771, yang bagus tetapi melibatkan lebih banyak perubahan.

Jadi, kesimpulannya: tidak ada yang mengirimkan PR yang diterima untuk mengatasi ini, bantuan diterima!

@perliedman dari kelihatannya, perubahan #5771 yang terlibat diperlukan. Jika tidak, Anda akan terus mengalami masalah ini dalam situasi yang berbeda. Kenapa tidak digabung saja?

Hai @mb21 ,

perubahan yang terlibat dari #5771 diperlukan

Sebenarnya perubahan yang diusulkan ada 2 jenis:

• membaca setiap jalur gambar alih-alih hanya lokasi folder gambar, sehingga url yang dimodifikasi oleh mesin pembuat (seperti pemuat file webpack) dibaca apa adanya alih-alih direkonstruksi/ditebak.
• membaca semua opsi ikon default lainnya dari CSS, sehingga semua konfigurasi dikumpulkan di satu tempat.

Poin kedua menarik jika poin pertama tidak dapat dihindari, bahkan jika itu menambahkan beberapa kode.

Yang pertama sebenarnya adalah bantuan bagi pengembang yang menggunakan mesin build yang mengutak-atik url di CSS. Itu membuat Leaflet _zero config spirit_ bahkan di lingkungan baru di mana pengembang menghabiskan cukup banyak waktu untuk menyetel konfigurasi mereka (jika Anda menggunakan pemuat file webpack, Anda tetap memerlukan konfigurasi khusus), dengan mengorbankan beberapa kode untuk orang lain, yang adalah IMHO _against_ Leaflet spirit (mendukung penggunaan umum di inti, mendelegasikan kasus penggunaan lain ke plugin).
Anda dapat dengan mudah menyelesaikan masalah ini dengan menentukan jalur gambar, biasanya menggunakan require(image) seperti yang ditunjukkan dalam banyak komentar di atas.

Oleh karena itu, meskipun saya menulis PR itu, saya secara pribadi merasa tidak nyaman untuk menggabungkannya ke dalam inti. Perubahan _tidak diperlukan untuk mayoritas_.

Mereka memang bagus untuk membuat hidup pengembang lebih mudah, tetapi masalah ini terutama disebabkan oleh interaksi mesin pembuat/pembungkus kerangka kerja, masing-masing memiliki kekhususannya, dan masing-masing memiliki cara mudah untuk memberi tahu Leaflet di mana gambar sekarang, menggunakan yang sudah ada API.

Mungkin kita sebaiknya mengatasi masalah ini dengan dokumentasi yang lebih baik (misalnya bagian yang didedikasikan untuk penggunaan dengan mesin/kerangka kerja?), dan/atau plugin?

Yah, saya tidak yakin saya mengerti seluk-beluknya. Tapi pasti akan menyenangkan untuk semua jenis pengembang jika _semua_ jalur gambar dapat ditentukan dalam CSS. Bukan hanya pengguna webpack, tetapi juga orang-orang seperti saya yang menggunakan jalur aset Rails atau Django yang menambahkan hash ke setiap aset statis...

Saya pernah mengalami masalah yang persis sama:
data:image/png;base64,iVBORw0...AAAASUVORK5CYII=")marker-shadow.png net::ERR_INVALID_URL

Solusinya adalah dengan mengganti:

getIconUrl: function (name) {
        if (!IconDefault.imagePath) {   // Deprecated, backwards-compatibility only
            IconDefault.imagePath = this._detectIconPath();
        }

        // <strong i="8">@option</strong> imagePath: String
        // `Icon.Default` will try to auto-detect the location of the
        // blue icon images. If you are placing these images in a non-standard
        // way, set this option to point to the right path.
        return (this.options.imagePath || IconDefault.imagePath) + Icon.prototype._getIconUrl.call(this, name);
    },

dengan:

 // ...
  const url = (this.options.imagePath || L.Icon.Default.imagePath);

  return url.slice(0, -2);

seperti yang disarankan oleh codeofsumit.

Saya merasa itu sangat menjengkelkan dan fakta bahwa ada PR untuk memperbaikinya tetapi tidak digabung karena "perasaan" bahwa "Perubahan tidak diperlukan untuk mayoritas." Maaf, tapi saya telah melihat orang-orang berjuang dengan itu di PHP, RoR, Python (Django) dan node.js, jadi menurut Anda di mana "mayoritas" di luar grup ini? Kerangka kerja yang kompatibel apa yang akan Anda rekomendasikan?

Saya setuju dengan @macwis

Memiliki masalah yang sama dan utas ini sangat panjang. Mengapa tidak menggabungkan PR?

Itu bukan perasaan, itu fakta: mayoritas tidak menggunakan kerangka kerja, atau mereka yang tidak mengutak-atik CSS.
Terakhir kali saya cek, Leaflet no 1 didownload dari unpkg CDN, yaitu unbundled dan unfiddled CSS.

Solusi yang tepat adalah dengan menentukan opsi ikon default, seperti yang dijelaskan dalam banyak pesan di atas.
Banyak kerangka kerja melakukannya sebagai bagian dari plugin integrasi Leaflet mereka.

Jika Anda menginginkan solusi yang lebih otomatis, Anda masih memiliki opsi untuk menerbitkan plugin.

Mengapa tidak menggabungkan PR?

Baca komentar, misalnya https://github.com/Leaflet/Leaflet/issues/4968#issuecomment -382639119

Saya hanya ingin memberikan sedikit petunjuk: Anda juga dapat menggunakan CDN saat menggunakan kerangka kerja. Itulah yang kami lakukan misalnya dengan Aplikasi React kami. Kami memuat lib besar melalui CDN.

@googol7 terima kasih atas masukannya.

Harap perbaiki saya jika saya salah: jika Anda memuat Leaflet melalui CDN, kemungkinan besar Anda tidak mengubah CSS-nya. Karenanya pengguna Anda adalah mayoritas.

@ghybs : Yang harus saya lakukan adalah sebagai berikut:

// Workaround: https://github.com/Leaflet/Leaflet/issues/4968#issuecomment-269750768
/* eslint-disable no-underscore-dangle, global-require */
delete L.Icon.Default.prototype._getIconUrl

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
    iconUrl: require("leaflet/dist/images/marker-icon.png"),
    shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
})
/* eslint-enable no-underscore-dangle, global-require */

konfigurasi webpack kami terlihat seperti ini:

module.exports = {
    externals: {
        leaflet: "L",
    },
}

@ googol7 terima kasih atas detail konfigurasi Anda.

Jadi maksud Anda Anda memuat Leaflet JS dari CDN, tetapi menggabungkan CSS dan gambar di aplikasi Anda.

@ghybs ya saya kira itulah yang terjadi di sini.

Pastikan untuk mengikuti dua langkah pertama: https://leafletjs.com/examples/quick-start/
Saya memiliki masalah serupa karena saya menggunakan css dari tutorial orang lain, tetapi yang ini harus digunakan

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>

dan kemudian skrip Leaflet segera setelah itu

<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

Halo semua,

Saya menerbitkan plugin Leaflet " leaflet-defaulticon-compatibility " yang mengambil kode dari PR saya https://github.com/Leaflet/Leaflet/pull/5771.
Dengan menggunakan plugin itu, Ikon Default Leaflet tidak lagi mencoba membangun kembali jalur gambar ikon, tetapi sepenuhnya bergantung pada CSS. Dengan begitu, ini menjadi sepenuhnya kompatibel dengan mesin build dan kerangka kerja yang secara otomatis mengelola aset berdasarkan CSS (dan biasanya menulis ulang url() ).

Cukup muat plugin (CSS + JS) _after_ Leaflet.
Misalnya di webpack:

import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'
import * as L from 'leaflet'
import 'leaflet-defaulticon-compatibility'

( demo )

Meskipun saya dapat memahami bahwa banyak pengembang lebih suka fitur tersebut untuk dimasukkan langsung ke inti Leaflet, ada pendapat bahwa kode yang ditambahkan tidak berguna bagi sebagian besar pengguna akhir. Oleh karena itu, menyelaraskan dengan semangat Leaflet untuk menjaga intinya tetap sederhana, saya memutuskan untuk menjadikannya sebuah plugin.

Silakan membuka masalah pada repo plugin jika Anda memiliki masalah atau masalah dengan cara kerjanya.

Faktanya adalah, jika Anda menggunakan webpack Anda mendapatkan masalah ini. Saya melihat tren semakin banyak situs yang menggunakan webpack. Menempatkan ini sebagai plugin kurang ideal, IMHO, karena saya tidak melihat orang mencari plugin untuk memperbaiki masalah semacam ini (seperti yang saya lakukan ketika saya membuka dup).
Saya sangat ingin melihat selebaran bagian dalam ini karena ini lebih merupakan perbaikan bug daripada fitur...

Jika Anda ingin menyelesaikan masalah ini di Angular 6, cukup tulis di angular.json :

 {
         "glob": "**/*",
         "input": "./node_modules/leaflet/dist/images/",
         "output": "./assets/leaflet/"
  }

Setelah itu, timpa perilaku default Marker , seperti yang disarankan oleh beberapa jawaban sebelumnya:

import { Icon, icon, Marker, marker } from 'leaflet';

@Component({
   selector: 'app-something',
   templateUrl: './events.component.html',
   styleUrls: ['./events.component.scss']
})
export class SomeComponent implements OnInit {
  // Override default Icons
  private defaultIcon: Icon = icon({
    iconUrl: 'assets/leaflet/marker-icon.png',
    shadowUrl: 'assets/leaflet/marker-shadow.png'
  });

  ngOnInit() {
     Marker.prototype.options.icon = this.defaultIcon;
  }
}

Paket Angular yang saya gunakan dan memiliki masalah yang sama seperti di sini adalah: ngx-leaflet

CATATAN:
Ada menangkap kecil di sudut 6, sebagai jawaban dari _t.animal_ di StackOverflow mengatakan

Ketahuilah bahwa di Angular 6 ada dua pembangun yang build dan test .

Pastikan Anda meletakkannya di bawah build .

@marko-jovanovic terima kasih atas infonya, tetapi bagaimana jika saya tidak menggunakan aset ini dan ingin mengurangi ukuran paket saya?
Saran Anda masih termasuk dalam definisi solusi saya, IMO.

@HarelM Yah saya tidak bisa memberikan solusi lain karena saya sedang terburu-buru untuk menyelesaikan proyek sekolah. Itu tidak sempurna dan saya tahu itu meningkatkan ukuran paket, tetapi solusi saya sudah cukup untuk saya, dan berharap jawaban saya dapat membantu orang lain juga.

@marko-jovanovic solusi Anda bagus dan saya juga berharap ini bisa membantu orang lain. Saya hanya berharap untuk solusi, bukan solusi :-)

@ marko-jovanovic Hai, saya terlalu duduk di proyek sekolah (Angular 6) dan tidak tahu mengapa hal-hal tidak berhasil untuk saya. Sejujurnya saya benar-benar noob untuk semua hal ini di sini.

Ketika saya memasukkan kode Anda di ngOnInit -Fungsi komponen saya, itu menimbulkan kesalahan di bagian di mana Anda mengatur iconUrl dan shadowUrl :

Argument of type '{ iconUrl: (options: IconOptions) => Icon<IconOptions>; shadowUrl: any; }' is not assignable to parameter of type 'IconOptions'. Types of property 'iconUrl' are incompatible. Type '(options: IconOptions) => Icon<IconOptions>' is not assignable to type 'string'.

Apakah saya melewatkan sesuatu? Terima kasih sebelumnya!

@gittiker Saya telah memperbarui jawaban dengan contoh impor, komponen, dan ngOnInit. Beri tahu saya jika semuanya berjalan baik-baik saja. :)

@gittiker Saya telah memperbarui jawaban dengan contoh impor, komponen, dan ngOnInit. Beri tahu saya jika semuanya berjalan baik-baik saja. :)

Ya terima kasih banyak, akhirnya berhasil. Saya harus memanipulasi URL Anda sedikit jadi
'assets/leaflet/images/marker-icon.png bukannya 'assets/leaflet/marker-icon.png', . Hal yang sama berlaku untuk gambar bayangan.

@crob611 Terima kasih banyak, saya mencoba menyelesaikan masalah dengan metode ini.

@marko-jovanovic Anda menyelamatkan saya! tapi bagaimana @HarelM mengatakan, apakah tidak ada solusi?

terima kasih banyak, tetapi bagi saya itu melayani kode berikut: (Angular 6 dan leaflet1.3.4)
Langkah pertama
(https://codehandbook.org/use-leaflet-in-angular/)
Tapi kemudian ikonnya tidak ditampilkan
kesalahan dapatkan gambar ikon
bersih::ERR_INVALID_URL
selesaikan dengan memasukkan kode berikut ke dalam komponen
hapus L.Icon.Default.prototype._getIconUrl;`

L.Icon.Default.mergeOptions({
  iconRetinaUrl: '/assets/leaflet/dist/images/marker-icon-2x.png',
  iconUrl: '/assets/leaflet/dist/images/marker-icon.png',
  shadowUrl: '/assets/leaflet/dist/images/marker-shadow.png',
});`

Solusi menggunakan leaflet 1.3.4 dengan vue2-leaflet 1.2.3:

import { L, LControlAttribution, LMap, LTileLayer, LMarker, LGeoJson, LPopup } from 'vue2-leaflet'
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

2 sen saya: masalah saya dengan webpack hanya karena nama file hash, jadi saya telah mengonfigurasi file-loader agar tidak hash gambar selebaran:

use: [{
    loader: 'file-loader',
    options:
      {
        name(file) {
          console.log(file)
          if (file.match(/(layers-2x\.png|layers\.png|marker-icon\.png|marker-icon-2x\.png|marker-shadow\.png)/)) {
            return '[name].[ext]'
          }

          return '[name]-[hash].[ext]'
        },
        context: 'app/frontend' // <-- project specific
      }
  }]

AFAIK kasar tapi efisien.

@ghybs terima kasih atas perbaikan

google membawa saya ke sini karena menggunakan perpustakaan dengan Webpack memberi saya kesalahan ini.

Adakah yang tahu mengapa gambar-gambar itu tidak digarisbawahi sebagai svg?

Saya pikir ini dapat dengan mudah diselesaikan dengan postcss dan postcss-inline-svg . Ikon akan menjadi file svg sebaris alih-alih png eksternal. Ikon akan lebih renyah saat masalah ini hilang.

Adakah yang tahu mengapa gambar-gambar itu tidak digarisbawahi sebagai svg?

Dukungan browser lawas.

Terima kasih @IvanSanchez

Kemudian saya melihat dua solusi potensial. Salah satunya adalah menyejajarkan gambar sebagai base64 yang dikodekan .png . Alternatif lainnya adalah dengan memasukkan ikon .svg dan membuat pengembang yang menargetkan platform lama untuk mengganti ikon default.

Apakah salah satu dari solusi ini layak untuk diminta?

Dari semua browser yang didukung oleh leaflet , berikut ini tidak memiliki dukungan untuk svg ( caniuse ).

• IE 7 dan 8
• Peramban Android 2.*

sebariskan gambar sebagai base64

Lihat https://github.com/Leaflet/Leaflet/issues/4968#issuecomment -322422045

Harus menambahkan jangkar dan ukuran juga untuk membuatnya berfungsi, misalnya

   import icon from 'leaflet/dist/images/marker-icon.png';
   import iconShadow from 'leaflet/dist/images/marker-shadow.png';

   let DefaultIcon = L.icon({
      iconUrl: icon,
      shadowUrl: iconShadow,
      iconSize: [24,36],
      iconAnchor: [12,36]
    });

    L.Marker.prototype.options.icon = DefaultIcon; 

Saya juga memiliki masalah yang sama (webpack menggunakan Flask, jadi semua elemen seharusnya berada di folder statis), tetapi perbaikan @giorgi-m tidak cukup, karena saya mendapatkan kesalahan '"ekspor" hanya-baca' ( Firefox, tampaknya terkait dengan impor png?).
Saya melihat bahwa masalah telah selesai, tetapi kami masih melihat masalah dengan 1.4.0, jadi saya ingin tahu apa perbaikannya?

Melihat masalah ini dengan vue2-leaflet 2.0.2 dan leaflet 1.4.0.

ini tampaknya telah ada cukup lama, dan setengah dari solusi yang disajikan tampaknya tidak berfungsi.

Adakah yang menemukan akar masalah ini?

saya mengalami masalah yang sama dengan versi "vue2-leaflet": "2.0.3" leaflet "leaflet": "1.4.0".

juga menjalankan webpack.

Kami berhasil menggunakan vue2-leaflet 2.0.3 dan leaflet 1.4.0 menggunakan solusi yang ditemukan dalam masalah yang sama ini:

import L from 'leaflet'
require('../../node_modules/leaflet/dist/leaflet.css')

// FIX leaflet's default icon path problems with webpack
delete L.Icon.Default.prototype._getIconUrl
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

Saya kira pertanyaan yang lebih baik yang perlu ditanyakan adalah mengapa ini tidak diperbaiki dengan kode gabungan yang menyebabkan masalah ditutup? Karena solusi yang berhasil sangat bagus, tetapi ini harus berhasil dan masih perlu menjadi masalah terbuka.

Halo semuanya,

Selebaran bekerja di luar kotak.

Webpack (dan mesin build lainnya) yang digabungkan dengan Leaflet tidak berfungsi dengan baik.

Silakan merujuk ke solusi yang diusulkan di https://github.com/Leaflet/Leaflet/issues/4968#issuecomment -399857656: leaflet-defaulticon-compatibility

Meskipun saya dapat memahami bahwa banyak pengembang lebih suka fitur tersebut untuk dimasukkan langsung ke inti Leaflet, ada pendapat bahwa kode yang ditambahkan tidak berguna bagi sebagian besar pengguna akhir. Oleh karena itu, menyelaraskan dengan semangat Leaflet untuk menjaga intinya tetap sederhana, saya memutuskan untuk menjadikannya sebuah plugin.

Dengan webpack, solusi tipikal lainnya , setelah Anda mengonfigurasi pemuat Anda:

import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

Ada solusi lain yang diusulkan lebih tinggi di utas ini untuk mesin build dan kombinasi kerangka kerja lainnya.

Untuk mencegah solusi ini terkubur lebih jauh di bawah komentar, saya akan mengunci utas ini.

Terima kasih semua atas solusi bersama! :+1: