スレッド:GoogleMap
GoogleMap 投稿者:マーシー 投稿日:2014/11/21(Fri) 22:48:15 home No.709
あにねこさん、こんばんわ。

とりあえず作ってみました。素人にはすごく大変。(-_-;)(参照test4)

'http://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png //というのは

"http://cyberjapandata.gsi.go.jp/xyz/std/"
+ zoom.toString() + "/" + tile.x.toString() + "/"
+ tile.y.toString() + ".png";
//にすごく似てますけど、べつものですか?
Re: GoogleMap 投稿者:マーシー 投稿日:2014/11/22(Sat) 08:56:30 home No.710
まだ著作権は表示できていません。

function stdMap() {   // 国土地理院標準地図
stdMap.prototype.tileSize = new google.maps.Size(256,256);
stdMap.prototype.maxZoom = 17;
stdMap.prototype.name = '地理院地図';
stdMap.prototype.alt = '国土地理院標準地図';
stdMap.prototype.getTile = function( tile, zoom, ownerDocument ) {
var tileImg = ownerDocument.createElement('img');
var url= "http://cyberjapandata.gsi.go.jp/xyz/std/" + zoom.toString() + "/" + tile.x.toString() + "/" + tile.y.toString() + ".png";
tileImg.src = url;
tileImg.style.width = this.tileSize.width + 'px';
tileImg.style.height = this.tileSize.height + 'px';
return tileImg;
};
}  // 国土地理院淡色地図も同様に
var mapOpt = {
zoom: Number(param.zoom),
center: new google.maps.LatLng(param.lat, param.lng),
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControlOptions: {
mapTypeIds: [
'地理院地図',
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID,
'地理院淡色'
],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var mapDiv = document.getElementById('map_canvas');
var gmap = new google.maps.Map(mapDiv,mapOpt);
gmap.mapTypes.set( '地理院地図', new stdMap() );
gmap.mapTypes.set( '地理院淡色', new palMap() );
gmap.setMapTypeId( '地理院地図');
Re: GoogleMap 投稿者:あにねこ 投稿日:2014/11/24(Mon) 08:08:43 No.711
マーシーさん、おはようございます。

とりあえず、わかるところだけ。

> 'http://cyberjapandata.gsi.go.jp/xyz/std/${z}/${x}/${y}.png //というのは
>
> "http://cyberjapandata.gsi.go.jp/xyz/std/"
> + zoom.toString() + "/" + tile.x.toString() + "/"
> + tile.y.toString() + ".png";
> //にすごく似てますけど、べつものですか?

どちらも地理院タイルの画像ファイルのURLを指定しています。
http://portal.cyberjapan.jp/help/development/siyou.html#siyou-url
Re^2: GoogleMap 投稿者:マーシー 投稿日:2014/11/26(Wed) 11:31:44 home No.712
あにねこさん、こんにちは。返信ありがとうございます。

${z}/${x}/${y}はそのまま使えませんでした。変数として使っているのですか?

もう一つ質問があるのですが、APIがV3になってから、
スクリーンオーバーレイ関数はなくなってしまったのでしょうか?
著作権と中央マークをそれで表示しようと思い試行錯誤していたのですが・・。
http://www.ajaxtower.jp/googlemaps/ggroundoverlay/index3.html
には書いてあるのですが、うまくいかず V2のように思われます。
Re^3: GoogleMap 投稿者:あにねこ 投稿日:2014/11/26(Wed) 22:43:23 No.714
マーシーさん、こんばんは。

> ${z}/${x}/${y}はそのまま使えませんでした。変数として使っているのですか?

URLを示すためのテンプレートとして使っていると思います。
つまり、OpenLayers のライブラリの中で、${z} は ズームレベル、
${x} は タイル座標のX値、${y} は タイル座標のY値 に書き直すように
プログラムされているということです。当然、このテンプレートの書き方は
OpenLayers 固有の書き方なので、Google Maps API で同じ書き方を
しても通用しません。

> もう一つ質問があるのですが、APIがV3になってから、
> スクリーンオーバーレイ関数はなくなってしまったのでしょうか?
> 著作権と中央マークをそれで表示しようと思い試行錯誤していたのですが・・。
> http://www.ajaxtower.jp/googlemaps/ggroundoverlay/index3.html
> には書いてあるのですが、うまくいかず V2のように思われます。

V3 の API にある関数が含まれているかどうかは、
https://developers.google.com/maps/documentation/javascript/?hl=ja
の API リファレンスでご確認ください。
で、GScreenOverlay で探してみてもないみたいですね。
Re^4: GoogleMap 投稿者:マーシー 投稿日:2014/11/27(Thu) 08:48:42 home No.715
あにねこさん、おはようございます。

> OpenLayers のライブラリの中で、${z} は ズームレベル、
> ${x} は タイル座標のX値、${y} は タイル座標のY値 に書き直すように
> プログラムされているということです。

そうだんたんですか。ありがとうございました。

著作権は先日のブログを参考にして、なんとかつくってみました。
このような使い方は違反にならないと思いますがどうでしょうか?

後は、地図にくっついてきてしまう十字マークを何とかしたいと思います。

var gsiLOGO = null; // 国土地理院ロゴマーク
gsiLOGO = document.createElement('div');
gsiLOGO.innerHTML = "<a href='http://portal.cyberjapan.jp/' target='_blank'>"
+ "<img src='../logo/tiriin1.gif' width='32' height='23' alt='国土地理院ホームページ'></a>";
gsiLOGO.style.display = "inline";
gmap.controls[ google.maps.ControlPosition.BOTTOM_LEFT ].push( gsiLOGO );

google.maps.event.addListener( gmap, 'maptypeid_changed', function() {

var mapTyp = gmap.getMapTypeId();
if ( mapTyp == '地理院地図' || mapTyp == '地理院淡色') {
gsiLOGO.style.display = "inline";
} else {
gsiLOGO.style.display = "none";
}
});
Re^5: GoogleMap 投稿者:あにねこ 投稿日:2014/11/27(Thu) 19:04:32 No.717
マーシーさん、こんばんは。

> 著作権は先日のブログを参考にして、なんとかつくってみました。
> このような使い方は違反にならないと思いますがどうでしょうか?

「国土地理院コンテンツ利用規約」
http://portal.cyberjapan.jp/help/termsofuse.html
「国土地理院シンボルマークの使用について」
http://www.gsi.go.jp/kohokocho/kohokocho40187.html
を読むと、リンク先は国土地理院ホームページにするように
と書いてありますが、具体的なURLは何なのか、
http://portal.cyberjapan.jp/
で良いのかは書いていないんですよね。
サイトサンプル集では、
http://portal.cyberjapan.jp/help/termsofuse.html
をリンク先にしていますので、私もそれに倣っています。
Re^6: GoogleMap 投稿者:マーシー 投稿日:2014/11/28(Fri) 08:58:10 home No.718
あにねこさん、おはようございます。
返信ありがとうございます。

ロゴを2種類入れて、片方は利用規約にしてみました。

アイコンのポップアップの仕方がぎこちなくてなんか変です。
Re^4: GoogleMap 投稿者:マーシー 投稿日:2014/11/27(Thu) 13:43:09 home No.716
あにねこさん、こんにちは。
中心マークできました。(参照)

MATSUPさんのブログを参考にしました。

http://matsup.blogspot.jp/2011/03/gpsgoogle-maps-api-v3_30.html

Google Earth では、ScreenOverLay を使える事は知っていましたが、
どういう風にしてつなげるのかがわかりませんでした。
あにねこさんから教ていただいたコードでつなげてみました。

var url1 = baseurl + 'ctrcrs.kml'; //名前はctrcrsにしました
var crsLayer = new google.maps.KmlLayer(url1, {
preserveViewport: true
});

document.getElementById('crs').onchange = function() {
crsLayer.setMap(this.checked ? gmap : null);
};         //デフォルトでは非表示

<div style="float:left;"><input id="crs" type="checkbox" />中心cross</div>
Re^5: GoogleMap 投稿者:マーシー 投稿日:2014/11/28(Fri) 16:35:59 home No.719
KMLチュートリアルのサンプル集からいただきました。
https://developers.google.com/kml/documentation/kml_tut?hl=ja

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<ScreenOverlay>
<name>Simple crosshairs</name>
<description>This screen overlay uses fractional positioning to put the
image in the exact center of the screen</description>
<Icon> <href>http://developers.google.com/kml/documentation/images/crosshairs.png</href>
</Icon>//このセンターマークは白色です。好きな色の好きなマークに変更して
<overlayXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
<screenXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
<rotationXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
<size x="0" y="0" xunits="pixels" yunits="pixels"/>
</ScreenOverlay>
</kml>

 //ctrcrs.kmlというファイル名で保存しました。

- WebForum -