Leaflet: L.Icon.Defaultは間違った画像URLをもたらします

• サーバーにアクセスできる公開Webページがあるので、問題を自分で再現できますか？
• どのOSとWebブラウザを使用していますか？

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とleafletの両方を使用して、2つのまったく異なるプロジェクトで突然同じ問題が発生しました。
マップにマーカーを追加すると、画像が見つかりません。 ブラウザはこのエラーをスローします：

わかりました、何かを手に入れました。

したがって、画像（アイコンと影）が見つからないため、マーカーは現在このように見えます。

リーフレットのこの関数：

_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正規表現の魔法によるものです。 私はそれを修正できないので、最後の2文字を切り取ってみました。これにより、次の関数が生成されます。

_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すでにマーカーデータのURLが設定されているので、マーカーの画像を使用して伸びています

マーカー画像をハードコーディングするこのコミットに関連している可能性がありますか？
https://github.com/Leaflet/Leaflet/commit/837d19093307eb5eeb1fca6536962a1ab1573dd5

@ Radu-Filip私はあなたのPRにこれらの変更を加えることでそれを修正することができました-これが他にどのような影響を与える可能性があるかはわかりません：

問題は、あなたが言ったように、基本的にすべてのアイコンのデフォルト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)?[\"\']?\)$/, '') : '';
}

また、影のアイコンが呼び出されなかったため、 detectIconPath周辺のif / elseを削除する必要がありました。 これで、すべてがデフォルトのマーカーアイコンで機能します。カスタムアイコンについてはよくわかりません。

@codeofsumitええ、私はここで似たようなことをしましたhttps://github.com/Radu-Filip/Leaflet/tree/temp
今のところハックとして使用します。 うまくいけば、webpackなどを使用している人のためのより将来の証拠となる解決策があるでしょう

@ Radu-Filipは、そのソリューションでPRを更新してもよろしいですか？ マージされる可能性があります。

@codeofsumitが完了しました、それが通過するかどうか見てみましょう

こんにちは、

何かが足りないかもしれませんが、Webpack構築のこの問題は、 L.Icon.Default動作をオーバーライドするLeafletプラグインで簡単に対処できるようです。

デモ： http ：

このアプローチを使用すると、トリッキーなRegExpを取り除くことができ、デフォルトのマーカー画像がインライン化されます（ハードコーディングによって）。これは、とにかく小さな画像に対してWebpackが意図した結果の1つです。

考えられる欠点は、各マーカーに独自のbase64アイコンがあり、ブラウザーがそれをキャッシュできるかどうかわからないことです…（PR＃5041の場合と同じ欠点）
たとえば、レイヤーコントロールアイコンのように、画像のsrc属性に配置するのではなく、背景画像として設定することで、洗練されたものを想像することができます。
このアイデアには隠れた罠があるかもしれません（編集：そのように聞こえます）。そうでなければ、そもそも画像パスの検出を回避していたので、ずっと前に実装されていたはずです。

デモ： http ：

プラグインアプローチの最大の利点は、Webpackプロジェクトに対してのみこの特定の動作を維持することです。

お役に立てれば。

ところで、ここには本質的に何かが間違っているように思えます。

Leafletは、画像への「複雑な」パス検出を行います。画像は、CSSファイルと比較して事前定義された場所にある必要があります。

ただし、webpackビルドプロセスはそのCSSをバンドルしており、開発者がwebpackに要求する内容（画像の要求など）に応じて、画像も移動する（または移動しない）場合があります（名前を変更します）。
したがって、webpackを使用すると、リーフレットの検出は確実に失敗します。

PR＃5041は、Base64画像を各マーカーに複製することを犠牲にして、webpackが画像をCSSにインライン化する場合を受け入れるためのトリックのようなものです。 Webpack以外のユーザーのコストについても話していません。

PR＃4979は、（ファイルが見つからないために）webpackビルドエラーメッセージを防ぐためだけのものであり、実際の画像パスの解像度をまったく処理するようには見えません。
開発者は手動でL.Icon.Default.imagePath指定すると思いますか？
@jasongroutと@Eschon 、あなたはそれをどのように管理したかを共有できますか？

私は本当にそれを管理していません。 私はデフォルトのアイコンを使用していないので、このバグは今まで私にとって問題ではありませんでした。

こんにちは。このライブラリの1.0.1バージョンを使用して、このパスエラーを再現できることをお知らせします。
リーフレットのDrupalモジュール（7.x-1.x-dev）と一緒に使用していますが、モジュールに報告された問題があります： https ：

私が見る限り、「問題」は_getIconUrl関数にありますか？ L.Icon.Default.imagePath後にスラッシュがないため、たとえばDrupalの画像パスは「 /sites/all/libraries/leaflet/imagesmarker-icon.png 」のように生成されます。 画像パスとマーカー画像ファイル名（marker-icon.png）の間は、スラッシュ/である必要があります。

こんにちは@ anairamzap-mobomo、

あなたが報告することは別の問題のように聞こえます。

残念ながら、フレームワーク（Drupal）への移植が関係しているように思われるため、最初に、バグがその移植の動作に関連していないことを確認する必要があります。

バニラJSを含むLeaflet1.0.xには、末尾のスラッシュが正しく含まれています： http ：

たとえば、 http：//cgit.drupalcode.org/leaflet/tree/leaflet.module#n51を参照してL.Icon.Default.imagePathはDrupalモジュールによってオーバーライドされます。

そのモジュールはLeaflet0.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： 'images / marker-icon.png'、
shadowUrl： 'images / marker-shadow.png'、
}）;

leaflet.jsファイルを変更せず、マーカー画像をリーフレット配布から通常の画像フォルダーにコピーし、投稿したフラグメントをカスタムアイコンとして使用しました。

crob611のソリューションは、元のcssでhttpとして参照されていて、私のサイトはhttps経由で提供されていたため、使用できませんでした。

`` `function onLocationFound（e）{
var radius = e.accuracy / 2;
var customDefault = L.icon（{
iconUrl： 'marker_icon_2x'、
shadowUrl： 'marker_shadow.png'
}）;
L.marker（e.latlng）.addTo（map）
.bindPopup（ "このポイントから" +半径+ "メートル以内にいます"）.openPopup（）;
L.circle（e.latlng、radius）.addTo（map）;
}

新しいアイコンを設定するにはどうすればよいですか？

コンストラクターでカスタムアイコンを作成します（Aureliaフレームワークを使用しています）

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

次に、attached（）メソッドにマーカーを追加するときに使用します

        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 ：

この問題の適切な修正が行われるまで、 _getIconUrl() （またはその他）が予期せずにデータUIに遭遇したときに、 console.warnなどを介してGithub IssueURLをポイントするランタイム警告を追加することをお勧めします。そのように。

それは同じ問題を抱えている人々を適切な場所に連れて行き、回避策を提案します（私のために働いたこのようなもののように）。

これが、React（開発ビルド）が開発者が問題を特定するのに役立つ方法です。

反応の問題から、@ 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関数はパスurl("http://localhost:8080/2273e3d8ad9264b7daa5bdbf8e6b47f8.png")に対して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[\"\']?\)$/, '')に変更しました。

私も現在この問題を抱えています。
Leaflet1.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;

次にrequireを使用しますこの問題の場合：

                  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として読み込んだ場合のChromedevtoolsのパフォーマンスビューは次のとおりです。

比較すると、インラインbase64として1000個のマーカーアイコンがあります（タイムラインのスケールが異なることに注意してください、申し訳ありません）：

ご覧のように、インライン画像を使用すると、何らかの理由でレイヤーの構成が遅れ、全体の負荷が約1秒長くなります。

カジュアルな使用の場合、これはおそらく問題ではありませんが、多くのマーカーを使用する場合は、これが適切である可能性があります。

この長期的な対処方法の提案：

• コードレビューに記載されている問題に対処するために＃5041を修正します。 これにより、インラインアイコンがすぐに機能するようになります
• インラインアイコンが使用されている場合は、これが理想的ではない可能性があることを示すために警告をログに記録します

もう1つのオプションは、画像パスを検出するための古い（0.7）方法に戻すことですが、解決できない他の問題があったことはわかっています。

こんにちは@perliedman 、

素晴らしいプロファイリング！
これは、インライン画像を再利用することの欠点に関して私が持っていた疑問に答えます。

実際、PR＃5041をリファクタリングして、アイコン画像がCSSにインライン化されたときにLeafletがすぐに機能するようにすることができます（webpackなどのビルドエンジンによって）。
私が考えることができる解決策（ほとんど前述のPRに似ています）は、画像ごとに1つのクラスを作成することを意味します。したがって、CSS（およびおそらくJS）ファイルサイズが数十バイト増加します。

例： http ：

ただし、前述したように、互換性の理由（ビルドエンジンを使用）によるこのような変更が、これらのフレームワークとビルドプロセスを使用しないユーザーに影響を与えるのは残念です。

一方、 IconDefaultクラスオプションでハードコードされたファイル名を削除し、フルパス（ファイル名を含む）をCSSに委任できるため、結果は「よりクリーン」になる可能性があります。
（私が正しく理解していれば）この複雑な検出の全体的なポイントは、画像の場所をJSファイルから切り離し、代わりにCSSファイルに対する相対的な場所に依存することであるため、これは非常に興味深いものです。 したがって、ファイル名でさえCSSで定義されていることは私には理にかなっています。

ただし、 imagePathオプションとの互換性を維持しようとすると、以前に検出されたイメージパスを作り直して、先頭のパスを置き換えてファイル名を保持する必要があるため、複雑になる可能性があります。 したがって、そこで新しい正規表現を導入します。

最後に、これがすべてのケースをカバーするかどうかはわかりません。
ビルドプロセスは高度にカスタマイズできるため、アイコンイメージなどの静的アセットに関して非常に異なる状況が発生します。 上記でも失敗するコーナーケースがまだあるかもしれません。

@ghybs私はその例が好きです（http://playground-leaflet.rhcloud.com/dulox/）！

多分やり過ぎかもしれませんが、このCSSでアイコン_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,output

paddingを使用してiconAnchorを決定したという事実は好きではありません。これは、最終的にLeafletが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にはハイコントラスト拡張機能があるように見えますが、リーフレットで何も壊さずに色を変更するだけです。

残念ながら、Firefoxは理解できないCSSプロパティを削除します。
ただし、画像のCSSデータ型は、 cursorなど、他のいくつかのルールで使用できます。これは、Firefoxで色のオーバーライド設定が使用されている場合でも正常に機能するように見えます。
http://playground-leaflet.rhcloud.com/yov/1/edit?html、css、output

私はそれがあまりエレガント使用することを見つけるcursorの代わりにbackground-imageその使用量は、我々はCSSスタイリングを通じてマーカーを作るために何をするのかから更に多くなるので、...とにかく、これはすでにパスのハックです検出のみ。

Webpackの問題に対処するために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フォルダーのassetsフォルダーにコピーされます（src / assetには表示されません）。 また、回避策をapp.module.ts配置することは、グローバルプロトタイプ変更インポート（RxJS監視可能パッチなど）を維持するのに適した場所です。 これで、コードベースのどこにマーカーをインポートしても正しく機能します。

私はこの問題をこのように修正しました。

マーカー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であり、これは_長い_時間にわたって要求された変更で開かれています。

代替ソリューション＃5771もあります。これは優れていますが、より多くの変更が含まれています。

したがって、要約すると、これに対処するために承認されたPRを提出した人は誰もいません。助けを歓迎します！

@perliedmanの見た目からは、＃5771の関連する変更が必要です。 そうしないと、さまざまな状況でこの問題が発生し続けることになります。 なぜそれをマージしないのですか？

こんにちは@ mb21 、

＃5771の関連する変更が必要です

実際、提案された変更には2つのタイプがあります。

• 画像フォルダの場所だけでなく、各画像パスを読み取るため、ビルドエンジン（webpackファイルローダーなど）によって変更されたURLは、再構築/推測されるのではなく、そのまま読み取られます。
• CSSから他のすべてのデフォルトアイコンオプションを読み取り、すべての構成が1か所に集められるようにします。

2番目のポイントは、かなりのコードを追加しても、1番目のポイントを回避できない場合は興味深いものです。

1つ目は、実際には、CSSのURLをいじるビルドエンジンを使用している開発者に好意的です。 これにより、開発者が構成の調整にかなりの時間を費やす新しい環境でも、Leaflet _zero config spirit_が維持されます（webpackファイルローダーを使用する場合は、とにかくカスタム構成が必要です）。 IMHO _against_ Leaflet spiritです（コアでの一般的な使用法をサポートし、他のユースケースをプラグインに委任します）。
上記の多数のコメントに示されているように、通常はrequire(image)を使用して画像パスを指定することで、最初に問題を非常に簡単に解決できます。

そのため、そのPRを作成したとしても、個人的にはそれをコアにマージすることに不快感を覚えます。 変更は_過半数には必要ありません_。

彼らは確かに開発者の生活を楽にするのに良いですが、問題は主にビルド​​エンジン/フレームワークラッパーの相互作用によって引き起こされ、それぞれが独自の特性を持ち、既存のものを使用してリーフレットに現在の画像を簡単に伝える方法がありますAPI。

たぶん、より良いドキュメント（ビルドエンジン/フレームワークでの使用に特化したセクションなど）やプラグインを使用して、この問題に対処する必要がありますか？

まあ、私は複雑さを理解しているかどうかはわかりません。 しかし、CSSで_all_イメージパスを指定できれば、あらゆる種類の開発者にとっては間違いなく素晴らしいことです。 Webpackユーザーだけでなく、各静的アセットにハッシュを追加する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);

codeofsumitによって提案されたように。

私はそれが本当に迷惑であり、それを修正するためのPRがあるが、「大多数にとって変更は必要ない」という「感覚」のためにマージされなかったという事実を見つけました。 申し訳ありませんが、PHP、RoR、Python（Django）、node.jsで苦労している人を見かけましたが、これらのグループ以外の「大多数」はどこにあると思いますか？ どの互換性のあるフレームワークをお勧めしますか？

@macwisに同意し

同じ問題があり、このスレッドは非常に長いです。 PRをマージしてみませんか？

それは感覚ではありません、それは事実です：大多数はフレームワークを使用しないか、CSSをいじらないものです。
前回チェックしたとき、Leafletはunpkg CDNからダウンロードされたものではありませんでした。つまり、バンドルされておらず、いじられていないCSSです。

上記の多くのメッセージで説明されているように、適切な解決策はデフォルトのアイコンオプションを定義することです。
多くのフレームワークは、Leaflet統合プラグインの一部としてこれを行います。

より自動化されたソリューションが必要な場合でも、プラグインを公開するオプションがあります。

PRをマージしてみませんか？

コメントを読んでください。例： //github.com/Leaflet/Leaflet/issues/4968#issuecomment -382639119

ちょっとしたヒントをお伝えしたいと思います。フレームワークを使用する場合にもCDNを使用できます。 これは、たとえばReactアプリで行うことです。 CDNを介して大きなライブラリをロードします。

@ googol7ご

私が間違っている場合は訂正してください。CDNを介してLeafletをロードする場合、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 */

webpackの設定は次のようになります。

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

@ googol7設定の詳細をありがとうございます。

つまり、CDNからLeaflet JSをロードしますが、CSSと画像をアプリにバンドルします。

@ghybsはい、それがここで起こっていることだと思います。

必ず最初の2つのステップに従ってください： //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>

こんにちは、みんな、

PRhttps ：//github.com/Leaflet/Leaflet/pull/5771からコードを取得するLeafletプラグイン「 leaflet-defaulticon-compatibility 」を公開しました。
そのプラグインを使用することにより、Leaflet Default Iconはアイコンイメージパスの再構築を試みなくなりますが、CSSに完全に依存します。 そうすることで、CSSに基づいてアセットを自動的に管理する（通常はurl()書き直す）ビルドエンジンおよびフレームワークと完全に互換性があります。

プラグイン（CSS + JS）_after_Leafletをロードするだけです。
例：webpack：

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

（デモ）

多くの開発者がそのような機能をLeafletコアに直接組み込むことを望んでいたことは理解できますが、追加されたコードは大多数のエンドユーザーにとって役に立たないと主張されています。 そのため、コアをシンプルに保つというLeafletの精神に沿って、プラグインにすることにしました。

プラグインリポジトリの動作に問題や懸念がある場合は、

実際には、webpackを使用している場合、この問題が発生します。 webpackを使用するサイトが増える傾向にあります。 これをプラグインとして配置することは理想的ではありません、私見です。この種の問題を修正するプラグインを探している人がいないためです（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の_t.animal_からの回答によると、Angular6には小さな問題があります。

Angular 6では、アーキテクトbuildとtest 2つの関連するビルダーがあることに注意してください。

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

リーフレット1.3.4とvue2-leaflet1.2.3を使用したソリューション：

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

私の2セント：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ホットフィックスに感謝します。 私はさまざまなプロジェクトでこのバグに数回遭遇しました。 このスレッド全体は、修正されていないか、問題と見なされていないというのはばかげているようです。

Webpackでライブラリを使用するとこのエラーが発生したため、googleが私をここに連れてきました。

それらの画像がsvgとしてインライン化されない理由を誰かが知っていますか？

これはpostcssとpostcss-inline-svgで簡単に解決できると思います。 アイコンは、外部のpngではなく、インラインのsvgファイルになります。 この問題がなくなると、アイコンはより鮮明になります。

それらの画像がsvgとしてインライン化されない理由を誰かが知っていますか？

レガシーブラウザのサポート。

ありがとう@IvanSanchez

次に、2つの解決策が考えられます。 1つは、base64でエンコードされた.pngとして画像をインライン化することです。 もう1つの方法は、 .svgアイコンをインライン化し、レガシープラットフォームをターゲットとする開発者を作成してデフォルトのアイコンを上書きすることです。

これらのソリューションのいずれかをプルリクエストする価値がありますか？

リーフレットでサポートされているすべてのブラウザのうち、以下はsvg（ caniuse ）をサポートしていません。

• IE7および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; 

私も同じ問題を抱えています（Flaskを使用しているwebpackなので、すべての要素は静的フォルダーにあるはずです）が、「exports is read-only」エラーが発生するため、@ giorgi-mの修正では不十分です（ Firefox、pngインポートにリンクされているようですか？）
問題は解決されたようですが、1.4.0でも問題が発生しているので、修正方法は何でしょうか。

vue2-leaflet2.0.2およびleaflet1.4.0でこの問題が発生しています。

これはかなり前から存在していたようであり、提示されたソリューションの半分は機能していないようです。

誰かがこの問題の根本を理解しましたか？

バージョン「vue2-leaflet」：「2.0.3」リーフレット「leaflet」：「1.4.0」でも同じ問題が発生します。

webpackも実行しています。

この同じ問題で見つかった解決策を使用して、vue2-leaflet2.0.3とleaflet1.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の精神に沿って、プラグインにすることにしました。

ローダーを構成したら、もう1つの典型的なソリューションである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：