Leaflet: L.Icon.Default가 잘못된 이미지 URL을 가져옵니다.

• 서버에 우리가 직접 문제를 재현할 수 있도록 방문할 수 있는 공개 웹페이지가 있습니까?
• 어떤 OS와 웹 브라우저를 사용하고 있습니까?

leaflet.min.js:5 GET 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' 줄이 있었습니다. - 왜 그랬는지 잘 기억나지 않지만 주석 처리하면 문제가 해결됩니다.

갑자기 webpack과 전단지를 사용하는 완전히 다른 두 프로젝트에서 동일한 문제가 발생했습니다.
지도에 마커를 추가하면 이미지를 찾을 수 없습니다. 브라우저에서 다음 오류가 발생합니다.

좋아, 내가 뭔가를 얻었다.

따라서 현재 이미지(아이콘 및 그림자)를 찾을 수 없기 때문에 마커가 이와 같이 보입니다.

전단지의 이 기능:

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

data:image URL이 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 가 문제를 좁히는 데 도움이 됩니까?

@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(" /^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

@Radu-Filip PR에 대한 이러한 수정으로 문제를 해결할 수 있었습니다. 하지만 이것이 어떤 다른 영향을 미칠지 잘 모르겠습니다.

문제는 당신이 말했듯이 기본적으로 모든 아이콘에 대한 기본 URL이 마커 이미지라는 것입니다.
그래서 우선 CSS에 그림자의 기본 URL을 추가했습니다.

/* 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에서 비슷한 작업을 수행했습니다.
그리고 지금은 해킹으로 if를 사용할 것입니다. Webpack et al을 사용하는 사람들을 위한 더 많은 미래 증거 솔루션이 있기를 바랍니다.

@Radu-Filip 해당 솔루션으로 PR을 업데이트하시겠습니까? 병합될 수 있습니다.

@codeofsumit 완료, 통과하는지 봅시다

안녕,

어쩌면 내가 뭔가를 놓쳤을 수도 있지만 Webpack 빌드의 이 문제는 L.Icon.Default 동작을 재정의하는 Leaflet 플러그인으로 간단히 해결할 수 있는 것 같습니다.

데모: http://playground-leaflet.rhcloud.com/nexo/1/edit?html,css ,출력

이 접근 방식을 사용하면 까다로운 RegExp를 제거하고 기본 마커 이미지가 인라인됩니다(하드 코딩에 의해). 이는 어쨌든 작은 이미지에 대해 Webpack이 의도한 결과 중 하나입니다.

가능한 단점은 각 마커에 고유한 base64 아이콘이 있으며 브라우저가 이를 캐시할 수 있는지 확실하지 않다는 것입니다... (PR #5041의 단점도 동일)
예를 들어 Layers Control 아이콘에 대해 수행한 것처럼 이미지 src 속성에 배치하는 대신 배경 이미지로 설정하여 개선을 상상할 수 있습니다.
(같은 소리 편집이 아이디어에 숨겨진 함정이있을 수 있습니다 하나 는 처음에 이미지 경로 탐지를 피할 수 있었을 것으로, 그렇지 않으면 나는 확실히 그것을 오래 전에 구현 된 것입니다).

데모: http://playground-leaflet.rhcloud.com/mey/1/edit?html ,css,output (망막을 돌보지 않음)

플러그인 접근 방식의 가장 큰 장점은 Webpack 프로젝트에 대해서만 이 특정 동작을 유지한다는 것입니다.

도움이 되었기를 바랍니다.

BTW, 여기에 본질적으로 잘못된 것이 있는 것 같습니다.

Leaflet은 CSS 파일과 비교하여 미리 정의된 위치에 있어야 하는 이미지에 대한 "복잡한" 경로 감지를 수행합니다.

그러나 webpack 빌드 프로세스는 개발자가 webpack에 요청하는 내용(예: 이미지 요구)에 따라 CSS를 번들로 제공하고 이미지도 이동할 수 있습니다(및 이름 변경!).
따라서 웹팩을 사용하면 반드시 Leaflet 감지에 실패합니다.

PR #5041은 Webpack이 각 마커에 Base64 이미지를 복제하는 대신 이미지를 CSS에 인라인하는 경우를 받아들이는 속임수와 같습니다. 웹팩이 아닌 사용자에 대한 비용은 말할 것도 없습니다.

PR #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 뒤에 슬래시가 없기 때문에 Drupal의 이미지 경로는 " /sites/all/libraries/leaflet/imagesmarker-icon.png "와 같이 생성됩니다. 이미지 경로와 마커 이미지 파일 이름(marker-icon.png) 사이에는 슬래시 /가 있어야 합니다.

안녕하세요 @anairamzap-mobomo,

신고하신 내용은 다른 문제인 것 같습니다.

불행히도 프레임워크(Drupal)에 대한 포트가 포함된 것처럼 보이므로 먼저 해당 포트가 작동하는 방식과 관련이 없는 버그가 있는지 확인해야 합니다.

바닐라 JS가 있는 전단지 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 모듈에 의해 재정의됩니다.

해당 모듈이 Leaflet 0.7.x와 1.0.x 사이의 변경 사항을 처리하지 않는 것 같습니다. 여기서 슬래시는 이제 L.Icon.Default.imagePath 포함되어야 합니다.

Leaflet 1.0.0은 주요 릴리스이므로 이전 버전과의 호환성에 대한 약속은 없다고 생각합니다.

안녕하세요 @ghybs 알겠습니다 ... Drupal 모듈 유지 관리자에게 연락하여 이를 알려드리겠습니다. 당신이 말했듯이 라이브러리의 1.0.x 버전에 잘 맞도록 모듈을 수정하거나 이에 대해 경고하는 문서에 최소한 몇 줄을 추가해야 하는 것 같습니다.

피드백 주셔서 감사합니다!

aurulia skeleton/esnext+webpack 프로젝트에서 원래 보고된 것과 똑같은 문제가 있습니다.

이 문제가 해결될 때까지 이미지를 소스 폴더에 복사하고 사용자 지정 마커를 사용하고 있습니다. 크기/배치 정보를 생략해도 괜찮은 것 같습니다...

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

잘못된 data:url 문제를 해결하기 위해 내가 한 일을 공유하고 싶었습니다. 기본적으로 기본 아이콘을 제공된 마커 아이콘과 그림자를 사용하는 새 아이콘으로 설정하지만 webpack이 해당 이미지의 데이터 인코딩을 개별적으로 처리하도록 합니다. 어딘가에 이와 같은 파일을 포함하기만 하면 됩니다.

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;

망막 아이콘도 포함하도록 조정할 수 있습니다.

누구든지 수정된 leaflet.js 파일을 보낼 수 있습니까?
@ajoslin103 이 사용하는 코드:
```var customDefault = L.icon({
iconUrl: '이미지/마커-icon.png',
shadowUrl: '이미지/마커-섀도우.png',
});

나는 leaflet.js 파일을 수정하지 않았고, 단지 리플릿 배포판에서 내 일반 이미지 폴더로 마커 이미지를 복사한 다음, 내가 게시한 해당 조각을 사용자 정의 아이콘으로 사용했습니다.

원래 CSS에서 http로 참조되고 내 사이트가 https를 통해 제공되고 있었기 때문에 crb611의 솔루션을 사용할 수 없었습니다.

``` 함수 onLocationFound(e) {
var 반경 = e.accuracy / 2;
var customDefault = L.icon({
iconUrl: 'marker_icon_2x',
shadowUrl: 'marker_shadow.png'
});
L.marker(e.latlng).addTo(지도)
.bindPopup("이 지점에서 " + 반경 + " 미터 내에 있습니다.").openPopup();
L.circle(e.latlng, 반경).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() (또는 무엇이든)이 예기치 않게 데이터 UI를 만나면 console.warn 통해 Github 문제 URL을 가리키는 런타임 경고를 추가하는 것이 좋습니다. 그런.

즉, 바로 이곳에 같은 문제를 가진 사람들을 데려와 (같은 해결 방법 제안 이 하나의 나를 위해 일한).

이것이 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")

이상적이지는 않지만 webpack을 사용하고 이 해결 방법을 사용합니다.

이미지를 프로젝트 루트의 이미지 폴더에 복사했습니다.

그런 다음 내 package.json에서 postbuild npm 스크립트를 추가했습니다(스크립트 섹션에서).
" postbuild:prod ": "./Post-Build4Prod.sh"

이미지 폴더를 dist에 복사합니다.

#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의 collectstatic 및 CachedStaticFilesStorage와 동일한 문제가 있어 파일 내용의 해시를 정적 파일의 이름에 추가하므로 marker-icon.png는 marker-icon.2273e3d8ad92.png가 된 다음 _detectIconPath 끝에 정규 표현식이 됩니다. 일치하지 않습니다.

나는 그것을 나를 위해 일한 replace(/marker-icon[^"']+\.png[\"\']?\)$/, '') 로 변경했습니다.

저도 현재 이 문제가 있습니다.
Leaflet 1.0.3 및 Angular2 사용.
고백합니다. 이 스레드에서 문제를 해결하는 방법을 모르겠습니다.

Angular 2 및 4의 경우
다음 코드로 require.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'),
                    })

webpack이 있는 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]
})

외부 이미지 URL을 사용하는 것과 비교하여 기본 아이콘을 base64로 인라인하기 위한 몇 가지 빠른 성능 테스트를 수행했습니다. 많은 마커(내 경우에는 1000개)를 로드할 때 base64 인라인 이미지의 경우 성능이 눈에 띄게 나빠집니다.

다음은 1000개의 마커 아이콘을 외부 URL로 로드할 때의 Chrome devtools 성능 보기입니다.

인라인 base64로 1000개의 마커 아이콘을 사용하는 것과 비교하여(타임라인에 대해 다른 배율을 확인하십시오. 죄송합니다):

보시다시피, 인라인 이미지를 사용할 때 어떤 이유로 레이어 구성이 지연되어 전체 로드가 약 1초 더 오래 걸립니다.

일상적인 사용의 경우 이것은 중요하지 않을 수 있지만 마커를 많이 사용하는 경우 관련이 있을 수 있습니다.

이 장기간을 처리하는 방법에 대한 제안:

• 코드 리뷰에서 언급된 문제를 해결하기 위해 #5041을 수정하십시오. 이렇게하면 인라인 아이콘이 즉시 작동합니다.
• 인라인 아이콘이 사용되는 경우 이것이 이상적이지 않을 수 있음을 나타내기 위해 경고를 기록합니다.

또 다른 옵션은 이미지 경로를 감지하기 위해 이전(0.7) 방법으로 되돌리는 것이지만 해결할 수 없는 다른 문제가 있다는 것을 알고 있습니다.

안녕하세요 @perliedman 님 ,

멋진 프로파일링!
내가 의심 대답 했다 다시 사용 인라인 이미지의 측면 아래에 관한합니다.

실제로 PR #5041은 (webpack과 같은 빌드 엔진에 의해) CSS에서 아이콘 이미지가 인라인될 때 Leaflet이 즉시 작동할 수 있도록 리팩토링될 수 있습니다.
내가 생각할 수 있는 솔루션(대부분 언급된 PR과 유사)은 이미지당 1개의 클래스를 생성하는 것을 의미하므로 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/)!

과한 일이지만 이 CSS에서 icon _size_를 지정하는 것에 대해 어떻게 생각하십니까( width 및 height )? 기본 아이콘을 변경하기 위해 해당 CSS 규칙을 재정의하는 사람이 있다고 상상할 수 있습니다.

CSS의 치수가 있든 없든, 저는 이것이 앞으로 나아가는 좋은 방법이라고 생각합니다. 귀하의 모범에 따라 PR을 하시겠습니까? 지금 당장 시간이나 에너지가 없다면 내가 할 수 있습니다. 원하는 것을 말씀해 주세요.

실제로이 문제를 우연히 발견했기 때문에 이 문제를 닫고 싶습니다.

안녕하세요 @perliedman 님 ,

CSS를 통해 아이콘 크기도 지정할 수 있다면 더 좋을 것 같다는 데 동의합니다.

그러나 이 경우 일관성을 위해 기준점도 지정할 수 있어야 합니다. 어떤 CSS 규칙이 이에 적합한지 잘 모르겠습니다(여백일 수 있습니까?). 그것이 가능하다면 결과는 매우 좋을 것입니다. 아이콘은 CSS에서 완전히 정의될 것입니다.

더 나아가 아이콘을 정의하는 추가 방법이 될 수 있습니다. 3개의 CSS 클래스(아이콘, 망막, 그림자)를 지정하면 Leaflet이 모든 아이콘 옵션을 추출합니다.

이 작업을 자유롭게 수행하십시오. 불행히도 언제 시간을 낼 수 있을지 모르겠습니다...

이전 예제를 기반으로 padding 및 margin CSS 규칙을 읽고 padding iconAnchor ( shadowAnchor ) 및 popupAnchor 옵션:
http://playground-leaflet.rhcloud.com/xuvi/1/edit?html , CSS, 출력

나는 내가 사용한다는 사실 마음에 들지 padding 결정하기 iconAnchor 결국 리플릿을 사용하기 때문에, margin 아이콘 이미지의 위치를 ...
그러나 내가 찾은 가장 쉬운 방법은 CSS에서 신속하게 항목을 지정하고 아이콘 옵션을 지정하는 방법과 비교하여 값을 되돌리는 것을 방지하는 것입니다.

CSS에서 모든 것을 지정한 결과가 마음에 들지만 L.Icon.Default.imagePath 와의 하위 호환성을 유지하려면 아직 더 많은 작업이 필요합니다.

PR을 만들 시간이 없어 죄송합니다.

방금 _detectIconPath 가 실패하는 또 다른 경우를 진단했습니다. Firefox(ESR 및 현재 버전에서 테스트됨)를 사용하고 환경 설정 → 콘텐츠 → 색상… 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에 고대비 확장 기능 이 있는 것처럼 보이지만 Leaflet에서 아무 것도 손상시키지 않고 색상만 변경합니다.

불행히도 Firefox는 이해하지 못하는 CSS 속성을 제거합니다.
그러나 이미지 CSS 데이터 유형 은 cursor 비롯한 몇 가지 다른 규칙과 함께 사용할 수 있습니다. 이는 Firefox에서 색상 재정의 설정을 사용하는 경우에도 잘 작동하는 것으로 보입니다.
http://playground-leaflet.rhcloud.com/yov/1/edit?html , CSS, 출력

나는 덜 우아한 사용 찾을 수 cursor 대신 background-image 의 사용이 우리가 CSS 스타일을 통해 마커를 만들기 위해 무엇을 할 것이라고에서 훨씬 더이기 때문에 ...하지만 어쨌든이 이미 경로에 대한 해킹 탐지만.

나는 웹팩 문제를 해결하기 위해 PR을 만들려고 했고 지금 바로 이 해결 방법을 포함할 것입니다.
이 경우에 대해 자동화된 테스트를 수행할 수 있는 방법에 대한 단서가 없지만 해결 방법은 이미 좋은 것 같습니다.

누구든지 이 문제에 대한 명확한 해결책을 찾았습니까?

Angular + Angular 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/" }
      ],

이렇게 하면 빌드 시 dist 폴더의 자산 폴더에 아이콘이 복사됩니다(src/assets에서는 볼 수 없음). 또한 app.module.ts 에 작업을 넣는 것은 가져오기를 수정하는 글로벌 프로토타입(예: RxJS 관찰 가능 패치)을 유지하기에 좋은 장소입니다. 이를 통해 코드베이스의 다른 곳에서 Marker를 가져오면 올바르게 작동합니다.

이 문제를 이렇게 해결했습니다.

마커 drawOptions에 기본 아이콘을 제공했습니다.

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

마지막으로 레이어를 표시할 때 imagePath를 설정합니다.

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

@codeofsumit 최신 버전 1.3.1에 이러한 수정 사항이 포함되어 있습니까? 놀랍게도 버전 1.3.1을 사용하고 있으며 여전히 동일한 문제에 직면하고 있습니다.

@vishalrajole 내가 아는 한, 이 문제를 해결하기 위해 제출된 유일한 PR은 #5041이며, 이는 _long_ 시간 동안 요청된 변경 사항과 함께 공개되었습니다.

우리는 또한 훌륭하지만 더 많은 변경 사항이 포함된 대체 솔루션 #5771도 있습니다.

요약하자면, 아무도 이 문제를 해결하기 위해 승인된 PR을 제출하지 않았으므로 도움을 환영합니다!

@perliedman 은 #5771의 관련 변경 사항이 필요합니다. 그렇지 않으면 다른 상황에서 이 문제가 계속 발생합니다. 왜 그냥 병합하지?

안녕하세요 @mb21 님

관련된 #5771 변경이 필요합니다.

실제로 제안된 변경 사항은 2가지 유형입니다.

• 이미지 폴더 위치 대신 각 이미지 경로를 읽어서 빌드 엔진(예: webpack 파일 로더)에 의해 수정된 URL을 재구성/추측하는 대신 있는 그대로 읽습니다.
• CSS에서 다른 모든 기본 아이콘 옵션을 읽어서 모든 구성이 한 곳에 모이도록 합니다.

꽤 많은 코드를 추가하더라도 첫 번째 점을 피할 수 없다면 두 번째 점은 흥미롭습니다.

첫 번째는 실제로 CSS에서 URL을 조작하는 빌드 엔진을 사용하는 개발자에게 유리합니다. 개발자가 구성을 조정하는 데 상당한 시간을 소비하는 새로운 환경(웹팩 파일 로더를 사용하는 경우 사용자 정의 구성이 필요함)에서도 Leaflet _0 구성 정신_을 유지하지만 다른 모든 사람을 위해 상당한 양의 코드를 추가하는 대가를 치르게 됩니다. IMHO _against_ Leaflet 정신입니다(코어에서 일반적인 사용을 지원하고 다른 사용 사례를 플러그인에 위임).
위의 수많은 주석에서 볼 수 있듯이 일반적으로 require(image) 를 사용하여 이미지 경로를 지정하여 처음에 문제를 매우 쉽게 해결할 수 있습니다.

그래서 그 PR을 작성했음에도 불구하고 개인적으로 그것을 핵심에 병합하는 것이 불편합니다. 변경 사항은 _다수에게는 필요하지 않습니다_.

개발자의 삶을 더 쉽게 만드는 데는 확실히 좋지만 문제는 주로 빌드 엔진/프레임워크 래퍼의 상호 작용으로 인해 발생합니다. API.

어쩌면 우리는 더 나은 문서(예: 빌드 엔진/프레임워크와 함께 사용하기 위한 섹션?) 및/또는 플러그인으로 이 문제를 해결해야 할까요?

글쎄요, 제가 복잡한 내용을 이해하고 있는지 잘 모르겠습니다. 그러나 _all_ 이미지 경로가 CSS에 지정될 수 있다면 모든 종류의 개발자에게 분명 좋을 것입니다. webpack-users뿐만 아니라 각 정적 자산에 해시를 추가하는 Rails 또는 Django 자산 파이프라인을 사용하는 저와 같은 사람들도 있습니다...

나는 똑같은 문제를 겪었습니다.
data:image/png;base64,iVBORw0...AAAASUVORK5CYII=")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에서 제안한 대로.

수정을 위한 PR이 있지만 '대다수에게는 변경이 필요하지 않다'는 '느낌' 때문에 병합되지 않는다는 사실이 정말 짜증나더군요. 죄송하지만 PHP, RoR, Python(Django) 및 node.js에서 이 문제로 어려움을 겪고 있는 사람들을 보았는데 이 그룹 외에 "대다수"가 어디에 있다고 생각하십니까? 어떤 호환 가능한 프레임워크를 추천하시겠습니까?

@macwis님 말씀에 동의합니다.

같은 문제가 있고 이 스레드가 매우 깁니다. PR을 병합하지 않는 이유는 무엇입니까?

그것은 느낌이 아니라 사실입니다. 대다수는 프레임워크를 사용하지 않거나 CSS를 사용하지 않는 프레임워크를 사용합니다.
내가 마지막으로 확인했을 때 Leaflet은 unpkg CDN, 즉 번들되지 않은 CSS에서 다운로드되지 않았습니다.

적절한 솔루션은 위의 많은 메시지에서 설명한 대로 기본 아이콘 옵션을 정의하는 것입니다.
많은 프레임워크가 Leaflet 통합 플러그인의 일부로 그렇게 합니다.

보다 자동화된 솔루션을 원할 경우 플러그인을 게시할 수 있는 옵션이 있습니다.

PR을 병합하지 않는 이유는 무엇입니까?

의견을 읽으십시오(예: https://github.com/Leaflet/Leaflet/issues/4968#issuecomment -382639119).

약간의 힌트를 드리고 싶습니다. 프레임워크를 사용할 때도 CDN을 사용할 수 있습니다. 그것이 예를 들어 React App으로 하는 일입니다. 우리는 CDN을 통해 큰 라이브러리를 로드합니다.

@googol7 입력

내가 틀렸다면 정정해 주세요. CDN을 통해 Leaflet을 로드하는 경우 CSS를 변경하지 않는다는 의미일 가능성이 큽니다. 따라서 사용자가 대다수입니다.

@gybs : 내가해야 할 일은 다음과 같습니다.

// 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 구성에 대한 자세한 내용을 알려주셔서 감사합니다.

따라서 CDN에서 Leaflet JS를 로드하지만 앱에 CSS와 이미지를 번들로 포함한다는 의미입니다.

@gybs 예, 여기에서 일어나는

처음 두 단계를 따라야 합니다: 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>

안녕하세요 여러분,

내 PR https://github.com/Leaflet/Leaflet/pull/5771 에서 코드를 가져오는 Leaflet 플러그인 " leaflet-defaulticon-compatibility "를 게시했습니다 .
해당 플러그인을 사용하면 Leaflet 기본 아이콘이 더 이상 아이콘 이미지 경로를 재구축하지 않고 CSS에 완전히 의존합니다. 그렇게 하면 CSS를 기반으로 자산을 자동으로 관리하는(일반적으로 url() 다시 작성하는) 빌드 엔진 및 프레임워크와 완벽하게 호환됩니다.

플러그인(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 코어에 직접 통합하는 것을 선호했을 것이라는 점을 이해할 수 있지만 추가된 코드는 대다수의 최종 사용자에게 쓸모가 없다는 주장이 제기되었습니다. 따라서 핵심을 단순하게 유지하려는 Leaflet 정신에 맞춰 플러그인으로 만들기로 결정했습니다.

작동 방식에 문제나 우려 사항이 있는 경우 플러그인 리포지토리 에서 문제를 자유롭게 여십시오.

사실은 웹팩을 사용하는 경우 이 문제가 발생합니다. 웹팩을 사용하는 사이트가 점점 늘어나고 있는 추세입니다. 이것을 플러그인으로 두는 것은 IMHO처럼 이상적이지 않습니다. 사람들이 이런 종류의 문제를 해결하기 위해 플러그인을 찾는 것을 볼 수 없기 때문입니다(내가 dup을 열었을 때 했던 것처럼).
이것은 기능보다 버그 수정에 가깝기 때문에 이 내부 전단지를 보고 싶습니다...

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

노트:
StackOverflow의가에 각도 6 작은 캐치 _t.animal_에서 응답으로,이 말한다

Angular 6에는 build 및 test 아키텍트에 두 개의 관련 빌더가 있습니다.

build 아래에 넣어야 합니다.

@marko-jovanovic 정보 감사합니다. 하지만 이러한 자산을 사용하지 않고 패키지 크기를 줄이려면 어떻게 해야 합니까?
귀하의 제안은 여전히 ​​해결 방법, IMO에 대한 내 정의에 속합니다.

@HarelM 글쎄, 나는 학교 프로젝트를 끝내기 위해 서두르기 때문에 다른 해결책을 가질 수 없었습니다. 완벽하지 않고 패키지 크기가 증가한다는 것을 알고 있지만 내 솔루션으로 충분했으며 내 답변이 다른 사람들에게도 도움이 되기를 바랍니다.

@marko-jovanovic 귀하의 솔루션은 훌륭하며 다른 사람들을 도울 수 있기를 바랍니다. 해결 방법이 아니라 해결책을 바랄 뿐입니다 :-)

@marko-jovanovic 안녕하세요, 저는 너무 학교 프로젝트(Angular 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 정말 감사합니다. 이 방법으로 문제를 해결하려고 했습니다.

@marko-jovanovic 당신이 저를 구했습니다! 그러나 @HarelM 은 어떻게

대단히 감사합니다. 하지만 저에게는 다음 코드를 제공했습니다: (Angular 6 및 leaflet1.3.4)
첫 번째 단계
(https://codehandbook.org/use-leaflet-in-angular/)
그러나 아이콘이 표시되지 않았습니다.
오류 가져오기 아이콘 이미지
net::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-leaflet 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.

@gybs 핫픽스 주셔서 감사합니다. 다른 프로젝트에서 이 버그를 몇 번 만났습니다. 이 전체 스레드는 수정되지 않았거나 문제로 간주되지 않는다는 점에서 터무니없게 보입니다.

Webpack과 함께 라이브러리를 사용하면 이 오류가 발생하기 때문에 Google에서 저를 여기로 데려왔습니다.

왜 그 이미지가 svg로 인라인되지 않는지 아는 사람이 있습니까?

postcss 및 postcss-inline-svg 로 쉽게 해결할 수 있다고 생각합니다. 아이콘은 외부 png 대신 인라인 svg 파일이 됩니다. 이 문제가 사라지면 아이콘이 더 선명해집니다.

왜 그 이미지가 svg로 인라인되지 않는지 아는 사람이 있습니까?

레거시 브라우저 지원.

@IvanSanchez 감사

그런 다음 두 가지 잠재적인 솔루션을 봅니다. 하나는 이미지를 base64로 인코딩된 .png 로 인라인하는 것입니다. 다른 대안은 .svg 아이콘을 인라인하고 레거시 플랫폼을 대상으로 하는 개발자가 기본 아이콘을 재정의하도록 만드는 것입니다.

이러한 솔루션 중 풀 리퀘스트할 가치가 있는 솔루션이 있습니까?

전단지 에서 지원하는 모든 브라우저 중 svg( caniuse )를 지원하지 않는 브라우저는 다음과 같습니다.

• 인터넷 익스플로러 7 및 8
• 안드로이드 브라우저 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; 

저도 같은 문제가 있습니다(Flask를 사용하는 웹팩이므로 모든 요소는 정적 폴더에 있어야 함). 하지만 @giorgi-m 수정으로는 충분하지 않습니다. '"내보내기"가 읽기 전용입니다' 오류( 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')
})

질문해야 할 더 나은 질문은 왜 이것이 문제를 종결시킨 병합된 코드로 수정되지 않았느냐는 것입니다. 작동하는 해결 방법은 훌륭하기 때문에 기본적으로 작동해야 하며 여전히 미해결 문제여야 합니다.

여러분 모두에게,

전단지는 기본적으로 작동합니다.

Leaflet과 결합된 Webpack(및 기타 빌드 엔진)은 기본적으로 작동하지 않습니다.

https://github.com/Leaflet/Leaflet/issues/4968#issuecomment -399857656: leaflet-defaulticon-compatibility 에서 제안된 솔루션을 참조 하세요.

많은 개발자가 이러한 기능을 Leaflet 코어에 직접 통합하는 것을 선호했을 것이라는 점을 이해할 수 있지만 추가된 코드는 대다수의 최종 사용자에게 쓸모가 없다는 주장이 제기되었습니다. 따라서 핵심을 단순하게 유지하려는 Leaflet 정신에 맞춰 플러그인으로 만들기로 결정했습니다.

로더를 구성한 후에는 또 다른 일반적인 솔루션 인 webpack을 사용합니다.

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: