質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • JavaScript

    16960questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

OSMに表示する画像タイルレイヤーの位置決めをしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,654

capella

score 36

GW期間特にやることもなく、日々Javascriptと格闘しております。

Open Street Mapのカスタマイズを継続しているのですが、やりたい事をひとつ達成すると、またあれがやりたいこれがやりたいと、どんどん欲が出てくるものですね。

前提・実現したいこと

OSM上に手書きメモを残したいと思っているのですが、まさかOSMに直接記録するわけにもいかないため、Leaflet.jsで一枚レイヤーを作り、その上に記録しようと思っております。これはPHP+GDで動的に実現するつもりですが、現段階では考えないことにします。

とりあえずはデフォルトレイヤー上に画像レイヤーを一枚乗せるところまでいきたいと思っています。
また画像ですが、せっかくなので Zoomify でタイル化したものを使うつもりです。

発生している問題・エラーメッセージ

参考1、2ともに、「osm」がデフォルトのマップレイヤー、「tegaki」が今回追加する画像レイヤーです。それぞれのレイヤーは切り替え表示が可能で、ここまでは動作することを確認しています。また「lat」「lng」は、Geolocationで取得した現在地情報が入ります。これも動作確認済みです。

問題は「tegaki」レイヤーを表示したときに表示されるタイル画像の位置決めが出来ないんです。参考1も2もサンプルのタイル画像を表示するところまでは出来るのですが、いずれも表示される場所がアフリカ大陸から北極にかけてドドーンと。画像のX軸方向中心はおそらくグリニッジ子午線と思われます。アトランティス大陸があったと言われるあたりですね(汗)デフォルトの座標が緯度経度ゼロのポイントなんでしょうか。

実際に使う画像は町内程度のサイズ、大きくても市内サイズですので、サンプルのタイル画像ほど大きくはなりません。これを任意の位置に持ってこようにも、どこをいじっても画像の位置が変えられないんです。

参考1 zoomify_layer.jsを使用

var osm = L.tileLayer(
    "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
    }
);

var imageUrl = 'http://mapy.vugtk.cz/kreibich/zoomify/beroun/',
    imageSize = {
        width: 7112,
        height: 5377
    };

var tegaki = new ZoomifyLayer(imageUrl, imageSize);

var map = L.map(
    "map", {
        center: [lat, lng],
        layers: [osm],
        zoom: 15
    }
);

参考2 L.TileLayer.Zoomify.jsを使用

var osm = L.tileLayer(
    "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
    }
);

var tegaki = L.tileLayer.zoomify('http://thematicmapping.org/playground/zoomify/books/', {
    width: 5472,
    height: 3648,
    tolerance: 0.8,
    continuousWorld: true,
    //bounds: ([140.40, 40],[150, 50]),
    attribution: 'Photo: Bjørn Sandvik'
});

var map = L.map(
    "map", {
        center: [lat, lng],
        layers: [osm],
        zoom: 15
    }
);

試したこと

リファレンス を読みながら、tilelayerの要素を中心に、位置情報の設定ができそうなところはいろいろいじってみたつもりです。
惜しいところまで来ているとは思うのですが、あと一歩が進みません。もしかしたらJavascriptというよりもライブラリの仕様なのかもしれません。レイヤー画像の位置決めさえ出来ればいいのですが、不可能なようであれば、代替案などアドバイス頂けたらありがたいです。何卒よろしくお願いいたします。

補足情報(言語/FW/ツール等のバージョンなど)

Leaflet
ZoomifyLayer
Leaflet.Zoomify


さらに試したこと

この際タイル化した画像じゃなく、ただの画像でもいいやと思い、次のソースを試してみました。

var w = 960,
    h = 720,
    url = 'mac.jpg';

var bounds = new L.LatLngBounds([0, 0], [960, 720]);

var tegaki = L.imageOverlay(url, bounds, {
    continuousWorld: true,
    crs: L.CRS.Simple
});


色々調べて「L.CRS.Simple」を使うのではないかと思い、従前のソースのtegaki以下を変更してみました。
結果は変わりませんでした。やはり画像は緯度経度0度付近から始まってしまいます。今回の場合は解像度のせいか、世界地図に縦横比を合わせたみたいに画像が歪んでしまいました。

英語サイトを中心に情報を漁っていますが、自分のように地図レイヤーの上に画像レイヤーを重ねて、切り替えて使いたいという事例には辿り着きませんでした。こういう使い方は一般的ではないのでしょうか。zoomifyを使う場合も含めて、画像レイヤー一枚をleefletで使う事例は多いのですが…知識が浅いせいか応用もききません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

+1

今回はタイル画像ではなく、一枚の画像をマップレイヤーの上に重ねて、無理やり対応しました。

var map = L.map('map', {
    maxZoom: 24,
    minZoom: 1
    //crs: L.CRS.Simple
}).setView([lat, lng], 15);

var imageUrl = 'mac.jpg'
var imageBounds = [[40.0, 140.0], [40.1, 140.1]];
var tegaki = L.imageOverlay(imageUrl, imageBounds).addTo(map);

mapを定義する中で、L.CRS.Simpleとするとデフォルトのマップも表示出来なくなりました。tileLayerの中に設定するとエラーは出ないのですが、効いているのか効いていないのかよく分かりません。
肝はimageBoundsの中の座標設定でした。画像サイズがどのように座標に影響してくるかよく分かりませんでしたので、数値をちょこちょこ変えながら目的の位置に持ってくることが出来ましたが、かなり面倒くさいです。いずれ時間をみて関数作るかライブラリに頼ることを検討しようと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/05 22:21 編集

    > L.CRS.Simpleとするとデフォルトのマップも表示出来なくなりました。
    L.CRS.Simple は画像「だけ」を表示するためのものだと思われます。

    > 数値をちょこちょこ変えながら目的の位置に持ってくることが出来ましたが、かなり面倒くさいです。
    Google Map など座標が表示されるもので当たりをつけるか、書かれておられるように、なにかツールを作成されるのが良いと思います。位置の調整は面倒なものです。

    キャンセル

  • 2016/05/05 23:04

    さきほど解決済みにしました。自分の回答をベストアンサーにするのに躊躇していました(笑)

    キャンセル

0

画像のX軸方向中心はおそらくグリニッジ子午線と思われます。アトランティス大陸があったと言われるあたりですね(汗)デフォルトの座標が緯度経度ゼロのポイントなんでしょうか。

そうです、TMS(Tile Map Service) で x,y が 0,0 は経緯度0度です。

tileLayer の引数に渡しているURL {z}/{x}/{y}.png の {z} はズームレベル、{x}{y} はそこを起点とした画像番号です。

http://cdn-ak.f.st-hatena.com/images/fotolife/s/smellman/20151225/20151225174254.png

【地図タイルについて - smellman's Broken Diary】
http://smellman.hatenablog.com/entry/2015/12/26/054520


Google をはじめ多くのサービスが WMTS(Web Map Tile Service) 形式で {x}{y} を作っているため、その情報であればが多くあります。

【マップタイプ | Google Maps JavaScript API | Google Developers】
https://developers.google.com/maps/documentation/javascript/maptypes#PixelCoordinates

【TrailNote:座標の変換(世界座標、ピクセル座標、タイル座標、緯度・経度)】
http://www.trail-note.net/tech/coordinate/

【タイル座標確認ツール】
http://gsj-seamless.jp/labs/tools/tileCoord.html

【真ん中のタイルを1枚選ぶ:グーグルマップのしくみを探る(5) | mapli.net】
http://www.mapli.net/blogs/google-maps-mechanism/how-google-map-works5/

【Google Mapsのタイル座標とタイルの取得先 - Let's Try It!】
http://www.letstryit.net/2010/10/google-maps.html

【地理院地図|地理院タイル仕様】
http://maps.gsi.go.jp/development/siyou.html


タイル画像の位置決めが出来ないんです。

位置決めについては、画像自体のファイル名を変更するか、ZoomifyLayer を元にプラグインを作成し、getTileUrl のタイミングでタイル番号を適宜ずらすなどが考えられます。ファイル名の変更がお勧めです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/05 21:26

    ありがとうございます。
    非常にグレーなやり方なんですけど、何とか自己解決しました(汗)

    キャンセル

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16960questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。