スレッド:OpenLayers 3
OpenLayers 3 投稿者:あにねこ 投稿日:2015/12/01(Tue) 08:41:30 No.756
現在の地理院地図版ルート地図では、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 を押しながらマウスの左ボタンで地図を回転できる。地図右上の[↑]ボタンで北向きに復帰。

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

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

他にも幾つか問題点があり、これらがクリアできたら、公開する予定です。
Re: OpenLayers 3 投稿者:マーシー 投稿日:2015/12/02(Wed) 11:59:32 No.757
あにねこさん、おはようございます。

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

完成を楽しみにしています。
Re^2: OpenLayers 3 投稿者:あにねこ 投稿日:2015/12/29(Tue) 07:44:27 No.758
マーシーさん、おはようございます。

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

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

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

・地図の切り替え
これもやり方はわかって来たのですが、切り替えたい対象のGoogleの衛星画像
(全国をカバーしていて都合が良い)がGoogleのポリシーで衛星画像のみを
読み込んで利用することが禁止されているらしく、
OpenLayers 3 では用意されていません。実現は棚上げになりそうです。
Re: OpenLayers 3 投稿者:あにねこ 投稿日:2016/05/04(Wed) 19:12:11 No.795
Ver. 3.15.1 が出ていたので、試してみました。
テスト用URLは変更なしです。
http://anineco.org/routemap.html?lat=36.385140&lon=138.638144&zoom=13&url=151121/routemap.kml

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

・地図の切り替え
・中心点の十字の表示
こちらの方はまだです。
Re^2: OpenLayers 3 投稿者:マーシー 投稿日:2018/01/24(Wed) 16:54:52 home No.899
あにねこさんのコードを頂きました。
ありがとうございます。

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

中心点は何とか表示しましたが、消えません。
http://www7b.biglobe.ne.jp/~daigosangakukai/test.htm
Re^3: OpenLayers 3 投稿者:あにねこ 投稿日:2018/01/24(Wed) 21:20:15 No.901
マーシーさん、こんばんは。

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

ラベルの文字色とサイズは、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
Re^4: OpenLayers 3 投稿者:マーシー 投稿日:2018/01/25(Thu) 16:59:20 home No.904
あにねこさん、こんにちは。

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

KMLファイルの<LabelStyle>の方は場所がわかりません。
KMLを発生させるもとを直すのですか?
それとも<Stayle></Stayle>のあとにつけるのですか?
よろしくお願いします。
Re^5: OpenLayers 3 投稿者:あにねこ 投稿日:2018/01/25(Thu) 18:31:53 No.905
マーシーさん、こんばんは。
shuchi_i.kml の中に

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

という個所がありますので、ここを修正します。
あるいは、gpx2jsgi の方を修正するのでしたら、
gpx2kml.xsl の中に、同様の個所があるので、
そこを修正して、KMLファイルを作り直してもOKです。
Re^6: OpenLayers 3 投稿者:マーシー 投稿日:2018/01/26(Fri) 09:24:20 home No.906
ありがとうございました。
エディタでファイルを開けばいいんですか?
わかりました。ありがとうございます。

また何かあったらよろしくお願いいたします。
Re^6: OpenLayers 3 投稿者:マーシー 投稿日:2018/02/07(Wed) 11:14:49 home No.911
あにねこさん、おはようございます。

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

<color>ff99ffff</color>黄色
<color>ffffff99</color>水色
<color>fafafafa</color>変化無し
なかなかうまくいきません。
Re^7: OpenLayers 3 投稿者:あにねこ 投稿日:2018/02/07(Wed) 18:41:29 No.912
マーシーさん、こんばんは。
<color>〜</color>はラベル文字の色の指定なので、
文字の大きさを変えたい場合は<scale>〜</scale>の方をいじることになります。
KMLファイルの中で指定できるのは、KMLの仕様上、この2つだけで、その他、
・フォントの種類
・フォントのサイズ(これに scale を掛けたものが実際の表示サイズになる)
・文字の縁取りの色や太さ
を変えようとすると、JavaScriptの方を変更する必要があります。
しかし、その場合、KMLファイルでの指定(アイコン画像など)をすべて無視すれば、
全部を一括しての指定(当然、アイコンは全部同じになる)はできるのですが、
ラベルだけを指定して変更することは(いろいろ調べていますが、今の所)できていません。
なお、デフォルトのフォントはOpenLayersのソース
https://github.com/openlayers/openlayers
を読むと bold 16px Helvetica となっております。
Re^8: OpenLayers 3 投稿者:マーシー 投稿日:2018/02/08(Thu) 15:54:44 home No.913
あにねこさんこんにちは。

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

- WebForum -