あにねこ電脳覚書 - サポート掲示板

現在の地理院地図版ルート地図では、OpenLayers 2.13.1 を利用しています。
大幅にバージョンアップされた OpenLayers 3.X がだいぶ前から出ていますが、
まだまだ開発中で、必要な機能が色々足りず、ルート地図への利用は見合わせていました。
しかし、Ver. 3.11.2 になっていい感じに出来上がってきたので、使ってみました。
試作した新ルート地図は↓です。
http://anineco.org/routemap.html?lat=36.385140&lon=138.638144&zoom=13&url=151121/routemap.kml
OpenLayers 3 による目玉の新機能には、次のものがあります。これ、なかなか良くないですか？

・シンボルの右上にタイトル文字列が表示される
・Shift+Alt を押しながらマウスの左ボタンで地図を回転できる。地図右上の[↑]ボタンで北向きに復帰。

まだ、新ルート地図で実現できていない機能は次の通り。

・シンボルをクリックで詳細情報を小窓でポップアップ
・地図の切り替え
・中心点の十字の表示

他にも幾つか問題点があり、これらがクリアできたら、公開する予定です。

あにねこさん、おはようございます。

新ルート地図見せていただきました。
特に地図が回転するのがいいですね。

完成を楽しみにしています。

マーシーさん、おはようございます。

完成までまだまだかかりそうですが、冬休みに入って時間ができたので、
ちょっと進展しました。URLは先の書き込みのものと同じです。

・シンボルをクリックで詳細情報を小窓でポップアップ
これができるようになりました。小窓の見栄えはまだまだ調整する必要があります。

・中心点の十字の表示
これはまだですが、どうやれば良いかはわかってきましたので、
そのうち実現できそうです。

・地図の切り替え
これもやり方はわかって来たのですが、切り替えたい対象のGoogleの衛星画像
（全国をカバーしていて都合が良い）がGoogleのポリシーで衛星画像のみを
読み込んで利用することが禁止されているらしく、
OpenLayers 3 では用意されていません。実現は棚上げになりそうです。

Ver. 3.15.1 が出ていたので、試してみました。
テスト用URLは変更なしです。
http://anineco.org/routemap.html?lat=36.385140&lon=138.638144&zoom=13&url=151121/routemap.kml

・シンボルをクリックで詳細情報を小窓でポップアップ
これができるようになりました。

・地図の切り替え
・中心点の十字の表示
こちらの方はまだです。

あにねこさんのコードを頂きました。
ありがとうございます。

タイトル文字が大きすぎで、色が付いています。
なぜでしょうか？

中心点は何とか表示しましたが、消えません。
http://www7b.biglobe.ne.jp/~daigosangakukai/test.htm

マーシーさん、こんばんは。

> タイトル文字が大きすぎで、色が付いています。
> なぜでしょうか？

ラベルの文字色とサイズは、KMLファイルの

<LabelStyle>
<color>ffff0000</color>
<scale>1.1</scale>
</LabelStyle>

の個所で指定されます。色の指定は16進数で、aabbggrr の順に指定します。
ここで、aa: 透明度、bb: 青、gg: 緑、rr: 赤 です。
参考： https://developers.google.com/kml/documentation/kmlreference?hl=ja#colorstyle

> 中心点は何とか表示しましたが、消えません。
> http://www7b.biglobe.ne.jp/~daigosangakukai/test.htm

document.getElementById('crs').onchange = function() {
ccross.setVisible(this.checked);
};

の個所を

document.getElementById('crs').onchange = function() {
document.getElementById('ccross').style.display = this.checked ? 'block' : 'none';
}

としてみて下さい。
参考： http://matsup.blogspot.jp/2014/09/openlayers-3-13kml.html

あにねこさん、こんにちは。

中心十字はONOFFできるようになりました。
ありがとうございます。

KMLファイルの<LabelStyle>の方は場所がわかりません。
KMLを発生させるもとを直すのですか？
それとも<Stayle></Stayle>のあとにつけるのですか？
よろしくお願いします。

マーシーさん、こんばんは。
shuchi_i.kml の中に

<LabelStyle>
<color>ffff0000</color>
<scale>1.1</scale>
</LabelStyle>

という個所がありますので、ここを修正します。
あるいは、gpx2jsgi の方を修正するのでしたら、
gpx2kml.xsl の中に、同様の個所があるので、
そこを修正して、KMLファイルを作り直してもOKです。

ありがとうございました。
エディタでファイルを開けばいいんですか？
わかりました。ありがとうございます。

また何かあったらよろしくお願いいたします。

あにねこさん、おはようございます。

ラベルの色とサイズのことでもう一度お願いします。
<color>ffffffff</color>
<scale>0.7</scale>
としたらあにねこさんと同じようなラベルになりました。
ラベル文字の太さは変更できるでしょうか？

<color>ff99ffff</color>黄色
<color>ffffff99</color>水色
<color>fafafafa</color>変化無し
なかなかうまくいきません。

マーシーさん、こんばんは。
<color>〜</color>はラベル文字の色の指定なので、
文字の大きさを変えたい場合は<scale>〜</scale>の方をいじることになります。
KMLファイルの中で指定できるのは、KMLの仕様上、この２つだけで、その他、
・フォントの種類
・フォントのサイズ（これに scale を掛けたものが実際の表示サイズになる）
・文字の縁取りの色や太さ
を変えようとすると、JavaScriptの方を変更する必要があります。
しかし、その場合、KMLファイルでの指定（アイコン画像など）をすべて無視すれば、
全部を一括しての指定（当然、アイコンは全部同じになる）はできるのですが、
ラベルだけを指定して変更することは（いろいろ調べていますが、今の所）できていません。
なお、デフォルトのフォントはOpenLayersのソース
https://github.com/openlayers/openlayers
を読むと bold 16px Helvetica となっております。

あにねこさんこんにちは。

わかりやすく説明して頂いてありがとうございました。
またよろしくお願いします。