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

あにねこさん、おはようございます。
tekutekuさんのスレに注目していたのですが、スレが伸びないので質問します。

アイコン画像の表示非表示の切り替えは次のような方法は可能でしょうか？

1)アイコンのみのKMLファイルを作る。example/routemap_icn.kml

2)地理院地図の基礎編でbasic.htlmの3にアイコンKMLファイルを加える。
var param = { div: 'map', lon: 138.995708, lat: 36.085089, zoom:15,url:'example/routemap_gpx.kml', url0 : 'example/routemap_icn.kml' };

3)basic/jsのmap.addLayer(kmlLayer);のあとにつぎを挿入する。
var icnLayer = new OpenLayers.Layer.Vector('アイコン情報', {
projection: proj_4326,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: param.url0,
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
});
map.addLayer(icnLayer);

4)kmlLayerのextractAttribute を true から　false に換える。

5)Base Layer
　◎標準地図
　○淡色地図
Overlayes
　□GPSデータ
　□アイコン情報

になる。

素人考えですがどうでしょうか？

応用編は難しくてよくわかりません。

<p>ポップアップ窓なし：<a href="gsimaps.html?lat=36.085089&lon=138.995708&zoom=15&url=example/routemap_xml.kml&url0=example/routemap_icn.kml">ルート地図</a></p>
<p>ポップアップ窓あり：<a href="gsimaps.html?lat=36.085089&lon=138.995708&zoom=15&url=example/routemap_xml.kml&url0=example/routemap_icn.kml" onclick="return routemap(this.href)">ルート地図</a></p>

URLを読み込むコードの意味を教えてください。
&url0=example/routemap_icn.kml　をつけない場合は、
param[s[0]] = decodeURIComponent(s[1]);
のあとに、たとえば
u = param[s[7]].split("xml");
url0 = u[0].concat("icn");
url0 = urlo.concat(u[1]);

なんてかんじですか？まだ勉強不足ですみません。

マーシーさん、こんばんは。
基礎編についてはおっしゃる通りで、アイコン画像のみのKMLファイルを作成し、
追加のレイヤーとして読み込み、addLayer すればOKです。

応用編については、gsimaps.html の後に続く引数を解析し、
そこから複数のKMLファイルのURLを切り出して、上記の処理を行う必要があります。
引数の引き渡し方をどうするかが、ちょっと難しいところです。

例えば、引数に &url0=example/routemap_icn.kml を追加すると、

var param = {};
var ma = location.search.substr(1).split('&');
for (var i = 0; i < ma.length; i++) {
var s = ma[i].split('=');
param[s[0]] = decodeURIComponent(s[1]);
}

を抜けた後では、param.url0 に example/routemap_icn.kml という値がセットされるので、
GPSデータを addLayer した直後に、

if (param.url0) {
// ここで、param.url0 を KMLレイヤーとして追懐
}

というようなコードを付け加えると（試してみたことはないですが）
レイヤーが増やせると思います。

で、ご質問は、
url=example/routemap_xml.kml
を指定したら、追加して example/routemap_icn.kml も読み込みたいという意味
と理解しました。そのためには JavaScript の文字列操作を利用して、

var url0 = param.url.replace('_xml','_icn');

とし、次に url0 をKMLレイヤーとして読み込めばよいと思います。

あにねこさん、おはようございます。
早速の返信ありがとうございます。
早速試してみようと思います。

実は、先日gsimaps.html を書き換えて実行してみようと思い、
メモ帳で読み込んで試したのですが改行せず見にくいので、
ワードパッドで読み込んだら日本語部分が文字化けしてしまいました。
元に戻すのに時間がかかってしまい、まだ実行していません。

ありがとうございました。

マーシーさん、こんにちは。
gsimaps.html の漢字コードは UTF-8、改行コードは LF となっています。
編集の際は、「サクラエディタ」というソフトが便利です。
フリーですし、様々な漢字コード、改行コードに対応しています。

あにねこさん、情報ありがとうございます。
「サクラエディタ」早速使ってみます。

ワープロソフトがあるのに、秀丸エディタのシェアウェアなどを購入する人がいるのは、こういうことに使うわけですか！

あにねこさん、おはようございます。
途中経過報告します。

まず、kmlLayerのextractAttribute を true から　false に換える方法はダメでした。q
トラックは淡いオレンジの細線になり、アイコンも同色の円になりました。

１）トラックのみとアイコンのみのKMLファイルを作ります。
　　　routemap_trk.kml　および　routemap_icn.kml　

２）<p>ポップアップ窓あり：<a href="gsimaps.html?lat=36.085089&lon=138.995708&zoom=15&url=routemap_trk.kml&url0=routemap_icn.kml" onclick="return routemap(this.href)">ルート地図</a></p>

３）KMLデータに routemap_trk.kml を代入し addLayer した直後に、

if (param.url0) { // ここで、param.url0 があれば KMLレイヤーとして追加する
var icnLayer = new OpenLayers.Layer.Vector('アイコン情報', {
projection: proj_4326,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: param.url0,
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
});
map.addLayer(icnLayer);
}

４)　Base Layer
　　　◎標準地図
　　　○淡色地図
　　 Overlayes
　　　□GPSデータ
　　　□アイコン情報
になりましたが、アイコンはポップアップしませんでした。

5) &url0routemap_icn.kml がなければ
　Base Layer
　　　◎標準地図
　　　○淡色地図
　　 Overlayes
　　　□GPSデータ
となります。

１）<p>ポップアップ窓あり：<a href="gsimaps.html?lat=36.085089&lon=138.995708&zoom=15&url=routemap_trk.kml" onclick="return routemap(this.href)">ルート地図</a></p>
もとのHTMLファイルを変更するのが多くて大変な場合、アイコンのみのKMLファイルを後から自動で追加する方がいい。

２）var url0 = param.url.replace('_trk','_icn');

var icnLayer = new OpenLayers.Layer.Vector('アイコン情報', {
projection: proj_4326,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: url0,
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
});
map.addLayer(icnLayer);
}
というように
url : parum.url0 　ではなくて　url : url0　とすればだいじょうぶでした。

でも、やはりアイコンはポップアップしません。

kmlLayer events.on({
featureselected: onFeatureSelect,
featureunselected: onFeatureUnselect
});
selectControl = new OpenLayers.Control.SelectFeature(kmlLayer);
map.addControl(selectControl);
selectControl.activate();

の kmlLayer　をicnLayer にすればいいのかな？

さくらエディタを使いました。
もう少し考えてみます。

//アイコンをクリックしたときの処置のコードを
//kmlLayer を　icnLayer　に替える

icnLayer events.on({
featureselected: onFeatureSelect,
featureunselected: onFeatureUnselect
});
selectControl = new OpenLayers.Control.SelectFeature(icnLayer);
map.addControl(selectControl);
selectControl.activate();

ポップアップするようになりました。

OpenLayerがバージョン３になってますけど，今使ってるのとどう違うのでしょうか？

マーシーさん、おはようございます。
上手くいったみたいですね。

OpenLayers 3 は、
・コードを全く新しく書き直した
・HTML5+CSS3に対応
・性能向上
・3次元表示（地球儀を回せる）
・ライブラリ名が OpenLayers → ol と短縮された
辺りが変わったようです。
時間があれば試してみたいところです。

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

おかげさまで、成功しました。お世話になりました。
これもTcl/Tk というスクリプト言語なのでしょうか？
大部意味がわかるようになってきました。

OpenLayers 3.0については
・HTML5+CSS3はまだ意味不明です。
・性能向上はいいですね。
・3次元表示（地球儀を回せる）はなんとなくわかります。
・ol は何度も眼にしましたが何のことかわかりませんでした。
　 OpenLayers のことだったんですね。

今度は、BaseLayer にGoogleMap　の地図と航空写真を追加したいと思います。
うまくいったら報告します。
ご指導よろしくお願いします。ありがとうございました。

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

> これもTcl/Tk というスクリプト言語なのでしょうか？

こっちは JavaScript です。

> 今度は、BaseLayer にGoogleMap　の地図と航空写真を追加したいと思います。

OpenLayers は Layers というくらいなので、
複数のレイヤーを取り扱うことが容易な点が
特徴のひとつになっています（なので、複数を表す s は重要）。
国土地理院も航空写真を公開しているのですが、
全国のカバーはまだでした（最近、チェックしていないので、してるかも）。

あにねこさん、おはようございます。
やはり、JAvaScriptでしたか。ありがとうございます。

国土地理院も航空写真は全国のカバーはまだしていなくて、撮影年度も古いのとバラバラで、新しいといっても2007年だったりします。

GoogleMap は投影法が違うと聞いてますので、Projection辺りが難しいかも？です。