Leaflet: L.Icon.Default गलत छवि url लाता है

• क्या आपके सर्वर में कोई सार्वजनिक वेबपेज है जिस पर हम जा सकते हैं, ताकि हम समस्या को स्वयं पुन: उत्पन्न कर सकें?
• आप किस OS और वेब ब्राउज़र का उपयोग कर रहे हैं?

लीफलेट.मिन.जेएस: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);
},

और यहां हम जाते हैं, आइकन दिखाई देता है। एक आखिरी मुद्दा यह है कि छाया छवि एक मार्कर आइकन भी है - स्रोत पथ पहले से ही गलत है, मुझे नहीं पता कि क्यों (अभी तक)। तो एक मार्कर अब इस तरह दिखता है:

@IvanSanchez क्या इससे आपको इस मुद्दे को थोड़ा कम करने में मदद

@codeofsumit _detectIconPath माध्यम से कदम उठाना अच्छा होगा और देखें कि वहां क्या हो रहा है, विशेष रूप से path चर के रेगेक्स के माध्यम से पारित होने से पहले क्या मूल्य है।

@IvanSanchez @perliedman मुझे लगता है कि मुझे बग मिला।

यह _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=") ।

क्या सही है।

अब रेगेक्स इससे data.image url निकालना चाहता है, और यह इसे लौटाता है:

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 पहले से ही मार्कर डेटा यूआरएल के साथ सेट कर दिया जाता है, तो मार्कर के लिए चित्र प्रयोग किया जाता है और बढ़ाया

क्या यह मार्कर छवि को हार्डकोडिंग करने से संबंधित हो सकता है?
https://github.com/Leaflet/Leaflet/commit/837d19093307eb5eeb1fca6536962a1ab1573dd5

@ राडू-फिलिप मैं इसे आपके पीआर में इन संशोधनों के साथ ठीक करने में सक्षम था - मुझे यकीन नहीं है कि इसके अन्य प्रभाव क्या हो सकते हैं:

समस्या यह है - जैसा कि आपने कहा - कि डिफ़ॉल्ट यूआरएल मार्कर छवि है, मूल रूप से सभी आइकन के लिए।
तो सबसे पहले मैंने सीएसएस में छाया के लिए डिफ़ॉल्ट यूआरएल जोड़ा:

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

मुझे detectIconPath आसपास if/else को भी हटाना पड़ा, क्योंकि इसे छाया आइकन के लिए नहीं बुलाया गया था। अब सब कुछ डिफ़ॉल्ट मार्कर आइकन के लिए काम करता है - कस्टम वाले के बारे में निश्चित नहीं है।

@codeofsumit हाँ, मैंने यहाँ कुछ ऐसा ही किया है https://github.com/Radu-Filip/Leaflet/tree/temp
और मैं अभी के लिए हैक के रूप में उपयोग करूंगा। उम्मीद है कि वेबपैक वगैरह का उपयोग करने वालों के लिए भविष्य में एक और सबूत समाधान होगा

@ राडू-फिलिप क्या आप उस समाधान के साथ अपने पीआर को अपडेट करना चाहते हैं? यह विलय हो सकता है।

@codeofsumit हो गया, देखते हैं कि क्या यह पूरा होता है

नमस्ते,

शायद मुझे कुछ याद आ रहा है, लेकिन मुझे ऐसा लगता है कि वेबपैक बिल्डिंग के इस मुद्दे को केवल एक कैटलॉग प्लगइन के साथ संबोधित किया जा सकता है, जो L.Icon.Default व्यवहार को ओवरराइड करेगा।

डेमो: http://playground-leaflet.rhcloud.com/nexo/1/edit?html ,css,output

इस दृष्टिकोण के साथ, आप किसी भी मुश्किल RegExp से छुटकारा पाते हैं, और डिफ़ॉल्ट मार्कर छवियों को इनलाइन (हार्ड कोडिंग द्वारा) किया जाता है, जो कि वैसे भी छोटी छवियों के लिए वेबपैक इच्छित परिणाम में से एक है।

एक संभावित नकारात्मक पक्ष यह है कि प्रत्येक मार्कर का अपना बेस 64 आइकन होता है, यह सुनिश्चित नहीं है कि ब्राउज़र इसे कैश कर सकते हैं ... (पीआर # 5041 के लिए वही नकारात्मक पक्ष)
उदाहरण के लिए परत नियंत्रण आइकन के लिए किया गया जैसा कि छवि src विशेषता में रखने के बजाय इसे पृष्ठभूमि छवि के रूप में सेट करके हम परिशोधन की कल्पना कर सकते हैं।
इस विचार के साथ एक छिपा हुआ जाल हो सकता है (संपादित करें: ऐसा लगता है कि एक ), अन्यथा मुझे यकीन है कि इसे बहुत पहले लागू किया गया होगा, क्योंकि यह पहली जगह में छवि पथ का पता लगाने से बचता।

डेमो: http://playground-leaflet.rhcloud.com/mey/1/edit?html ,css,output (रेटिना की देखभाल नहीं करना)

प्लगइन दृष्टिकोण का सबसे बड़ा लाभ यह है कि यह इस विशिष्ट व्यवहार को केवल वेबपैक परियोजनाओं के लिए रखता है।

उम्मीद है की यह मदद करेगा।

बीटीडब्ल्यू, ऐसा लगता है कि यहां कुछ आंतरिक रूप से गलत है।

पत्रक छवियों के लिए एक "जटिल" पथ का पता लगाता है, जो सीएसएस फ़ाइल की तुलना में पूर्व-निर्धारित स्थान पर होना चाहिए।

लेकिन वेबपैक बिल्ड प्रक्रिया बंडल करता है कि सीएसएस और (या नहीं) छवियों को भी स्थानांतरित कर सकता है (और उनका नाम बदल सकता है!), यह इस बात पर निर्भर करता है कि डेवलपर वेबपैक के लिए क्या अनुरोध करता है (जैसे छवियों की आवश्यकता)।
इसलिए जब वेबपैक का उपयोग किया जाता है तो पत्रक का पता लगाना निश्चित रूप से विफल हो जाता है।

पीआर #5041 उस मामले को स्वीकार करने के लिए एक चाल की तरह है जहां वेबपैक सीएसएस में छवियों को इनलाइन करता है, प्रत्येक मार्कर में बेस 64 छवि को डुप्लिकेट करने की कीमत पर। गैर-वेबपैक उपयोगकर्ताओं के लिए लागत के बारे में भी बात नहीं कर रहा है।

पीआर #4979 केवल वेबपैक बिल्ड त्रुटि संदेश को रोकने के लिए था (फ़ाइल गुम होने के कारण), यह सभी वास्तविक छवि पथ संकल्प को संभालने के लिए नहीं दिखता है।
मुझे लगता है कि डेवलपर्स तब मैन्युअल रूप से L.Icon.Default.imagePath निर्दिष्ट करते हैं?
@jasongrout और @Eschon , शायद आप साझा कर सकते हैं कि आपने इसे कैसे प्रबंधित किया?

मैं वास्तव में इसे प्रबंधित नहीं करता। मैं अभी डिफ़ॉल्ट आइकन का उपयोग नहीं करता, इसलिए यह बग अब तक मेरे लिए कोई समस्या नहीं थी।

नमस्ते, यह कहने के लिए सिर्फ एक नोट है कि मैं इस पुस्तकालय के 1.0.1 संस्करण का उपयोग करके इस पथ त्रुटि को पुन: उत्पन्न कर सकता हूं।
मैं इसे पत्रक Drupal मॉड्यूल (7.x-1.x-dev) के साथ उपयोग कर रहा हूं, और यहां मॉड्यूल को रिपोर्ट की गई एक समस्या है: https://www.drupal.org/node/2814039 मामले में उपयोगी।

जहाँ तक मैं देख सकता हूँ "समस्या" _getIconUrl फ़ंक्शन पर है? जैसा कि L.Icon.Default.imagePath बाद एक लापता स्लैश है, इसलिए उदाहरण के लिए ड्रूपल में छवि पथ इस तरह उत्पन्न होता है " /sites/all/libraries/leaflet/imagesmarker-icon.png "। छवि पथ और मार्कर छवि फ़ाइल नाम (marker-icon.png) के बीच एक स्लैश / होना चाहिए।

हाय @ anairamzap-mobomo,

ऐसा लगता है कि आप जो रिपोर्ट करते हैं वह एक अलग मुद्दा है।

दुर्भाग्य से, ऐसा लगता है कि एक ढांचे (ड्रूपल) के लिए एक बंदरगाह शामिल है, आपको पहले यह सुनिश्चित करना होगा कि बग उस बंदरगाह से संबंधित नहीं है कि बंदरगाह कैसे काम कर रहा है।

वेनिला जेएस के साथ पत्रक 1.0.x में अनुगामी स्लैश सही ढंग से शामिल है: http://playground-leaflet.rhcloud.com/fosa/1/edit?html ,output

उदाहरण के लिए देखें http://cgit.drupalcode.org/leaflet/tree/leaflet.module#n51 , जहां L.Icon.Default.imagePath Drupal मॉड्यूल द्वारा ओवरराइड किया गया है।

ऐसा लगता है कि मॉड्यूल कैटलॉग 0.7.x और 1.0.x के बीच परिवर्तन को संभाल नहीं पाता है, जहां स्लैश को अब L.Icon.Default.imagePath में शामिल किया जाना चाहिए।

चूंकि पत्रक 1.0.0 एक प्रमुख रिलीज है, मुझे लगता है कि पिछड़ी संगतता के लिए कोई प्रतिबद्धता नहीं है।

अरे @ghybs मैं देख रहा हूँ... मैं यह बताने के लिए Drupal मॉड्यूल अनुरक्षकों से संपर्क करूँगा। जैसा कि आपने कहा, ऐसा लगता है कि उन्हें पुस्तकालय के 1.0.x संस्करण के साथ अच्छी तरह फिट होने के लिए मॉड्यूल को संशोधित करना होगा, या इसके बारे में चेतावनी वाले दस्तावेज़ों में कम से कम कुछ पंक्तियां जोड़ना होगा।

आपकी प्रतिक्रिया के लिए धन्यवाद!

मेरे पास ठीक वही समस्या है जो मूल रूप से रिपोर्ट की गई थी - एक ऑरुलिया कंकाल/एसनेक्स्ट + वेबपैक प्रोजेक्ट में।

जब तक यह तय नहीं हो जाता है, मैंने छवियों को अपने स्रोत फ़ोल्डर में कॉपी कर लिया है और एक कस्टम मार्कर का उपयोग कर रहा हूं - आकार/प्लेसमेंट जानकारी को छोड़ना ठीक लगता है ...

        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',
शैडोयूआरएल: 'इमेज/मार्कर-शैडो.पीएनजी',
});

मैंने लीफलेट.जेएस फाइल को संशोधित नहीं किया, मैंने सिर्फ मार्कर इमेज को लीफलेट वितरण से अपने सामान्य इमेज फोल्डर में कॉपी किया, और फिर उस टुकड़े का इस्तेमाल किया जिसे मैंने कस्टम आइकन के रूप में पोस्ट किया था।

मैं crob611 के समाधान का उपयोग करने में असमर्थ था क्योंकि उन्हें मूल css में http के रूप में संदर्भित किया गया था और मेरी साइट को https के माध्यम से परोसा जा रहा था।

लोकेशनफाउंड (ई) पर ``` फंक्शन {
वर त्रिज्या = e.सटीकता / 2;
वर कस्टमडिफॉल्ट = एल.आइकन ({
iconUrl: 'marker_icon_2x',
शैडोयूआरएल: 'marker_shadow.png'
});
L.marker(e.latlng).addTo(map)
.bindPopup ("आप इस बिंदु से" + त्रिज्या + "मीटर के भीतर हैं")। openPopup ();
L.circle(e.latlng, त्रिज्या)। AddTo (मानचित्र);
}

मैं नया आइकन कैसे सेट कर सकता हूं?

मैं अपने कंस्ट्रक्टर में कस्टम आइकन बनाता हूं (मैं ऑरेलिया फ्रेमवर्क का उपयोग कर रहा हूं)

        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() (या जो भी) अप्रत्याशित रूप से एक डेटा UI का सामना करता हूं, console.warn या कुछ के माध्यम से Github समस्या URL की ओर इशारा करते हुए एक रनटाइम चेतावनी जोड़ने का सुझाव दे सकता हूं। उसके जैसा।

यह एक ही समस्या वाले लोगों को सही जगह पर लाएगा और कामकाज का सुझाव देगा (जैसे यह मेरे लिए काम करता है)।

इस तरह रिएक्ट (देव बनाता है) डेवलपर्स को समस्याओं की पहचान करने में मदद करता है।

प्रतिक्रिया के मुद्दे से, @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 : FYI करें, जो मैं समझता हूं, यह वर्कअराउंड केवल तीन उल्लिखित आइकन के लिए काम करता है।

यदि लेफलेट करता है (या भविष्य में होगा) को इसी तरह से अन्य आइकन की आवश्यकता होती है (शायद अन्य घटकों के लिए - मुझे नहीं पता) तो वर्कअराउंड को समायोजित करने की आवश्यकता होगी।

वेबपैक से अपरिचित लोगों के लिए: वेबपैक इन गुणों के लिए नए 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)
    });

(विवरण उपयोग किए गए वेबपैक कॉन्फ़िगरेशन पर बहुत अधिक निर्भर करता है)

@jampy हाँ बिल्कुल। इसलिए यह एक उपाय है। लीफलेट कोर में कोई भी संशोधन हालांकि हर अपडेट के साथ हटा दिया जाएगा। मैं उल्लिखित समाधान का उपयोग तब तक करूंगा जब तक कि कोई उचित समाधान न हो क्योंकि यह कम से कम दर्दनाक लगता है।

यहां वही समस्या है, detectIconPath फ़ंक्शन http://localhost:8080/2273e3d8ad9264b7daa5bdbf8e6b47f8.png") पथ url("http://localhost:8080/2273e3d8ad9264b7daa5bdbf8e6b47f8.png")

यह आदर्श से बहुत दूर है, लेकिन मैं वेबपैक का उपयोग करता हूं और मैं इस समाधान का उपयोग करता हूं

मैंने छवियों को अपने प्रोजेक्ट के रूट पर एक छवि फ़ोल्डर में कॉपी किया है

फिर मेरे package.json में मैंने एक पोस्टबिल्ड एनपीएम स्क्रिप्ट जोड़ा (स्क्रिप्ट अनुभाग में)
" पोस्टबिल्ड:प्रोड ": "./Post-Build4Prod.sh"

जो एक इमेज फोल्डर को डिस्ट में कॉपी करता है

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

तो मैं आइकन के लिए एक कस्टम डिफॉल्ट परिभाषित करता हूं

    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 वेबपैक प्रोजेक्ट में इसे हल करने के लिए निम्नलिखित का उपयोग किया:

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 के कलेक्टिक और CachedStaticFilesStorage के साथ एक ही समस्या है जो स्थिर फ़ाइलों के नाम पर फ़ाइल सामग्री का हैश जोड़ता है, इसलिए मार्कर-आइकन.पीएनजी मार्कर-आइकन बन जाता है। 2273e3d8ad92.png और फिर _detectIconPath के अंत में regexp मिलान करने में विफल रहता है।

मैंने इसे replace(/marker-icon[^"']+\.png[\"\']?\)$/, '') बदल दिया जो मेरे लिए काम करता था।

मुझे वर्तमान में भी यही समस्या है।
पत्रक 1.0.3, और Angular2 का उपयोग करना।
मैं कबूल करता हूं, मैं नहीं देखता कि इस धागे को कैसे हल किया जाए।

कोणीय 2 और 4 . के लिए
मैं कोड के साथ एक फ़ाइल requ.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'),
                    })

वेबपैक के साथ Vue.js के लिए समाधान (आकार और एंकर के साथ):

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

मैंने डिफ़ॉल्ट आइकन को बेस 64 बनाम बाहरी छवि URL का उपयोग करके इनलाइन करने के लिए कुछ त्वरित प्रदर्शन परीक्षण किए। मार्करों के _a लॉट_ लोड करते समय (1000, मेरे मामले में), बेस 64 इनलाइन छवियों के लिए प्रदर्शन काफी खराब है।

बाहरी URL के रूप में 1000 मार्कर आइकन लोड करते समय Chrome devtools प्रदर्शन दृश्य यहां दिया गया है:

इसकी तुलना में, इनलाइन बेस 64 के रूप में 1000 मार्कर आइकन के साथ (कृपया समयरेखा के लिए अलग पैमाने पर ध्यान दें, क्षमा करें):

जैसा कि देखा जा सकता है, किसी कारण से इनलाइन छवियों का उपयोग करते समय परत संरचना में देरी होती है, जिससे पूरे लोड को लगभग एक सेकंड अधिक समय लगता है।

आकस्मिक उपयोग के लिए, यह शायद कोई मायने नहीं रखता, लेकिन यदि आप बहुत सारे मार्करों का उपयोग करते हैं, तो यह प्रासंगिक हो सकता है।

इस लंबी अवधि को कैसे संभालना है, इसके लिए एक प्रस्ताव:

• कोड समीक्षा में उल्लिखित समस्याओं के समाधान के लिए #5041 ठीक करें; इससे इनलाइन किए गए आइकॉन बॉक्स से हटकर काम करेंगे
• अगर इनलाइन किए गए आइकॉन का इस्तेमाल किया जाता है, तो एक चेतावनी लॉग इन करें, यह इंगित करने के लिए कि यह आदर्श नहीं हो सकता है

एक अन्य विकल्प यह होगा कि छवि पथ का पता लगाने के लिए पुरानी (0.7) पद्धति पर वापस लौटें, लेकिन हम जानते हैं कि इसमें अन्य समस्याएं थीं जिन्हें हम हल नहीं कर सके।

हाय @perliedman ,

अच्छी रूपरेखा!
यह संदेह मैं जवाब देता था पुनः उपयोग इनलाइन चित्र की ओर नीचे के बारे में।

वास्तव में पीआर # 5041 को फिर से तैयार किया जा सकता है ताकि जब सीएसएस में आइकन छवियों को इनलाइन किया जाए (वेबपैक जैसे बिल्ड इंजन द्वारा) तो कैटलॉग तुरंत काम कर सके।
जिस समाधान के बारे में मैं सोच सकता हूं (ज्यादातर उल्लिखित पीआर के समान) प्रति छवि 1 वर्ग बनाना होगा, इसलिए यह सीएसएस (और शायद जेएस) फ़ाइल आकार को कुछ दर्जनों बाइट्स तक बढ़ा देगा।

उदाहरण: http://playground-leaflet.rhcloud.com/dulox/1/edit?html ,css,output

लेकिन जैसा कि मैंने पहले उल्लेख किया है , यह दुर्भाग्यपूर्ण है कि संगतता कारण (बिल्ड इंजन के साथ) के लिए ऐसा परिवर्तन उन उपयोगकर्ताओं को प्रभावित करता है जो इन ढांचे का उपयोग नहीं करते हैं और प्रक्रियाओं का निर्माण करते हैं।

दूसरी ओर, परिणाम "क्लीनर" हो सकता है क्योंकि हम IconDefault वर्ग विकल्पों में हार्ड-कोडेड फ़ाइल नामों से छुटकारा पा सकते हैं, और सीएसएस को पूरा पथ (फ़ाइल नाम सहित) सौंप सकते हैं।
यह बहुत दिलचस्प है क्योंकि (अगर मैं सही ढंग से समझता हूं) इस जटिल पहचान का पूरा बिंदु जेएस फ़ाइल से छवियों के स्थान को अलग करना है, और इसके बजाय सीएसएस फ़ाइल में उनके सापेक्ष स्थान पर भरोसा करना है। इसलिए मेरे लिए यह समझ में आता है कि फ़ाइल का नाम भी CSS में परिभाषित किया गया है।

लेकिन फिर imagePath विकल्प के साथ संगतता बनाए रखने की कोशिश करना भी जटिल हो सकता है, क्योंकि इसे संभवतः उन छवि पथों को फिर से काम करने की आवश्यकता होगी जो पहले खोजे गए थे, अग्रणी पथ को बदलने और फ़ाइल का नाम रखने के लिए। इसलिए हम वहां एक नया RegExp पेश करेंगे।

अंत में, मुझे यकीन नहीं है कि यह सभी मामलों को कवर करेगा।
बिल्ड प्रक्रियाओं को अत्यधिक अनुकूलित किया जा सकता है, जिससे स्थिर संपत्तियों जैसे आइकन छवियों के संबंध में बहुत अलग स्थितियां होती हैं। अभी भी कुछ कोने के मामले हो सकते हैं जहां ऊपर भी विफल हो जाएगा।

@ghybs मुझे वह उदाहरण पसंद है ( http://playground-leaflet.rhcloud.com/dulox/ )!

हो सकता है कि चीजें अति कर रही हों, लेकिन आप इस सीएसएस में आइकन _size_ निर्दिष्ट करने के बारे में क्या सोचते हैं ( width और height )? मैं कल्पना कर सकता हूं कि कोई व्यक्ति डिफ़ॉल्ट आइकन बदलने के लिए उन सीएसएस नियमों को ओवरराइड कर रहा है, केवल इसे खोजने के लिए अब गलत आयाम हैं।

सीएसएस में आयामों के साथ या बिना, मुझे लगता है कि यह आगे बढ़ने का एक अच्छा तरीका है। क्या आप अपने उदाहरण की तर्ज पर पीआर बनाना चाहेंगे? अगर आपके पास अभी समय या ऊर्जा नहीं है, तो मैं आगे बढ़ सकता हूं और इसे कर सकता हूं, बस मुझे बताएं कि आपको क्या पसंद है।

मैं इसे बंद करने के लिए उत्सुक हूं, क्योंकि मैं वास्तव में इस मुद्दे पर स्वयं ठोकर खा रहा था।

हाय @perliedman ,

मैं सहमत हूं कि सीएसएस के माध्यम से भी आइकन आकार निर्दिष्ट करने में सक्षम होना बेहतर होगा।

लेकिन उस स्थिति में, निरंतरता के लिए हमें एंकर पॉइंट निर्दिष्ट करने में भी सक्षम होना चाहिए। मुझे यकीन नहीं है कि इसके लिए कौन सा सीएसएस नियम उपयुक्त होगा (शायद मार्जिन?) यदि यह संभव है, तो मुझे लगता है कि परिणाम बहुत अच्छा होगा: आइकन पूरी तरह से सीएसएस में परिभाषित किए जाएंगे।

इससे भी आगे बढ़ते हुए, यह एक आइकन को परिभाषित करने का एक अतिरिक्त तरीका हो सकता है: 3 सीएसएस वर्ग (आइकन, रेटिना, छाया) निर्दिष्ट करें और पत्रक उनसे सभी आइकन विकल्प निकालेगा।

कृपया इस पर काम करने के लिए स्वतंत्र महसूस करें, मुझे यकीन नहीं है कि मुझे दुर्भाग्य से कुछ समय कब मिलेगा ...

पिछले उदाहरण पर निर्माण, यहां padding और margin सीएसएस नियमों को पढ़ने की अवधारणा है ताकि iconAnchor ( shadowAnchor ) और popupAnchor निर्धारित किया जा सके। विकल्प:
http://playground-leaflet.rhcloud.com/xuvi/1/edit?html ,css,output

मैं इस तथ्य की तरह नहीं है कि मैं का इस्तेमाल किया padding निर्धारित करने के लिए iconAnchor क्योंकि अंत में पत्रक का उपयोग करता है, margin आइकन चित्र को स्थान देने ...
लेकिन सीएसएस में चीजों को त्वरित रूप से निर्दिष्ट करने के लिए मुझे यह सबसे आसान लगा, और हम आइकन विकल्पों को कैसे निर्दिष्ट करते हैं, इसकी तुलना में मूल्यों को वापस करने से बचें।

हालाँकि मुझे CSS में सब कुछ निर्दिष्ट करने का परिणाम पसंद है, फिर भी L.Icon.Default.imagePath के साथ पश्चगामी संगतता बनाए रखने के लिए अभी और काम करने की आवश्यकता है।

मुझे खेद है कि मेरे पास पीआर बनाने का समय नहीं है।

मैंने अभी एक और मामले का निदान किया है जहां _detectIconPath विफल रहता है: फ़ायरफ़ॉक्स का उपयोग करते समय (ईएसआर और वर्तमान संस्करणों के साथ परीक्षण किया गया) और वरीयताएँ → सामग्री → रंग… → अपने चयन के साथ पृष्ठ द्वारा निर्दिष्ट रंगों को ओवरराइड करें: हमेशा फ़ायरफ़ॉक्स हटा देगा background-image गुण जिसमें .leaflet-default-icon-path और इस प्रकार _detectIconPath तोड़ देता है।

मुझे यकीन नहीं है कि कितने अन्य लोग इस फ़ायरफ़ॉक्स सुविधा का उपयोग करते हैं, लेकिन मैं इसे बहुत लंबे समय से उपयोग कर रहा हूं।

क्या url() का उपयोग अन्य CSS-गुणों के मूल्य के रूप में भी किया जा सकता है? निम्नलिखित सीएसएस का उपयोग करना पसंद है: .leaflet-default-icon-path { -leaflet-icon: url(images/marker-icon.png); } या कस्टम सीएसएस-गुणों को स्वयं परिभाषित करना और उनका उपयोग करना असंभव है? किसी भी ब्राउज़र को -leaflet-icon संपत्ति को _समझने की आवश्यकता नहीं होगी, हालांकि उन्हें अभी भी इसे पॉप्युलेट करने और स्क्रिप्ट के लिए इसके मूल्य को उपलब्ध कराने की आवश्यकता होगी।

हाय @roques ,

Firefox में इस विशिष्ट विकल्प का उपयोग करते समय इस समस्या की रिपोर्ट करने के लिए धन्यवाद!
ऐसा लगता है कि क्रोम में एक उच्च कंट्रास्ट एक्सटेंशन है, लेकिन जो केवल रंग बदलता है, कैटलॉग में कुछ भी तोड़े बिना।

दुर्भाग्य से फ़ायरफ़ॉक्स सीएसएस गुणों को छीन लेता है जो इसे समझ में नहीं आता है।
हालांकि छवि सीएसएस डेटा प्रकार का उपयोग कुछ अन्य नियमों के साथ किया जा सकता है, जिसमें cursor , जो फ़ायरफ़ॉक्स में रंग ओवरराइड सेटिंग का उपयोग किए जाने पर भी ठीक काम करता है:
http://playground-leaflet.rhcloud.com/yov/1/edit?html ,css,output

मुझे cursor बजाय background-image का उपयोग करना कम सुरुचिपूर्ण लगता है, क्योंकि इसका उपयोग सीएसएस स्टाइल के माध्यम से मार्कर बनाने के लिए हम जो करते हैं उससे बहुत आगे है ... लेकिन वैसे भी यह पथ के लिए पहले से ही एक हैक है केवल पता लगाना।

मैं वेबपैक समस्या को हल करने के लिए एक पीआर बनाने वाला था, मैं अभी इस वर्कअराउंड को शामिल करूंगा।
मुझे कोई सुराग नहीं है कि हम इस मामले के लिए एक स्वचालित परीक्षण कैसे कर सकते हैं, लेकिन मुझे लगता है कि समाधान पहले से ही अच्छा होना चाहिए।

किसी को भी इस मुद्दे का स्पष्ट समाधान मिला है?

कोणीय + कोणीय CLI का उपयोग करने वाले किसी भी व्यक्ति के लिए @Shiva127 के उत्तर पर निर्माण:

आप इसे 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/assets में नहीं देख पाएंगे)। साथ ही, वैश्विक प्रोटोटाइप संशोधित आयात (जैसे RxJS अवलोकन योग्य पैच) को रखने के लिए app.module.ts करना एक अच्छी जगह है। इसके साथ, मार्कर को आयात करना जहां कोडबेस में सही ढंग से कार्य करेगा।

मैंने इस मुद्दे को इस तरह ठीक किया है।

मैंने मार्कर ड्रॉऑप्शन को एक डिफ़ॉल्ट आइकन प्रदान किया है:

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

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

...

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

अंत में परतों को प्रदर्शित करने पर मैंने इमेजपाथ सेट किया:

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 है, जो _long_ समय के लिए अनुरोधित परिवर्तनों के साथ खुला है।

हमारे पास वैकल्पिक समाधान #5771 भी है, जो अच्छा है लेकिन इसमें और बदलाव शामिल हैं।

तो, संक्षेप में: किसी ने भी इसे संबोधित करने के लिए एक स्वीकृत पीआर जमा नहीं किया है, मदद का स्वागत है!

@perliedman की नज़र से इसमें शामिल #5771 का परिवर्तन आवश्यक है। नहीं तो आपको अलग-अलग परिस्थितियों में यह समस्या आती रहेगी। क्यों न सिर्फ इसे मर्ज करें?

हाय @ mb21 ,

#5771 के शामिल परिवर्तन आवश्यक हैं

वास्तव में प्रस्तावित परिवर्तन 2 प्रकार के हैं:

• केवल छवि फ़ोल्डर स्थान के बजाय प्रत्येक छवि पथ को पढ़ना, ताकि बिल्ड इंजन (जैसे वेबपैक फ़ाइल लोडर) द्वारा संशोधित यूआरएल को पुनर्निर्मित/अनुमानित के बजाय पढ़ा जा सके।
• सीएसएस से अन्य सभी डिफ़ॉल्ट आइकन विकल्पों को पढ़ना, ताकि सभी कॉन्फ़िगरेशन एक ही स्थान पर एकत्रित हो जाएं।

दूसरा बिंदु दिलचस्प है यदि पहले वाले को टाला नहीं जा सकता है, भले ही वह कुछ कोड जोड़ता हो।

पहला वास्तव में एक बिल्ड इंजन का उपयोग करने वाले डेवलपर्स के लिए एक पक्ष है जो सीएसएस में यूआरएल के साथ फिडल करता है। यह एक नए वातावरण में भी कैटलॉग _zero कॉन्फिगर स्पिरिट_ रखता है, जहां डेवलपर अपने कॉन्फ़िगरेशन को ट्यून करने में काफी समय बिताता है (यदि आप वेबपैक फ़ाइल लोडर का उपयोग करते हैं, तो आपको वैसे भी एक कस्टम कॉन्फ़िगरेशन की आवश्यकता होती है), बाकी सभी के लिए कुछ कोड जोड़ने की कीमत पर, जो आईएमएचओ _एगेंस्ट_ लीफलेट स्पिरिट है (कोर में सामान्य उपयोग का समर्थन करें, प्लगइन्स को अन्य उपयोग के मामलों को सौंपें)।
आप छवि पथ निर्दिष्ट करके पहली बार में समस्या को आसानी से हल कर सकते हैं, आमतौर पर require(image) का उपयोग करके जैसा कि उपरोक्त कई टिप्पणियों में दिखाया गया है।

इसलिए भले ही मैंने उस पीआर को लिखा हो, मैं व्यक्तिगत रूप से इसे कोर में मर्ज करने में असहज महसूस करता हूं। परिवर्तन _बहुमत के लिए आवश्यक नहीं_ हैं।

वे निश्चित रूप से डेवलपर्स के जीवन को आसान बनाने के लिए अच्छे हैं, लेकिन यह मुद्दा मुख्य रूप से बिल्ड इंजन/फ्रेमवर्क रैपर की बातचीत के कारण होता है, प्रत्येक की अपनी विशिष्टताएं होती हैं, और प्रत्येक के पास यह बताने का एक आसान तरीका होता है कि छवियां अब कहां हैं, पहले से मौजूद का उपयोग कर एपीआई।

हो सकता है कि हमें इस मुद्दे को बेहतर दस्तावेज़ीकरण के साथ संबोधित करना चाहिए (उदाहरण के लिए निर्माण इंजन/ढांचे के साथ उपयोग के लिए समर्पित एक अनुभाग?), और/या एक प्लगइन?

खैर, मुझे यकीन नहीं है कि मैं पेचीदगियों को समझता हूं। लेकिन यह निश्चित रूप से सभी प्रकार के डेवलपर्स के लिए अच्छा होगा यदि सीएसएस में _all_ छवि पथ निर्दिष्ट किए जा सकते हैं। यह न केवल वेबपैक-उपयोगकर्ता हैं, यह मेरे जैसे लोग भी हैं जो रेल या Django संपत्ति पाइपलाइन का उपयोग करते हैं जो प्रत्येक स्थिर संपत्ति के लिए हैश जोड़ता है ...

मैंने बिल्कुल वही समस्या का अनुभव किया है:
डेटा:इमेज/पीएनजी;बेस64,आईवीबीओआरडब्ल्यू0...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);

जैसा कि codeofsumit द्वारा सुझाया गया है।

मैंने इसे वास्तव में कष्टप्रद पाया और यह तथ्य कि इसे ठीक करने के लिए एक पीआर है लेकिन "महसूस" के कारण विलय नहीं हुआ है कि "बहुमत के लिए परिवर्तन आवश्यक नहीं हैं।" क्षमा करें, लेकिन मैंने लोगों को PHP, RoR, Python (Django) और node.js में इसके साथ संघर्ष करते देखा है, तो आपको क्या लगता है कि इन समूहों से परे "बहुसंख्यक" कहां है? आप किस संगत ढांचे की सिफारिश करेंगे?

मैं @macwis से सहमत

एक ही समस्या है और यह धागा बहुत लंबा है। जनसंपर्क का विलय क्यों नहीं?

यह एक भावना नहीं है, यह एक सच्चाई है: बहुसंख्यक बिना ढांचे का उपयोग करते हैं, या वे जो सीएसएस के साथ खिलवाड़ नहीं करते हैं।
पिछली बार जब मैंने जाँच की थी, तो कैटलॉग अनपैक सीडीएन, यानी अनबंडल और अनफ़िल्ड सीएसएस से डाउनलोड किया गया नंबर 1 था।

उचित समाधान डिफ़ॉल्ट आइकन विकल्पों को परिभाषित करना है, जैसा कि उपरोक्त कई संदेशों में बताया गया है।
कई चौखटे अपने पत्रक एकीकरण प्लगइन के हिस्से के रूप में ऐसा करते हैं।

यदि आप अधिक स्वचालित समाधान चाहते हैं, तो भी आपके पास प्लगइन प्रकाशित करने का विकल्प है।

जनसंपर्क का विलय क्यों नहीं?

टिप्पणियाँ पढ़ें, जैसे https://github.com/Leaflet/Leaflet/issues/4968#issuecomment -382639119

मैं बस थोड़ा सा संकेत देना चाहूंगा: आप ढांचे का उपयोग करते समय सीडीएन का भी उपयोग कर सकते हैं। उदाहरण के लिए हम अपने रिएक्ट ऐप के साथ यही करते हैं। हम सीडीएन के माध्यम से बड़े libs लोड करते हैं।

@ googol7 आपके इनपुट के लिए धन्यवाद।

अगर मैं गलत हूं तो कृपया मुझे सुधारें: यदि आप सीडीएन के माध्यम से पत्रक लोड करते हैं, तो शायद इसका मतलब है कि आप इसके सीएसएस को नहीं बदलते हैं। इसलिए आपके उपयोगकर्ता बहुमत में हैं।

@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 आपके

तो आपका मतलब है कि आप सीडीएन से कैटलॉग जेएस लोड करते हैं, लेकिन सीएसएस और छवियों को अपने ऐप में बंडल करते हैं।

@ghybs हाँ मुझे लगता है कि यहाँ क्या हो रहा है।

पहले दो चरणों का पालन करना सुनिश्चित करें: https://leafletjs.com/examples/quick-start/
मेरे पास एक समान समस्या थी क्योंकि मैं किसी और के ट्यूटोरियल के सीएसएस का उपयोग कर रहा था, लेकिन इसका उपयोग किया जाना चाहिए

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

नमस्ते,

मैंने कैटलॉग प्लगइन " लीफलेट-डिफॉल्टिकॉन-संगतता " प्रकाशित किया है जो मेरे पीआर https://github.com/Leaflet/Leaflet/pull/5771 से कोड लेता है
उस प्लगइन का उपयोग करके, कैटलॉग डिफ़ॉल्ट आइकन अब आइकन छवि पथ को फिर से बनाने का प्रयास नहीं करता है, लेकिन पूरी तरह से सीएसएस पर निर्भर करता है। इस तरह, यह बिल्ड इंजन और ढांचे के साथ पूरी तरह से संगत हो जाता है जो स्वचालित रूप से सीएसएस के आधार पर संपत्ति का प्रबंधन करता है (और आमतौर पर url() फिर से लिखता है)।

बस प्लगइन लोड करें (CSS + JS) _after_ USC.
जैसे वेबपैक में:

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

( डेमो )

जबकि मैं समझ सकता हूं कि कई डेवलपर्स ने इस तरह की सुविधा को सीधे कैटलॉग कोर में शामिल करना पसंद किया होगा, यह तर्क दिया गया है कि जोड़ा गया कोड अधिकांश अंतिम उपयोगकर्ताओं के लिए बेकार है। इसलिए, इसके मूल को सरल रखने की USC भावना के साथ संरेखित करते हुए, मैंने इसे एक प्लगइन बनाने का निर्णय लिया।

कृपया प्लगइन रेपो पर एक मुद्दा खोलने के लिए स्वतंत्र महसूस करें, अगर आपको परेशानी या चिंता है कि यह कैसे काम करता है।

तथ्य यह है कि यदि आप वेबपैक का उपयोग कर रहे हैं तो आपको यह समस्या आती है। मुझे वेबपैक का उपयोग करने वाली अधिक से अधिक साइटों का रुझान दिखाई दे रहा है। इसे प्लगइन के रूप में रखना आदर्श से कम है, आईएमएचओ, क्योंकि मुझे इस तरह के मुद्दे को ठीक करने के लिए लोगों को प्लगइन की तलाश नहीं है (जैसे मैंने एक डुप्ली खोला था)।
मैं इसे अंदर के पत्रक को देखना बहुत पसंद करूंगा क्योंकि यह एक फीचर से ज्यादा बग फिक्स है ...

यदि आप इस मुद्दे को कोणीय 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;
  }
}

मैंने जिस कोणीय पैकेज का उपयोग किया था और यहाँ भी वही समस्या थी: ngx-leaflet

ध्यान दें:
कोणीय 6 में छोटी पकड़ है, जैसा कि StackOverflow पर _t.animal_ से उत्तर

ध्यान रखें कि एंगुलर 6 में आर्किटेक्ट build और test में दो प्रासंगिक बिल्डर्स हैं।

सुनिश्चित करें कि आपने इसे build अंतर्गत रखा है।

@ मार्को-जोवानोविक जानकारी के लिए धन्यवाद, लेकिन क्या होगा यदि मैं इन संपत्तियों का उपयोग नहीं कर रहा हूं और अपने पैकेज का आकार कम करना चाहता हूं?
आपका सुझाव अभी भी एक समाधान, आईएमओ की मेरी परिभाषा के अंतर्गत आता है।

@HarelM वैसे मैं किसी अन्य समाधान के साथ नहीं आ सका क्योंकि मैं स्कूल परियोजना को पूरा करने की जल्दी में था। यह सही नहीं है और मुझे पता है कि यह पैकेज के आकार को बढ़ाता है, लेकिन मेरा समाधान मेरे लिए पर्याप्त था, और आशा है कि मेरा उत्तर किसी भी तरह दूसरों की भी मदद कर सकता है।

@ मार्को-जोवानोविक आपका समाधान बहुत अच्छा है और मुझे भी उम्मीद है कि यह दूसरों की मदद कर सकता है। मैं सिर्फ समाधान की उम्मीद कर रहा हूं, कामकाज नहीं :-)

@ मार्को-जोवानोविक हाय, मैं भी एक स्कूल प्रोजेक्ट (कोणीय 6) पर बैठा हूं और यह पता नहीं लगा सकता कि सामान मेरे लिए काम क्यों नहीं करता है। ईमानदारी से कहूं तो मैं यहां इन सभी चीजों के लिए एक नोब हूं।

जब मैं अपने घटक के ngOnInit -Function में आपका कोड डालता हूं, तो यह उस हिस्से में एक त्रुटि फेंकता है जहां आप 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',
});`

vue2-पत्रक 1.2.3 के साथ पत्रक 1.3.4 का उपयोग करके समाधान:

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 सेंट: वेबपैक के साथ मेरी समस्या सिर्फ हैश किए गए फ़ाइल नामों के कारण थी, इसलिए मैंने हैश लीफलेट की छवियों को नहीं करने के लिए 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 हॉटफिक्स के लिए धन्यवाद। मैं विभिन्न परियोजनाओं में इस बग में कई बार भाग चुका हूं। यह पूरा सूत्र बेतुका लगता है कि यह ठीक नहीं है या इसे किसी समस्या के रूप में नहीं देखा जाता है।

गूगल ने मुझे यहाँ इसलिए लाया क्योंकि वेबपैक के साथ पुस्तकालय का उपयोग करने से मुझे यह त्रुटि मिल रही थी।

क्या किसी को पता है कि उन छवियों को svg के रूप में क्यों रेखांकित नहीं किया गया है?

मुझे लगता है कि इसे आसानी से postcss और postcss-inline-svg के साथ हल किया जा सकता है। आइकन बाहरी png बजाय इनलाइन svg फ़ाइलें बन जाएंगे। जैसे-जैसे यह समस्या दूर होगी, आइकॉन क्रिस्प होंगे।

क्या किसी को पता है कि उन छवियों को svg के रूप में क्यों रेखांकित नहीं किया गया है?

लीगेसी ब्राउज़र समर्थन।

धन्यवाद @IvanSanchez

तब मुझे दो संभावित समाधान दिखाई देते हैं। एक छवियों को बेस 64 एन्कोडेड .png रूप में इनलाइन करना है। दूसरा विकल्प .svg आइकनों को इनलाइन करना और डिफॉल्ट आइकन को ओवरराइड करने के लिए लीगेसी प्लेटफॉर्म को लक्षित करने वाले देव बनाना है।

क्या इनमें से कोई समाधान पुल अनुरोध के लायक है?

लीफलेट द्वारा समर्थित सभी ब्राउज़रों में से, निम्नलिखित में svg ( caniuse ) के लिए समर्थन नहीं है।

• आईई 7 और 8
• एंड्रॉइड ब्राउज़र 2.*

छवियों को बेस 64 के रूप में इनलाइन करें

देखें 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; 

मेरे पास भी एक ही समस्या है (फ्लास्क का उपयोग करके वेबपैक, इसलिए सभी तत्वों को एक स्थिर फ़ोल्डर में माना जाता है), लेकिन @ जियोर्गी-एम फिक्स पर्याप्त नहीं है, क्योंकि मुझे '' निर्यात "केवल-पढ़ने के लिए है" त्रुटि ( फ़ायरफ़ॉक्स, पीएनजी आयात से जुड़ा हुआ प्रतीत होता है?)
मैंने देखा कि समस्या बंद हो गई है, लेकिन हम अभी भी 1.4.0 के साथ समस्याएँ देखते हैं, इसलिए मुझे आश्चर्य है कि समाधान क्या है?

इस मुद्दे को vue2-पत्रक 2.0.2 और पत्रक 1.4.0 के साथ देखना।

ऐसा प्रतीत होता है कि यह काफी समय से अस्तित्व में है, और प्रस्तुत समाधानों में से आधे काम नहीं करते हैं।

क्या किसी ने इस समस्या की जड़ का पता लगाया है?

मुझे "vue2-leaflet": "2.0.3" लीफलेट "लीफलेट": "1.4.0" संस्करणों के साथ एक ही समस्या हो रही है।

वेबपैक भी चला रहे हैं।

हम इसी मुद्दे में पाए गए समाधान का उपयोग करके सफलतापूर्वक vue2-पत्रक 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')
})

मुझे लगता है कि बेहतर सवाल पूछा जाना चाहिए कि यह मर्ज किए गए कोड के साथ क्यों तय नहीं किया गया जिससे समस्या बंद हो गई? चूंकि एक वर्कअराउंड जो काम करता है वह बहुत अच्छा है, लेकिन यह बॉक्स से बाहर काम करना चाहिए और अभी भी एक खुला मुद्दा होना चाहिए।

प्रिय साथियो,

पत्रक आउट-ऑफ़-द-बॉक्स काम करता है।

वेबपैक (और अन्य बिल्ड इंजन) कैटलॉग के साथ संयुक्त रूप से आउट-ऑफ-द-बॉक्स काम नहीं करता है।

कृपया https://github.com/Leaflet/Leaflet/issues/4968#issuecomment -399857656 में प्रस्तावित समाधान देखें: पत्रक- डिफॉल्टिकॉन

जबकि मैं समझ सकता हूं कि कई डेवलपर्स ने इस तरह की सुविधा को सीधे कैटलॉग कोर में शामिल करना पसंद किया होगा, यह तर्क दिया गया है कि जोड़ा गया कोड अधिकांश अंतिम उपयोगकर्ताओं के लिए बेकार है। इसलिए, इसके मूल को सरल रखने की USC भावना के साथ संरेखित करते हुए, मैंने इसे एक प्लगइन बनाने का निर्णय लिया।

वेबपैक के साथ, एक और विशिष्ट समाधान , एक बार जब आप अपने लोडर को कॉन्फ़िगर कर लेते हैं:

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: