Leaflet: يجلب L.Icon.Default عنوان url خاطئًا للصورة

• هل هناك أي صفحة ويب عامة في خادمك يمكننا زيارتها ، حتى نتمكن من إعادة إنتاج المشكلة بأنفسنا؟
• ما هو نظام التشغيل ومتصفح الويب الذي تستخدمه؟

Leaflet.min.js: 5 احصل على https://uismedia.geo-info-manager.com/apis/leaflet_1/images/ 403 (ممنوع)

قد يكون هذا من نفس المشكلة التي تمت مناقشتها في https://github.com/Leaflet/Leaflet/issues/4849

بالفعل. ولهذا السبب أشعر بالفضول لمعرفة الظروف التي يمكن إعادة إنتاجها ، حتى نتمكن من إجراء اختبارات وحدة ضد هؤلاء.

واجهت نفس المشكلة في الانتقال من RC3 إلى 1.0.1 - في الكود الخاص بي كان لدي السطر L.Icon.Default.imagePath = 'images'؛ - لا أتذكر سبب حدوث ذلك تمامًا ، ولكن التعليق عليه حل المشكلة - قد يكون من المفيد التحقق من عدم وجود مشابه

فجأة حصلت على نفس المشكلة في مشروعين مختلفين تمامًا ، باستخدام حزمة الويب والنشرة.
إذا أضفت محددات إلى الخريطة ، فلن يتم العثور على الصور. يلقي المتصفح هذا الخطأ:

حسنًا ، لقد حصلت على شيء.

لذا تبدو العلامة بهذا الشكل حاليًا نظرًا لعدم العثور على الصور (الرمز والظل).

هذه الوظيفة في النشرة:

_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);
},

يتسبب في جعل عناوين url الخاصة بـ data:image تحتوي على السلسلة التالية في نهاية عنوان url:
")marker-icon-2x.png .

يمكن إزالة اسم الملف إذا حذفت + L.Icon.prototype._getIconUrl.call(this, name) . و ") الجزء هو على الأرجح من _detectIconPath السحر رجإكس. لا يمكنني إصلاح ذلك ، لذا حاولت فقط تقطيع الحرفين الأخيرين ، مما أدى إلى هذه الوظيفة:

_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);
},

وها نحن ذا ، الأيقونة تظهر. تتمثل إحدى المشكلات الأخيرة في أن صورة الظل هي رمز علامة أيضًا - مسار src خاطئ بالفعل ، وليس لدي أي فكرة عن السبب (حتى الآن). لذلك تبدو العلامة الآن كما يلي:

IvanSanchez هل يساعدك هذا في تضييق نطاق المشكلة قليلاً؟

سيكون من الجيد أن _detectIconPath وتعرف على ما يحدث هناك ، لا سيما القيمة التي path قبل أن يتم تمريره عبر regex.

تضمين التغريدة

هذا هو _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[\"\']?\)$/, '') : '';
}

المتغير path شيء من هذا القبيل:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQ…n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=") .

ايهم صحيح.

الآن يريد regex استخراج عنوان url data.image من هذا ، ويعيد هذا:

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

لاحظ آخر ") لم تتم إزالته من المتغير path . يستهدف التعبير العادي /^url\([\"\']?/ url(" في بداية المسار ، وليس ") في النهاية.
يعمل استخدام هذا التعبير العادي:

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

يعمل هذا على إصلاح مشكلة الصورة ، جنبًا إلى جنب مع

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

داخل _getIconUrl . لكنه لا يصلح الظل - ما زلت لا أعرف ما الذي يحدث مع الظل.

تواجه نفس المشكلة ،
قيمة المسار في _detectIconPath تشبه "url (" data: image / png؛ base64، i ... 5CYII = ")"
ويبدو أن _getIconUrl و _detectIconPath لم يتم تصميمهما للتعامل مع عناوين URL للبيانات

يبدو أن مشكلة الظل ناتجة عن حقيقة أنه في _getIconUrl تعيين قيمة L.Icon.Default.imagePath بالفعل باستخدام عنوان URL لبيانات العلامة ، لذلك يتم استخدام صورة العلامة وتمددها

هل يمكن أن يكون مرتبطًا بهذا الترميز الثابت لصورة العلامة؟
https://github.com/Leaflet/Leaflet/commit/837d19093307eb5eeb1fca6536962a1ab1573dd5

@ Radu-Filip لقد تمكنت من إصلاحه بهذه التعديلات على العلاقات العامة الخاصة بك - لست متأكدًا من التأثيرات الأخرى التي قد تحدث على الرغم من ذلك:

تكمن المشكلة - كما قلت - في أن عنوان URL الافتراضي هو صورة العلامة ، لجميع الرموز بشكل أساسي.
لذا أولاً ، أضفت عنوان URL الافتراضي للظل إلى 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);
}

ثم قمت بتمرير الاسم من _getIconUrl إلى _detectIconPath واستخدمته لإضافة الفئة إلى العنصر الذي تم استخراج المسار منه:

_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)?[\"\']?\)$/, '') : '';
}

اضطررت أيضًا إلى إزالة if / else حول detectIconPath ، لأنه لم يتم استدعاؤها لأيقونة الظل. الآن يعمل كل شيء لأيقونة العلامة الافتراضية - لست متأكدًا من الرموز المخصصة.

codeofsumit نعم ، فعلت شيئًا مشابهًا هنا https://github.com/Radu-Filip/Leaflet/tree/temp
وسأستخدمه الآن كاختراق. نأمل أن يكون هناك حل أكثر إثباتًا في المستقبل لأولئك الذين يستخدمون webpack et al

@ Radu-Filip هل تمانع في تحديث العلاقات العامة الخاصة بك بهذا الحل؟ قد يتم دمجها.

codeofsumit تم القيام به ، دعنا نرى ما إذا كان يمر

مرحبا،

ربما أفتقد شيئًا ما ، لكن يبدو لي أن مشكلة إنشاء Webpack هذه يمكن معالجتها ببساطة باستخدام مكون إضافي Leaflet ، والذي من شأنه تجاوز سلوك L.Icon.Default .

عرض توضيحي: http://playground-leaflet.rhcloud.com/nexo/1/edit؟html ، css ، الإخراج

باستخدام هذا الأسلوب ، يمكنك التخلص من أي RegExp خادع ، وتكون صور العلامة الافتراضية مضمنة (عن طريق الترميز الثابت) ، وهي إحدى نتائج Webpack المقصودة للصور الصغيرة على أي حال.

الجانب السلبي المحتمل هو أن كل علامة لها رمز base64 الخاص بها ، ولست متأكدًا مما إذا كانت المتصفحات يمكنها تخزين ذلك ... (نفس الجانب السلبي لـ PR # 5041)
يمكننا تخيل التحسين من خلال تعيينه كصورة خلفية بدلاً من وضعها في السمة src للصورة ، كما هو الحال بالنسبة لأيقونة Layers Control على سبيل المثال.
قد يكون هناك مصيدة خفية مع هذه الفكرة (تحرير: يبدو مثل هذا ) ، وإلا فإنني متأكد من أنه كان سيتم تنفيذه منذ فترة طويلة ، لأنه كان سيتجنب اكتشاف مسار الصورة في المقام الأول.

العرض التوضيحي: http://playground-leaflet.rhcloud.com/mey/1/edit؟html ، css ، الإخراج (لا يعتني بشبكية العين)

أكبر ميزة لنهج البرنامج المساعد ، هي أنه يحتفظ بهذا السلوك المحدد لمشاريع Webpack فقط.

أتمنى أن يساعدك هذا.

راجع للشغل ، يبدو لي أن هناك شيئًا خاطئًا جوهريًا هنا.

المنشور يقوم باكتشاف مسار "معقد" للصور ، والتي يجب أن تكون في مكان محدد مسبقًا مقارنة بملف CSS.

لكن حزم الويب webpack تبني حزم عمليات يمكن لـ CSS (أو لا) نقلها أيضًا (وإعادة تسميتها!) ، اعتمادًا على ما يطلبه المطور لحزمة الويب (مثل طلب الصور).
لذلك يفشل اكتشاف المنشورات بالتأكيد عند استخدام حزمة الويب.

تعتبر PR # 5041 بمثابة خدعة لقبول الحالة التي تتضمن حزمة الويب الصور في CSS ، على حساب تكرار صورة Base64 في كل علامة. لا نتحدث حتى عن التكلفة لغير مستخدمي webpack.

كان الهدف من PR # 4979 هو منع ظهور رسالة خطأ إنشاء webpack (بسبب فقدان الملف) ، ولا يبدو أنه يعالج دقة مسار الصورة الفعلية على الإطلاق.
أعتقد أن المطورين حددوا يدويًا L.Icon.Default.imagePath ؟
jasongrout و Eschon ، ربما يمكنك مشاركة كيفية

أنا لا أديرها حقًا. أنا فقط لا أستخدم الرمز الافتراضي ، لذا لم يكن هذا الخطأ يمثل مشكلة بالنسبة لي حتى الآن.

مرحبًا ، مجرد ملاحظة تقول إنه يمكنني إعادة إنتاج خطأ المسار هذا باستخدام الإصدار 1.0.1 من هذه المكتبة.
أنا أستخدمه مع وحدة دروبال للنشرة (7.x-1.x-dev) ، وهنا توجد مشكلة تم الإبلاغ عنها للوحدة: https://www.drupal.org/node/2814039 في حالة وجودها مفيد.

بقدر ما أستطيع أن أرى "المشكلة" في وظيفة _getIconUrl؟ لأنه بعد L.Icon.Default.imagePath هناك شرطة مائلة مفقودة ، لذلك يتم إنشاء مسار الصورة على سبيل المثال في دروبال مثل هذا "/ sites / all / libraries / lealet /

مرحبًا @ anairamzap-mobomo ،

يبدو أن ما تبلغ عنه يمثل مشكلة مختلفة.

لسوء الحظ ، نظرًا لأنه يبدو أنه يتضمن منفذًا إلى إطار عمل (دروبال) ، فسيتعين عليك أولاً التأكد من أن الخطأ ليس مرتبطًا بكيفية عمل هذا المنفذ.

يتضمن Leaflet 1.0.x مع Vanilla JS بشكل صحيح الشرطة المائلة اللاحقة: http://playground-leaflet.rhcloud.com/fosa/1/edit؟html ، الإخراج

انظر على سبيل المثال http://cgit.drupalcode.org/leaflet/tree/leaflet.module#n51 ، حيث تم تجاوز L.Icon.Default.imagePath بواسطة وحدة دروبال.

يبدو أن هذه الوحدة لا تتعامل مع التغيير بين Leaflet 0.7.x و 1.0.x ، حيث يجب تضمين الشرطة المائلة الآن في L.Icon.Default.imagePath .

نظرًا لأن Leaflet 1.0.0 هو إصدار رئيسي ، أعتقد أنه لا يوجد التزام بالتوافق مع الإصدارات السابقة.

heyghybs أرى ...

شكرا لملاحظاتك!

أواجه نفس المشكلة تمامًا كما تم الإبلاغ عنها في الأصل - في مشروع aurulia skeleton / esnext + webpack.

حتى يتم إصلاح ذلك ، قمت بنسخ الصور إلى مجلد المصدر الخاص بي وأنا أستخدم علامة مخصصة - يبدو أن حذف معلومات الحجم / الموضع لا بأس به ...

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

أردت مشاركة ما فعلته لحل مشكلة البيانات غير الصالحة

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;

ربما يمكن تعديله ليشمل أيقونة شبكية العين أيضًا.

يمكن لأي شخص أن يرسل ملف المنشور المعدل؟
الكود الذي يستخدمه @ ajoslin103 :
"" var customDefault = L.icon ({
iconUrl: "images / marker-icon.png" ،
shadowUrl: 'images / marker-shadow.png'،
}) ؛

لم أقم بتعديل ملف Lealet.js ، لقد قمت فقط بنسخ صور العلامة من توزيع النشرة إلى مجلد الصور العادي الخاص بي ، ثم استخدمت هذا الجزء الذي نشرته كرمز مخصص.

لم أتمكن من استخدام حل crob611 لأنه تمت الإشارة إليها في ملف css الأصلي كـ http وكان يتم تقديم موقعي عبر https.

`` function onLocationFound (e) {
var radius = دقة إلكترونية / 2 ؛
var customDefault = L.icon ({
iconUrl: "marker_icon_2x"،
shadowUrl: "marker_shadow.png"
}) ؛
L.marker (e.latlng). addTo (خريطة)
.bindPopup ("أنت داخل" + نصف قطر + "أمتار من هذه النقطة"). openPopup ()؛
L.circle (e.latlng ، radius) .addTo (خريطة) ؛
}

كيف يمكنني ضبط الايقونة الجديدة؟

أقوم بإنشاء الرمز المخصص في المُنشئ الخاص بي (أنا أستخدم إطار عمل Aurelia)

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

ثم أستخدمه عندما أقوم بإضافة العلامة في طريقة () المرفقة

        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);

المرجع: http://leafletjs.com/examples/custom-icons/

إلى أن يكون هناك حل جيد لهذه المشكلة ، هل لي أن أقترح إضافة تحذير وقت التشغيل عندما يواجه _getIconUrl() (أو أيًا كان) بشكل غير متوقع واجهة مستخدم بيانات ، مشيرًا إلى عنوان URL لمشكلة Github عبر console.warn أو شيء من هذا القبيل مثل هذا.

سيؤدي ذلك إلى نقل الأشخاص الذين يعانون من نفس المشكلة إلى المكان المناسب واقتراح حلول بديلة (مثل هذه التي نجحت معي).

هذه هي الطريقة التي تساعد بها React (dev builds) المطورين على تحديد المشكلات.

من مشكلة التفاعل ، حل بديل بواسطة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'),
});

يؤدي هذا إلى إصلاح المشكلة دون تغيير ملفات النشرة الأساسية.

codeofsumit : لمعلوماتك ، مما أفهمه ، يعمل هذا الحل مع الرموز الثلاثة المذكورة فقط.

سيحتاج الحل البديل إلى التعديل في حالة تطلب Leflet (أو سيتطلب في المستقبل) رموزًا أخرى بطريقة مماثلة (ربما للمكونات الأخرى - لا أعرف).

لأولئك الذين ليسوا على دراية بـ Webpack: سيقوم Webpack بتعيين عناوين URL جديدة لهذه الخصائص:

/***/ 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)
    });

(تعتمد التفاصيل بشكل كبير على تكوين Webpack المستخدم)

jampy نعم بالطبع. ومن ثم فهو حل بديل. ومع ذلك ، سيتم حذف أي تعديلات على نشرة النشرة مع كل تحديث بغض النظر. سأستخدم الحل المذكور حتى يكون هناك حل مناسب لأنه يبدو أنه الأقل إيلامًا.

نفس المشكلة هنا ، ترجع الدالة detectIconPath http://localhost:8080/2273e3d8ad9264b7daa5bdbf8e6b47f8.png") للمسار url("http://localhost:8080/2273e3d8ad9264b7daa5bdbf8e6b47f8.png")

إنه بعيد عن أن يكون مثاليًا ، لكنني أستخدم حزمة الويب وأستخدم هذا الحل البديل

لقد قمت بنسخ الصور في مجلد صور في جذر مشروعي

ثم في package.json الخاصة بي أضفت نصًا برمجيًا لما بعد البناء (في قسم البرامج النصية)
" postbuild: prod ": "./Post-Build4Prod.sh"

الذي ينسخ مجلد الصور إلى التوزيع

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

ثم أقوم بتعريف customDefault للرموز

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

واستخدام ذلك أينما كان

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

@ ajoslin103 ، ضع في اعتبارك هذا الحل . إنه أبسط وينتهي بك الأمر بنفس النتيجة.

لقد استخدمت ما يلي لحل هذا في مشروع Vue webpack:

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'),
});

لقد واجهت نفس المشكلة مع Django collectionstatic و CachedStaticFilesStorage التي تضيف تجزئة لمحتوى الملف إلى اسم الملفات الثابتة ، لذا فإن marker-icon.png يصبح marker-icon.2273e3d8ad92.png ثم regexp في نهاية _detectIconPath فشل في التطابق.

لقد غيرته إلى replace(/marker-icon[^"']+\.png[\"\']?\)$/, '') والذي نجح معي.

لدي هذه المشكلة حاليا أيضا.
باستخدام Leaflet 1.0.3 و Angular2.
أعترف ، لا أرى كيفية حلها في ضوء هذا الموضوع.

بالنسبة إلى Angular 2 و 4
أقوم بإنشاء ملف يتطلب d.ts مع الكود:

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;

ثم تستخدم تتطلبلهذه المشكلة:

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

الحل البديل (بالحجم والمرتكز ) لـ

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]
})

لقد أجريت بعض اختبارات الأداء السريعة لتضمين الرمز الافتراضي كـ base64 مقابل استخدام عنوان URL خارجي للصورة. عند تحميل _ الكثير_ من العلامات (1000 ، في حالتي) ، يكون الأداء أسوأ بشكل ملحوظ للصور المضمنة باستخدام base64.

إليك عرض أداء Chrome devtools عند تحميل 1000 رمز علامة كعناوين URL خارجية:

بالمقارنة ، مع 1000 رمز علامة مثل base64 المضمّن (يرجى ملاحظة مقياس مختلف للخط الزمني ، آسف):

كما يمكن رؤيته ، يتأخر تكوين الطبقة لسبب ما عند استخدام الصور المضمنة ، مما يجعل الحمل بأكمله يستغرق ثانية تقريبًا أطول.

للاستخدام غير الرسمي ، قد لا يكون هذا مهمًا ، ولكن إذا كنت تستخدم الكثير من العلامات ، فقد يكون هذا مناسبًا.

مقترح لكيفية التعامل مع هذا المدى الطويل:

• إصلاح # 5041 لمعالجة المشكلات المذكورة في مراجعة الكود ؛ هذا من شأنه أن يجعل الرموز المضمنة تعمل خارج الصندوق
• سجل تحذيرًا إذا تم استخدام رموز مضمنة ، للإشارة إلى أن هذا قد لا يكون مثاليًا

قد يكون الخيار الآخر هو العودة إلى الطريقة القديمة (0.7) لاكتشاف مسار الصورة ، لكننا نعلم أن هناك مشكلات أخرى لم نتمكن من حلها.

مرحبًا perliedman ،

التنميط الجميل!
إنه يجيب على الشكوك التي كانت لدي فيما يتعلق بالجانب السلبي لإعادة استخدام الصور المضمنة.

في الواقع ، يمكن إعادة هيكلة PR # 5041 بحيث يمكن أن تعمل Leaflet على الفور عندما تكون صور الأيقونات مضمنة في CSS (بواسطة محرك بناء مثل حزمة الويب).
الحل الذي يمكنني التفكير فيه (مشابه في الغالب للعلاقات العامة المذكورة) يعني إنشاء فئة واحدة لكل صورة ، وبالتالي سيزيد حجم ملف CSS (وربما JS) ببضع عشرات من البايتات.

مثال: http://playground-leaflet.rhcloud.com/dulox/1/edit؟html ، css ، الإخراج

ولكن كما ذكرت سابقًا ، من المؤسف أن مثل هذا التغيير لسبب التوافق (مع محركات البناء) يؤثر على المستخدمين الذين لا يستخدمون هذه الأطر ويبنون العمليات.

من ناحية أخرى ، قد تكون النتيجة "أكثر نظافة" حيث يمكننا التخلص من أسماء الملفات المشفرة في خيارات فئة IconDefault ، وتفويض المسار الكامل (بما في ذلك اسم الملف) إلى CSS.
هذا مثير للاهتمام للغاية لأنه (إذا فهمت بشكل صحيح) فإن الهدف الكامل من هذا الاكتشاف المعقد هو فصل موقع الصور من ملف JS ، والاعتماد على موقعها النسبي في ملف CSS بدلاً من ذلك. لذلك من المنطقي بالنسبة لي أنه حتى اسم الملف معرّف في CSS.

ولكن بعد ذلك ، قد تكون محاولة الحفاظ على التوافق مع الخيار imagePath أمرًا معقدًا أيضًا ، نظرًا لأنه قد يتطلب إعادة صياغة مسارات الصور التي تم اكتشافها مسبقًا ، لاستبدال المسار الرئيسي والاحتفاظ باسم الملف. لذلك سنقدم RegExp جديدًا هناك.

أخيرًا ، لست متأكدًا من أن هذا سيغطي جميع الحالات.
يمكن تخصيص عمليات البناء بدرجة عالية ، مما يؤدي إلى مواقف مختلفة جدًا فيما يتعلق بالأصول الثابتة مثل صور الرموز. قد لا تزال هناك بعض الحالات الجانبية التي قد يفشل فيها حتى ما سبق.

ghybs أحب هذا المثال (http://playground-leaflet.rhcloud.com/dulox/)!

ربما المبالغة في الأشياء ، ولكن ما رأيك أيضًا في تحديد الرمز _size_ في CSS هذا (باستخدام width و height )؟ يمكنني أن أتخيل أن شخصًا ما تجاوز قواعد CSS هذه لتغيير الرمز الافتراضي ، فقط ليجد أنه يحتوي الآن على أبعاد خاطئة.

مع أو بدون أبعاد CSS ، أعتقد أن هذه طريقة جيدة للمضي قدمًا. هل تهتم بعمل علاقات عامة على غرار المثال الخاص بك؟ إذا لم يكن لديك الوقت أو الطاقة الآن ، يمكنني المضي قدمًا والقيام بذلك ، فقط أخبرني بما تفضله.

أنا حريص على إغلاق هذا ، لأنني صادفت هذه المشكلة بنفسي.

مرحبًا perliedman ،

أوافق على أنه سيكون من الأفضل أن تكون قادرًا على تحديد حجم الرمز أيضًا من خلال CSS.

ولكن في هذه الحالة ، من أجل الاتساق ، يجب أن نكون قادرين أيضًا على تحديد نقطة الارتكاز. لست متأكدًا من أي قاعدة CSS ستكون مناسبة لهذا (ربما الهامش؟). إذا كان ذلك ممكنًا ، فستكون النتيجة رائعة جدًا على ما أعتقد: سيتم تحديد الرموز بالكامل في CSS.

وللمضي قدمًا ، قد يكون ذلك طريقة إضافية لتحديد رمز: حدد 3 فئات CSS (رمز ، شبكية ، ظل) وسيستخرج Leaflet جميع خيارات الرموز منها.

لا تتردد في العمل على هذا ، لست متأكدًا متى سأتمكن من الحصول على بعض الوقت للأسف ...

بناءً على المثال السابق ، إليك مفهوم قراءة قواعد padding و margin CSS لتحديد iconAnchor ( shadowAnchor ) و popupAnchor والخيارات:
http://playground-leaflet.rhcloud.com/xuvi/1/edit؟html ، css ، الإخراج

لا أحب حقيقة أنني استخدمت padding لتحديد iconAnchor ، لأنه في النهاية يستخدم المنشور margin لوضع صورة الرمز ...
ولكن من الأسهل بالنسبة لي تحديد الأشياء بسرعة في CSS ، وتجنب التراجع عن القيم مقارنةً بكيفية تحديد خيارات الرموز.

على الرغم من أنني أحب نتيجة تحديد كل شيء في CSS ، لا يزال هناك المزيد من العمل المطلوب للحفاظ على التوافق مع الإصدارات السابقة مع L.Icon.Default.imagePath .

أعتذر ليس لدي الوقت لإنشاء العلاقات العامة.

لقد قمت للتو بتشخيص حالة أخرى حيث فشل _detectIconPath : عند استخدام Firefox (تم اختباره مع ESR والإصدارات الحالية) وتعيين التفضيلات → المحتوى → الألوان ... → تجاوز الألوان المحددة بواسطة الصفحة مع التحديدات أعلاه: سيزيل Firefox background-image بما في ذلك الخاصية الموجودة في .leaflet-default-icon-path وبالتالي كسر _detectIconPath .

لست متأكدًا من عدد الأشخاص الآخرين الذين يستخدمون ميزة Firefox هذه ، لكنني كنت أستخدمها لفترة طويلة جدًا.

هل يمكن استخدام url() كقيمة لخصائص CSS أخرى أيضًا؟ مثل استخدام CSS التالي: .leaflet-default-icon-path { -leaflet-icon: url(images/marker-icon.png); } أم أنه من المستحيل تحديد واستخدام خصائص CSS المخصصة بنفسه؟ لن يحتاج أي متصفح إلى _فهم_ الخاصية -leaflet-icon ، ومع ذلك سيظل بحاجة إلى ملئها وإتاحة قيمتها للنصوص البرمجية.

مرحبًا roques ،

شكرًا لك على الإبلاغ عن هذه المشكلة عند استخدام هذا الخيار المحدد في Firefox!
يبدو أن Chrome يحتوي على امتداد High Contrast ولكنه يغير الألوان فقط ، دون كسر أي شيء في Leaflet.

للأسف يقوم Firefox بإزالة خصائص CSS التي لا يفهمها.
ومع ذلك ، يمكن استخدام نوع بيانات CSS للصورة مع بعض القواعد الأخرى ، بما في ذلك cursor ، والذي يبدو أنه يعمل بشكل جيد حتى عند استخدام إعداد تجاوز الألوان في Firefox:
http://playground-leaflet.rhcloud.com/yov/1/edit؟html ، css ، الإخراج

أجد أنه من غير الأنيق استخدام cursor بدلاً من background-image ، نظرًا لأن استخدامه أبعد كثيرًا عما سنفعله لإنشاء علامة من خلال تصميم CSS ... ولكن على أي حال ، يعد هذا بالفعل اختراقًا للمسار الكشف فقط.

كنت على وشك إجراء علاقات عامة لمعالجة مشكلة حزمة الويب ، وسأقوم بتضمين هذا الحل الآن.
ليس لدي أدنى فكرة عن كيفية إجراء اختبار آلي لهذه الحالة ، لكنني أعتقد أن الحل يجب أن يكون جيدًا بالفعل.

هل وجد أحد حلاً واضحًا لهذه المشكلة؟

بناءً على إجابة @ Shiva127 ، لأي شخص يستخدم Angular + Angular CLI:

يمكنك وضع هذا في 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;

وأضف خط الكرة الأرضية في .angular-cli.json :

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

سيؤدي هذا إلى نسخ الرموز إلى مجلد الأصول في مجلد التوزيع في وقت الإنشاء (لن تراها في src / الأصول). أيضًا ، يعد وضع العمل في app.module.ts مكانًا جيدًا للاحتفاظ باستيراد تعديل النموذج الأولي العالمي (مثل تصحيحات RxJS التي يمكن ملاحظتها). مع ذلك ، فإن استيراد Marker else حيث يعمل بشكل صحيح في مصدر البرنامج.

لقد أصلحت هذه المشكلة مثل هذا.

لقد قدمت رمزًا افتراضيًا لعلامة drawOptions:

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

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

...

ثم حفظ المسار إلى أيقونة على L.Draw.Event.CreatATED

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/";
       }
 });

أخيرًا عند عرض الطبقات ، قمت بتعيين مسار الصورة:

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

codeofsumit هل تم تضمين هذه الإصلاحات في أحدث إصدار 1.3.1؟ من المثير للدهشة أنني أستخدم الإصدار 1.3.1 وما زلت أواجه نفس المشكلة.

vishalrajole على حد علمي ، العلاقات العامة الوحيدة المقدمة لمعالجة هذا الأمر هي # 5041 ، والتي تم فتحها مع التغييرات المطلوبة لفترة طويلة.

لدينا أيضًا الحل البديل رقم 5771 ، وهو حل رائع ولكنه يتضمن المزيد من التغييرات.

لذا ، للتلخيص: لم يقم أحد بتقديم علاقات عامة مقبولة لمعالجة هذا الأمر ، فالمساعدة مرحب بها!

perliedman من مظهره ، التغيير المتضمن # 5771 ضروري. وإلا فستظل تواجه هذه المشكلة في ظروف مختلفة. لماذا لا تدمج ذلك فقط؟

مرحبًا @ mb21 ،

من الضروري تغيير المشاركة في # 5771

في الواقع ، التغييرات المقترحة من نوعين:

• قراءة كل مسار صورة بدلاً من موقع مجلد الصور فقط ، بحيث تتم قراءة عناوين url التي تم تعديلها بواسطة محركات الإنشاء (مثل أداة تحميل ملفات webpack) كما هي بدلاً من إعادة بنائها / تخمينها.
• قراءة جميع خيارات الرموز الافتراضية الأخرى من CSS ، بحيث يتم جمع كل التكوين في مكان واحد.

النقطة الثانية مثيرة للاهتمام إذا كان لا يمكن تجنب النقطة الأولى ، حتى لو كانت تضيف بعض التعليمات البرمجية.

الأول هو في الواقع معروف للمطورين الذين يستخدمون محرك بناء يتلاعب بعناوين url في CSS. إنها تحافظ على Leaflet _zero config Spirit_ حتى في بيئة جديدة حيث يقضي المطور بعض الوقت في ضبط التكوين الخاص به (إذا كنت تستخدم أداة تحميل ملفات webpack ، فأنت بحاجة إلى تهيئة مخصصة على أي حال) ، على حساب إضافة بعض التعليمات البرمجية تمامًا لأي شخص آخر ، والتي هو IMHO _against_ Leaflet Spirit (دعم الاستخدام الشائع في core ، قم بتفويض حالات الاستخدام الأخرى إلى المكونات الإضافية).
يمكنك حل المشكلة بسهولة في المقام الأول عن طريق تحديد مسارات الصور ، عادةً باستخدام require(image) كما هو موضح في العديد من التعليقات أعلاه.

لذلك ، على الرغم من أنني قمت بتأليف تلك العلاقات العامة ، إلا أنني شخصياً أشعر بعدم الارتياح لدمجها في جوهرها. التغييرات _ ليست ضرورية للأغلبية_.

من المؤكد أنها لطيفة لجعل حياة المطورين أسهل ، ولكن سبب المشكلة في المقام الأول هو تفاعل محركات البناء / أغلفة الإطارات ، ولكل منها خصائصه الخاصة ، ولكل منها طريقة سهلة لإخبار Leaflet بمكان الصور الآن ، باستخدام الموجود بالفعل API.

ربما ينبغي علينا بدلاً من ذلك معالجة هذه المشكلة من خلال توثيق أفضل (على سبيل المثال ، قسم مخصص للاستخدام مع محركات / إطارات عمل؟) ، و / أو مكون إضافي؟

حسنًا ، لست متأكدًا من فهمي للتعقيدات. ولكن سيكون من الجيد بالتأكيد لجميع أنواع المطورين تحديد _all_ مسارات الصور في CSS. لا يقتصر الأمر على مستخدمي حزمة الويب فحسب ، بل إن الأشخاص مثلي يستخدمون خط أنابيب الأصول Rails أو Django الذي يضيف تجزئة لكل أصل ثابت ...

لقد واجهت نفس المشكلة بالضبط:
data: image / png؛ base64، iVBORw0 ... AAAAASUVORK5CYII = ") marker-shadow.png net :: ERR_INVALID_URL

الحل هو استبدال:

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);
    },

مع:

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

  return url.slice(0, -2);

على النحو الذي اقترحه كودوفسوميت.

لقد وجدت أنه أمر مزعج حقًا وأن حقيقة أن هناك علاقات عامة لإصلاحها ولكن لم يتم دمجها بسبب "الشعور" بأن "التغييرات ليست ضرورية للأغلبية". عذرًا ، لكني رأيت أشخاصًا يعانون منها في PHP و RoR و Python (Django) و node.js ، فأين تعتقد أن "الأغلبية" خارج هذه المجموعات؟ ما هو الإطار المتوافق الذي توصي به؟

أتفق مع macwis

وجود نفس المشكلة وهذا الموضوع طويل جدا. لماذا لا تدمج العلاقات العامة؟

هذا ليس شعورًا ، إنه حقيقة: الغالبية لا تستخدم إطار عمل ، أو أولئك الذين لا يتلاعبون بـ CSS.
آخر مرة راجعت فيها ، لم يتم تنزيل Leaflet 1 من unpkg CDN ، أي CSS غير مجمعة وغير معبأة.

الحل المناسب هو تحديد خيارات الرمز الافتراضية ، كما هو موضح في العديد من الرسائل أعلاه.
العديد من الأطر تفعل ذلك كجزء من المكون الإضافي لتكامل Leaflet.

إذا كنت تريد حلاً أكثر تلقائية ، فلا يزال لديك خيار نشر مكون إضافي.

لماذا لا تدمج العلاقات العامة؟

اقرأ التعليقات ، على سبيل المثال https://github.com/Leaflet/Leaflet/issues/4968#issuecomment -382639119

أود فقط إلقاء تلميح بسيط: يمكنك استخدام CDN أيضًا عند استخدام إطار عمل. هذا ما نفعله على سبيل المثال مع تطبيق React الخاص بنا. نقوم بتحميل libs كبيرة عبر CDN.

@ googol7 شكرا لك على

الرجاء تصحيح ما إذا كنت مخطئًا: إذا قمت بتحميل المنشور عبر CDN ، فمن المحتمل جدًا أنك لا تغير CSS الخاص بها. ومن ثم فإن المستخدمين لديك هم الأغلبية.

ghybs : ما كان علي فعله هو ما يلي:

// 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 */

يبدو تكوين حزمة الويب لدينا كما يلي:

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

@ googol7 شكرًا لك على تفاصيل ملف التكوين.

يعني ذلك أنك تقوم بتحميل Leaflet JS من شبكة CDN ، لكن عليك تجميع CSS والصور في تطبيقك.

ghybs نعم أعتقد أن هذا ما يحدث هنا.

تأكد من اتباع الخطوتين الأوليين: https://leafletjs.com/examples/quick-start/
واجهت مشكلة مماثلة لأنني كنت أستخدم css لبرنامج تعليمي لشخص آخر ، ولكن يجب استخدام هذا

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

ثم نص الكتيب بعد ذلك مباشرة

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

أهلا بكم،

لقد قمت بنشر Leaflet plugin " النشرة الافتراضية توافق الأيقونة " التي تأخذ رمزًا من العلاقات العامة الخاصة بي https://github.com/Leaflet/Leaflet/pull/5771.
باستخدام هذا المكون الإضافي ، لم يعد Leaflet Default Icon يحاول إعادة بناء مسارات صورة الرمز ، ولكنه يعتمد بشكل كامل على CSS. بهذه الطريقة ، يصبح متوافقًا تمامًا مع محركات وأطر الإنشاء التي تدير الأصول تلقائيًا بناءً على CSS (وعادةً ما تعيد كتابة url() 's).

ما عليك سوى تحميل الملحق (CSS + JS) _after_ Leaflet.
على سبيل المثال في حزمة الويب:

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

( تجريبي )

بينما يمكنني أن أفهم أن العديد من المطورين كانوا يفضلون دمج هذه الميزة مباشرة في Leaflet core ، فقد قيل إن الكود المضاف غير مفيد لغالبية المستخدمين النهائيين. لذلك ، بالتوافق مع روح Leaflet للحفاظ على جوهرها بسيطًا ، قررت أن أجعلها مكونًا إضافيًا.

لا تتردد في فتح مشكلة في إعادة شراء المكون الإضافي إذا كانت لديك مشاكل أو مخاوف بشأن كيفية عمله.

الحقيقة هي أنه إذا كنت تستخدم حزمة الويب ، فستواجه هذه المشكلة. أرى اتجاه المزيد والمزيد من المواقع التي تستخدم حزمة الويب. يعد وضع هذا كمكوِّن إضافي أقل من مثالي ، IMHO ، لأنني لا أرى أشخاصًا يبحثون عن مكون إضافي لإصلاح هذا النوع من المشكلات (مثلما فعلت عندما فتحت نسخة مزدوجة).
أرغب بشدة في رؤية هذا المنشور الداخلي لأن هذا يمثل إصلاحًا للأخطاء أكثر من كونه ميزة ...

إذا كنت ترغب في حل هذه المشكلة في Angular 6 ، فاكتب فقط angular.json :

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

بعد ذلك ، تجاوز السلوك الافتراضي Marker ، كما تقترح بعض الإجابات السابقة:

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;
  }
}

الحزمة Angular التي استخدمتها ولديها نفس المشكلة كما هي: ngx-leaflet

ملاحظة:
هناك صيد صغير في Angular 6 ، كما تقول الإجابة من _t.animal_ على StackOverflow

كن على علم أن في الزاوي 6 هناك نوعان من بناة build و test .

تأكد من وضعه تحت build .

@ marko-jovanovic شكرًا على المعلومات ، ولكن ماذا لو لم أستخدم هذه الأصول وأرغب في تقليل حجم الحزمة الخاصة بي؟
اقتراحك لا يزال يندرج تحت تعريفي للحل ، IMO.

HarelM حسنًا ، لم أتمكن من تقديم أي حل آخر لأنني كنت في عجلة من

@ marko-jovanovic حلك رائع وآمل أيضًا أن يساعد الآخرين. أنا فقط آمل في إيجاد حل ، وليس حلاً :-)

@ marko-jovanovic مرحبًا ، أنا أيضًا جالس في مشروع مدرسي (Angular 6) ولا أستطيع معرفة سبب عدم نجاح الأشياء بالنسبة لي. لأكون صادقًا ، أنا مستجد تمامًا لكل هذه الأشياء هنا.

عندما أقوم بإدخال الكود الخاص بك في وظيفة ngOnInit -المكوِّن الخاص بي ، فإنه يظهر خطأ في الجزء حيث قمت بتعيين iconUrl و 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'.

هل فاتني شيء؟ شكرا لك مقدما!

gittiker لقد قمت بتحديث إجابة باستخدام مثال الواردات والمكون ngOnInit. اسمحوا لي أن أعرف إذا كان كل شيء على ما يرام. :)

gittiker لقد قمت بتحديث إجابة باستخدام مثال الواردات والمكون ngOnInit. اسمحوا لي أن أعرف إذا كان كل شيء على ما يرام. :)

نعم شكرا جزيلا لك انها تعمل في النهاية. اضطررت إلى التلاعب بعنوان URL الخاص بك قليلاً حتى يكون كذلك
'assets/leaflet/images/marker-icon.png بدلاً من 'assets/leaflet/marker-icon.png', . الشيء نفسه ينطبق على صورة الظل.

@ crob611 شكرا جزيلا لك ، حاولت حل المشكلة بهذه الطريقة.

@ ماركو جوفانوفيتش لقد أنقذتني! لكن كيف تقول HarelM ، أليس هناك حل؟

شكراً جزيلاً لكم ، لكن بالنسبة لي خدمت الكود التالي: (الزاوية 6 والنشرة 1.3.4)
الخطوة الأولى
(https://codehandbook.org/use-leaflet-in-angular/)
ولكن بعد ذلك لم تظهر الأيقونة
خطأ في الحصول على صورة الرمز
صافي :: ERR_INVALID_URL
حلها عن طريق إدخال الكود التالي في المكون
حذف 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',
});`

الحل باستخدام النشرة 1.3.4 مع نشرة vue2 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')
})

سنتان: مشكلتي مع webpack كانت بسبب أسماء الملفات المجزأة ، لذلك قمت بتكوين file-loader أجل عدم تجزئة صور المنشورات:

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 فظ ولكن فعال.

ghybs شكرا على الإصلاح. لقد واجهت هذا الخطأ عدة مرات في مشاريع مختلفة. يبدو هذا الخيط بأكمله سخيفًا لأنه لم يتم إصلاحه أو لا يُنظر إليه على أنه مشكلة.

أحضرتني Google إلى هنا لأن استخدام المكتبة مع Webpack كان يعطيني هذا الخطأ.

هل يعرف أي شخص لماذا لم يتم تضمين هذه الصور كـ svg؟

أعتقد أن هذا يمكن حله بسهولة باستخدام postcss و postcss-inline-svg . ستصبح الرموز ملفات مضمنة svg بدلاً من png خارجي. ستكون الرموز أكثر هشاشة مع اختفاء هذه المشكلة.

هل يعرف أي شخص لماذا لم يتم تضمين هذه الصور كـ svg؟

دعم المستعرض القديم.

شكراً IvanSanchez

ثم أرى حلين محتملين. الأول هو تضمين الصور على أنها base64 المشفرة .png . البديل الآخر هو تضمين رموز .svg وإنشاء مطورين يستهدفون الأنظمة الأساسية القديمة لتجاوز الرموز الافتراضية.

هل أي من هذه الحلول يستحق طلب سحب؟

من بين جميع المتصفحات التي يدعمها المنشور ، ما يلي لا يدعم svg ( caniuse ).

• IE 7 و 8
• متصفح Android 2. *

مضمنة الصور كـ base64

راجع https://github.com/Leaflet/Leaflet/issues/4968#issuecomment -322422045

اضطررت إلى إضافة مرساة وحجم أيضًا لجعلها تعمل ، على سبيل المثال

   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; 

لدي أيضًا نفس المشكلة (webpack باستخدام Flask ، لذلك من المفترض أن تكون جميع العناصر في مجلد ثابت) ، لكن @ giorgi-m fix ليس كافيًا ، لأنني أحصل على خطأ "تصدير" هو للقراءة فقط ( Firefox ، يبدو أنه مرتبط بواردات png؟).
أرى أن المشكلة قد تم إغلاقها ، لكننا ما زلنا نرى مشكلات في 1.4.0 ، لذا أتساءل ما هو الإصلاح؟

رؤية هذه المشكلة مع vue2-Leaflet 2.0.2 والنشرة 1.4.0.

يبدو أن هذا موجود منذ فترة طويلة ، ويبدو أن نصف الحلول المقدمة لا تعمل.

هل اكتشف أحد جذر هذه المشكلة؟

أواجه نفس المشكلة مع الإصدارات "vue2-Leaflet": "2.0.3" منشور "Leaflet": "1.4.0".

أيضا تشغيل حزمة الويب.

لقد نجحنا في استخدام vue2-Leaflet 2.0.3 والنشرة 1.4.0 باستخدام الحل الموجود في نفس المشكلة:

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')
})

أعتقد أن السؤال الأفضل الذي يجب طرحه هو لماذا لم يتم إصلاح ذلك بالرمز المدمج الذي تسبب في إغلاق المشكلة؟ نظرًا لأن الحل الذي يعمل رائعًا ، لكن هذا يجب أن يعمل خارج الصندوق ولا يزال بحاجة إلى أن يكون مشكلة مفتوحة.

أعزائي،

الكتيب يعمل خارج الصندوق.

لا يعمل Webpack (ومحركات الإنشاء الأخرى) مع Leaflet خارج الصندوق.

يرجى الرجوع إلى الحل المقترح في https://github.com/Leaflet/Leaflet/issues/4968#issuecomment -399857656: المنشور -التوافق الافتراضي

بينما يمكنني أن أفهم أن العديد من المطورين كانوا يفضلون دمج هذه الميزة مباشرة في Leaflet core ، فقد قيل إن الكود المضاف غير مفيد لغالبية المستخدمين النهائيين. لذلك ، بالتوافق مع روح Leaflet للحفاظ على جوهرها بسيطًا ، قررت أن أجعلها مكونًا إضافيًا.

مع حزمة الويب ، حل نموذجي آخر ، بمجرد تكوين اللوادر الخاصة بك:

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'),
});

هناك حلول أخرى مقترحة أعلى في هذا الموضوع لمحركات البناء الأخرى ومجموعات إطار العمل.

لمنع المزيد من دفن هذه الحلول تحت التعليقات ، سأقوم بإغلاق هذا الموضوع.

شكرا لكم جميعا على الحلول المشتركة! : +1: