web-dev-qa-db-ja.com

リーフレットマーカーが本番環境で見つかりません

リーフレットに問題がありました。

開発ではすべて正常に機能していますが、本番環境では、アプリがmarker-icon.pngおよびmarker-shadow.pngの画像を見つけることができません。

パスassets/station/images/marker-icon.pngを探しています

Leafletjsは私のhtml.erbファイルにこのように含まれています

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />

誰かが助けることができれば！

javascriptruby-on-railsleafleterb
8
maluss

これはLeafletの既知のバグです。根本的な問題は、バンドル中にLeafletのアイコン画像の場所が誤って参照されることです。

これが問題であることを確認できます。このパラメーターの検証を購入してください（実行時）：L.Icon.Default.prototype._getIconUrl()。
正しい値は<some_directory>/leaflet/dist/images/である必要があります。
ただし、このバグが発生している場合、その値は次のとおりです。data:image/png;base64,iVBO....K5CYII=")undefined

使用しているバンドルローダー（Vanila WebPack、Angular-Cli-WebPackのスーパーセットなど）に応じて、さまざまなソリューション（回避策）があります。

ここで元の問題を確認できます（および、バンドルローダーに応じて異なる解決策もあります）。
https://github.com/Leaflet/Leaflet/issues/4968

Angular-Cliを使用している場合、この魂はあなたのために働きます。 Makerを設定する前に、次のコードを追加してください。

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;

（このコードは、壊れたマーカーのURLをアセットフォルダーからの有効な画像に変更します）。

そして、このコードをangular.json（Angularバージョン> = 6.xの場合）またはangular-cli.json（Angularバージョン< = 5.x）：

"assets":
[
   "src/favicon.ico",
   "src/assets",
   {
      "glob": "**/*",
      "input": "node_modules/leaflet/dist/images/", // you may need to change this path, according to your files structure
      "output": "./assets/"
   }
] ...

（このコードは、元のマーカー画像を/assetsフォルダーにコピーして、angular-cliがそれらをロードできるようにします）

11
Gil Epshtain

以下のコードは私のために働いた

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")
});
4
Dostonbek Oripjonov
import "leaflet/dist/images/marker-shadow.png";

webpackを使用している場合は、画像をインポートするだけです

2
user9547708

おそらく、現在のバージョンのリーフレットにアップグレードしてみてください。マーカーアイコンでこの問題が発生したことはありません。

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.css
https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.2/leaflet.js
0
Alex G Rice

ParcelをTypeScriptおよびLeaflet v1.4（npmを介してインストール）と組み合わせてバンドラーとして使用して同様の問題に遭遇し、それを解決しましたギルの答えを少し異なる方法で使用します。

import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import L, {
  LatLngExpression,
  FeatureGroup,
  TileLayerOptions,
  LayerEvent,
  LeafletMouseEvent,
  Marker,
  Layer,
  icon,
  LayerGroup,
  GeoJSON
} from 'leaflet';
import 'leaflet-draw';
import iconRetinaUrl from './assets/marker-icon-2x.png';
import iconUrl from './assets/marker-icon.png';
import shadowUrl from './assets/marker-shadow.png';

// Assign the imported image assets before you do anything with Leaflet.
Marker.prototype.options.icon = icon({
  iconRetinaUrl,
  iconUrl,
  shadowUrl,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41],
});

また、別のファイルで、必要な宣言を追加して、TypeScriptでpng画像をインポートできるようにしました。

declare module "*.png" {
  const content: string;
  export default content;
}

また、これらの画像へのアクセスを必要とするLeafletプラグインを使用する場合は、明示的に割り当てる必要がある場合があることにも注意してください。リーフレット描画プラグインにもそれが必要でした。例：

        map.addLayer(drawLayer);
        const drawControl = new L.Control.Draw({
          draw: {
            circle: false,
            circlemarker: false,
            marker: {
              icon: Marker.prototype.options.icon, // Assign icon explicitly
            },
          },
          edit: {
            featureGroup: drawLayer,
          },
        });
        map.addControl(drawControl);
        map.on(L.Draw.Event.CREATED, event => {
          const layer = (event as LayerEvent).layer;
          drawLayer.addLayer(layer);
        });
0
Erik Vullings