Leaflet でカスタム画像を使用する (Javascript)

Leaflet でカスタム画像を使用する (Javascript)

どうもfujiharaです。
いよいよ今年も残すところ1ヶ月になりましたね。 毎年この時期になるともらえないお年玉に期待を寄せ始めます。

本日は地図で使用されるLeafletにカスタム画像を使用する方法をご紹介いたします。

Leaflet

Leaflet自体は 地図をカスタマイズして使えるようにする、軽量でマルチブラウザ対応の優れたJSライブラリです。 また、対応するプラグインも多くあり、皆さんも使ったことがあるかもしれません。 特定のポイントにピンを立てたり、オブジェクトをおいたりするのに緯度経度を使用するんですが、 調べているとカスタムの画像でその空間に対して各種Leafletの操作を行えるのことがわかったので 今回はご紹介します。

non geographical map

サンプル

コード


//head (Leaflet の css, js の読み込み)
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

//body (マップを表示させる Dom)
<div id="mapId"></div>

//script
  // ターゲットを指定するときに crs: L.CRS.Simple を指定してあげると緯度経度を使用しないレイヤーになる
  var myMap = L.map('mapId', {
    crs: L.CRS.Simple
  });
  var bounds = [[0, 0], [640, 850]]; //Leaflet の画像を配置する領域を指定
  var image = L.imageOverlay('kanagawa.png', bounds).addTo(myMap);  //imageOverlay に使用したい画像パスを記述
  myMap.fitBounds(bounds); //画像を bounds にフィットさせる
  myMap.setMaxBounds(bounds); //画像の 移動可能領域を bounds に指定

まとめ

これができて何が良いのかと言いますと、カスタム画像に対してLeafletの機能である 画像の拡大やピンチアウトイベント、ドラッグがデフォルトで使用できるところです。あとは皆さんのお好きなようにカスタマイズ してみてください。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ