クリエイター手抜きプロジェクト[199]Photoshop CS/CS2/CS3/CS4編 PhotoshopのパスをKMLに変換する/古籏一浩

投稿:  著者:  読了時間:7分(本文:約3,200文字)


オンライン地球儀といえば、グーグルアースが有名です。そのグーグルアースで地球儀上に、ビルなどの建物の表示や、特定の地点や地域の情報を示す場合に使われているのがKMLというXML形式のデータです。

今回は、Photoshopで作成したパスを、このKMLに変換するためのスクリプトです。これは、日本の県や市町村など地域の形状を、グーグルマップ上に重ねたい(表示したい)ために作成したスクリプトです。

基本的には、地図をPhotoshopでトレースしてやるだけです。ただし、パスはベジエ曲線などはサポートしていません。このため、トレースする地図上でポチポチとクリックして、パスポイントを打っていくだけの作業を行うことになります。

あとは、パスポイントから外側の領域(余計な部分)がないように、ドキュメントサイズを調整します(パス全体を囲む、最小限のドキュメントサイズにしてください)。これは、座標変換にドキュメントのサイズを基準にしているためです。次に、トレースした地図の最小と最大の緯度経度を調べておきます。

これで、準備が完了しました。あとは、以下のスクリプトを実行すればPhoto-shopのパスがKMLに変換されます。できあがったKMLファイルは、グーグルアースでもグーグルマップでも使うことができます。ただ、そんなに精度は期待しないでください。




// デフォルトの色など
opac = "7f"; // 不透明度
red = "ff"; // 赤色
green = "00"; // 緑色
blue = "7f"; // 青色
defColor = opac+blue+green+red;
lineWidth = 1; // 線の太さ
fillFlag = 1; // 塗りつぶす時は1、そうでないときは0

LF = String.fromCharCode(10);
kmlHeader = '< ?xml version="1.0" encoding="UTF-8"? >';
kmlHeader += '< kml xmlns="http://earth.google.com/kml/2.2" >';
kmlHeader += '< Document >< Style id="style1" >< PolyStyle >< color >';
kmlHeader += defColor+'< /color >< fill >'+fillFlag+'< /fill >';
kmlHeader += '< LineStyle >< width >'+lineWidth+'< /width >< /LineStyle >';
kmlHeader += '< /PolyStyle >< /Style >';
kmlHeader += '< Placemark >';
kmlHeader += '< name > < /name >< styleUrl >#style1< /styleUrl >';
kmlHeader += '< Polygon >';
kmlHeader += '< extrude >1< /extrude >';
kmlHeader += '< altitudeMode >relativeToGround< /altitudeMode >';
kmlHeader += '< outerBoundaryIs >';
kmlHeader += '< LinearRing >';
kmlHeader += '< coordinates >';
kmlHeader += LF;

kmlFooter = '< /coordinates >< /LinearRing >< /outerBoundaryIs >';
kmlFooter += '< /Polygon >< /Placemark >< /Document >< /kml >';

docW = activeDocument.width.value;
docH = activeDocument.height.value;

function mapPath(){
var layObj = activeDocument.activeLayer;
if(layObj.kind != LayerKind.SOLIDFILL){
alert("パスで塗りつぶされたレイヤーを選択してから実行してください");
return;
}
var pObj = activeDocument.pathItems[0];
var result = "";
var pp = pObj.subPathItems[0].pathPoints;
for(var i=0; i< pp.length; i++){
var x = pp[i].anchor[0];
var y = pp[i].anchor[1];
x = gLeft + (x / docW) * gDX;
y = gTop - (y / docH) * gDY;
result += x+","+y+",4000" + LF;
}
return result;
}
(function(){
gTop = prompt("上側の緯度を入れて下さい",0);
if (!gTop) return;
gBottom = prompt("下側の緯度を入れて下さい",0);
if (!gBottom) return;
gLeft = prompt("左側の経度を入れて下さい",0);
if (!gLeft) return;
gRight = prompt("右側の経度を入れて下さい",0);
if (!gRight) return;
gTop = parseFloat(gTop);
gBottom= parseFloat(gBottom);
gLeft= parseFloat(gLeft);
gRight= parseFloat(gRight);
gDX = gRight-gLeft;
gDY = gTop-gBottom;
var text = mapPath();
var fileObj = File.saveDialog("保存ファイル名を入れて下さい");
if (fileObj){
var flag = fileObj.open("w");
if (flag == true){
fileObj.write(kmlHeader);
fileObj.write(text);
fileObj.write(kmlFooter);
fileObj.close();
alert("変換が終了しデータを保存しました");
}else{
alert("ファイルが作成できませんでした");
}
}
})();


【古籏一浩】openspc@po.shiojiri.ne.jp
< http://www.openspc2.org/ >

より詳しい手順も用意しておきました。
< http://www.openspc2.org/reibun/Google/StreetView/map/tool/0001/ >

実際に作成した日本のKMLデータと、長野県の市町村のKMLデータも用意してきましたの、で参考にしてみてください。グーグルマップ上で利用するサンプルコードも用意してあります。

また、これ以外のKML&ポリゴンに関しては以下のページを参照してください。
< http://groups.google.com/group/Google-Maps-API-Japan/browse_thread/thread/29a96567d8bf9e69?hl=ja >

ちなみにKMLからIllustratorのパスに変換するアプリケーションもあります。
< http://www.chiri.com/plugx_shape.htm >

・グーグルマップ&ストリートビューAPI 例文辞典
< http://www.openspc2.org/reibun/Google/StreetView/ >

・Google App Engine 例文辞典
< http://www.openspc2.org/reibun/Google/AppEngine/ >

こちらの連載も、よろしく。
・アスキー:「29分でできる! あのサイトの“技”を盗め」第18回
< http://ascii.jp/elem/000/000/401/401817/ >

それから、今月(3/18)発売された「WebDesiging」で3年間連載した「Ajaxハジメマシタ」が終了しました。ご愛読ありがとうございました。

photo
Google Maps API逆引きクイックリファレンス―WEB2.0対応
古籏 一浩
毎日コミュニケーションズ 2006-09
おすすめ平均 star
star簡単にできます
starようやく出ました。使えるGoogleMapsリファレンス。

Google Maps API徹底活用ガイド Google Maps APIv2活用リファレンス Google Maps Hacks 第2版 ―地図検索サービスをもっと活用するテクニック Web API実践リファレンスブック Ajax逆引きクイックリファレンスWeb2.0対応for Windows & Macintosh



photo
改訂第4版 JavaScript ポケットリファレンス
古籏 一浩
技術評論社 2006-10-18
おすすめ平均 star
starJavaScriptを使ったプロジェクトのお供に是非
starJavaScript仮免者以上の方へ
starバランスの良いバイブル
star中級者向けです。

[改訂版] PHP ポケットリファレンス (Pocket reference) 改訂新版 SQLポケットリファレンス (Pocket reference) 改訂第5版 オールカラー  HTML ポケットリファレンス (POCKET REFERENCE) [改訂版] VBScriptポケットリファレンス (POCKET REFERENCE) スタイルシート ポケットリファレンス (Pocket reference)

by G-Tools , 2009/03/23