Help us understand the problem. What is going on with this article?

Leafletで画像を表示してみた

なぜ Leafletで画像?

  • ズーム、パン&ドラッグをおまかせに出来てラク
  • CDNも利用できるのでトランスパイル不可な環境でも利用可

デモとソース

コード

HTML
<div id="map"></div>
index.ts
// File Blob を引数にとり、それを FileReader で読み込みます
const drawMap = (file: File): void => {
  const reader = new FileReader();

  // FileReader の読み込み終了を待って・・・
  reader.onloadend = (): void => {
    const img = new Image();

    // いちおう <img /> の読み込みも待つ
    img.onload = (): void => {
      /*
      LatLngBounds で矩形の範囲を作成します
      第1引数: 北西(左上)の座標
      第2引数: 南東(右下)の座標
      ここでは、南:画像高さ・東:画像幅
      */
      const bounds = new L.LatLngBounds([[0, 0], [img.height, img.width]]);

      // map を id="map" であるHTML要素に挿入します
      const map = L.map('map', {
        // map の最大範囲を上記矩形範囲内に制限します
        maxBounds: bounds,

        // crs (Coordinate Reference System) は 'Simple' を指定します
        crs: L.CRS.Simple,
      });

      // map を上記矩形範囲にフィットさせます
      map.fitBounds(bounds);

      /*
      単一の画像を指定範囲でロードし map に表示します
      第1引数: imageUrl
      第2引数: 指定範囲
      */
      L.imageOverlay(img.src, bounds).addTo(map);
    };

    /*
    <img /> のソースを FileReader の読み込み結果に向けます
    */
    // ts に敗北したキャスト
    img.src = reader.result as string;
  };

  // File Blob の読み込み
  reader.readAsDataURL(file);
};

以上です…

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした