パーソナルツール
現在の場所: ホーム takalog Google Maps API を使って大きい画像を表示(中編)
書いた本
Plone 完全活用ガイド の Chapter 1, 2, 3, 11 を執筆しました。
plone のインストール、使い方から、機能・デザインのカスタマイズ、プロダクトの作り方まで、 plone のすべてがぎゅっと詰まっている書籍になっていると思います。
plone に興味がある人から、すでに使いこなしている方まで、ぜひ読んでみてください。
Plone 完全活用ガイドのサポートページ
« 2017April »
Su Mo Tu We Th Fr Sa
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
このBlogについて
鈴木たかのりです。とりあえず日記っぽく雑多なことを書き込んでいこうと思っています。 zope/plone関係の技術的な内容については http://takanory.net の方にまとめていこうと思います。 コメント・ツッコミはご自由にどうぞ。
twitter facebook linkedin foursquare
カテゴリ
android (16)
av (27)
books (35)
coreblog (49)
ds (22)
emacs (8)
ferret (24)
google (34)
icecream (44)
lego (71)
mac (22)
misc (75)
moblog (277)
movie (33)
pc (44)
plone (339)
puzzle (43)
python (66)
server (67)
snowscoot (9)
software (125)
sports (40)
suidou (30)
winds (47)
 
文書操作

Google Maps API を使って大きい画像を表示(中編)

作成者 takanori投稿日 2007年09月04日 02時13分 最終変更日時 2009年06月12日 18時58分

Google Maps API を使って大きい画像を表示(前編) の最後に

次回では PIL の練習がてら「大きい一枚の画像から Google Maps を使って表示するためのタイル画像を生成する」について書きます。

と書きましたが、オリジナル画像を使って地図を表示する方法についてコードだけ置いて説明しないのもなんだなーと思ったので、説明しようと思います。

ソースコードは kuromap.html です。

// カスタムレイヤーを作成
var tileLayer = new GTileLayer(new GCopyrightCollection(""), 0, 4);
tileLayer.getOpacity = function(){return 1.0;}
tileLayer.isPng = function(){return false;}
// タイル画像を返す関数
tileLayer.getTileUrl = function(tile, zoom) {
  var x = tile.x;
  var y = tile.y;

  return "/tiles/kuro/" + zoom + "/" +x+"_"+y+".jpg";
}

まず最初に GTileLayer インタフェースを使って、カスタム画像を使った地図用のレイヤーを作成します。0,4 はズームサイズの範囲です。

getOpacity メソッドでは 1.0 を返して「このレイヤーは不透明」だよと指定します。透明度があると普通の世界地図が透けて見えます。

また、 getTileUrl メソッドでタイルの座標とズームがわたされたら、タイル画像の URL を返します。 画像 URL は見てのとおり (ズームレベル)/(X座標)_(Y座標).jpg となっています。(座標は左上が 0, 0)

// カスタム図法を作成
var projection = G_NORMAL_MAP.getProjection();
projection.tileCheckRange = function (tile, zoom, tilesize) {
  var tileBounds = Math.pow(2, zoom);
  if (tile.y < 0 || tile.y >= tileBounds) {
    return false;
  }
  if (tile.x < 0 || tile.x >= tileBounds) {
    return false;
  }
  return true;
}

次にカスタム図法とやらを作成します。ここは意味がわかってなくてまんまパクり状態...

var mapType = new GMapType([tileLayer], projection, "");

gmap = new GMap2(document.getElementById("map"), {mapTypes: [mapType]});

で、準備ができたら、カスタムレイヤーとカスタム図法を使ったカスタム地図タイプを作成します。(レイヤーは複数重ねられるので配列)

そして、そのカスタム地図タイプを使って GMap2 を作成すればできあがりです。

あとは普通にデフォルトの表示位置を指定したり、地図を操作するコントローラを追加したりとかいった感じです。

さて、次回こそは「大きい一枚の画像から Google Maps を使って表示するためのタイル画像を生成する」python スクリプトについて書きますかね。

カテゴリ
google google
トラックバック用URL:
http://takanory.net/takalog/758/tbping
コメントを追加

下のフォームに記入してコメントを追加できます。平文テキスト形式。

(必須)
(必須)
(必須)
(Required)
Enter the word

Powered by vine linux, python, zope, plone, coreblog