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

はじめまして、あにねこさんの情報に基づいて、見よう見まねで私の所属する山の会のホームページに地図表示しています。
国土地理院の地図上にKMLで定義したプレースマークを表示させていますが、アイコンに付随してnameで定義した名称も一緒に表示したいのですが、サンプルのomapでは表示されません。
同じkmlデータを地理院地図に読み込ませると名称も表示されます。
ラベル名を表示するにはomap.jsに何か手を加える必要があるのでしょうか。また、このラベル名は一定のズームから表示するようにしたいと考えております。
本件についてご教授いただけますと助かります。

高橋さん、こんばんは。
「Web地図を利用したGPSログ表示」は更新が滞って、
情報が古くなっています。申し訳ありません。
omap では、OpenLayers の Ver.2 を使っていて、ラベルを表示する場合は
JavaScript のコードをかなり追加する必要があると思います。
なお、最新版の OpenLayers Ver.4 ではラベルの表示が比較的簡単にできます。
（あにねこ登山日誌のルート地図では Ver.4 を用いてラベル表示をしています。）
ただし、アイコンのカスタマイズと文字のサイズや色の指定に制約があります。
また、ズームによってラベルの表示を on/off することも、
JavaScript が書ければできると思いますが、ちょっと大変ですね。
なお、国土地理院の地理院地図では、leaflet を使っていて、
別の方法でラベルを表示しているようです。

あにねこ様、早速貴重なアドバイスありがとうございます。
私がやりたいことは、あにねこさんの「山名一覧on the Web地図」の地域限定版のようなものです。ソースを眺めますと、OpenLayers Ver.4を利用し、DBからplacemarkのKMLデータを生成して表示しているようですが、これを参考にすればなんとかなるように思いましたが、いかがでしょうか。ズームによるon/offはその先の目標とし、まずはラベル表示にチャレンジしようかと思います。
地理院地図上にデータ表示したものを共有化し、自サイトに掲載できるかと思いましたが、うまく行きませんでした。

高橋さん、こんばんは。
「山名一覧on the Web地図」は、検索機能などを追加して、
しかも動けばいいやという感じで書いていますので(^^;)、
ちょっと読みにくいかと思いますが、
ソースが読めるのでしたら参考にして頂けると思います。
利用、改造等、自由にして頂いて差し支えありません。
なお、KMLファイルはXHRHttpRequestを用いて取得しているので、
KMLファイルを置いたドメインと、表示するHTML+JavaScript のドメインは
一致している必要があるようです。
https://ja.wikipedia.org/wiki/XMLHttpRequest#クロスドメイン

あにねこ様、情報提供ありがとうございます。
山名一覧は難しいそうなので、あにねこ登山日誌のプログラムを参考にさせていただきました。
プログラミングの知識はありませんが、見よう見まねでなんとかラベル表示することができました。
ただし、まだ完全ではなく、KMLで定義するPlacemarkの数が多くなるとなぜか表示されない事象が発生しています。

ところで、あにねこ登山日誌ではラベルの表示色を白抜きとしていますが、国土地理院の地図上で見易いように黒色などに変更したいのですが、変更することは可能でしょうか。

高橋様、150pou.html を拝見しました。
この中で使われている js/tozan.js ですが、
これはアクセスカウンタの設置や Google Analytics のコードが入っていますので、

<script src="js/tozan.js"></script>

の箇所は、

<script>
function routemap(a) {
if (window.innerWidth < 650) {
window.open(a, "ROUTEMAP")
} else {
window.open(a, "ROUTEMAP", "width=800,height=600,resizable=yes")
}
return false
}
</script>

と変更するか、あるいは、ポップアップ窓を開かなくて良いならば、

onclick="return routemap(this.href)

を消去（その場合、上記の<script>〜</script>も不要）するよう、修正をお願いします。

文字色の変更についてですが、アイコンの種類が一つならば可能です。
(1) 150pou.kml の変更点
<Style id="なんとか">〜</Style> と <styleUrl>〜</styleUrl> などとなっている箇所を
全部削除。

(2) routemap.html の JavaScript の

var kml = new ol.layer.Vector({
source: new ol.source.Vector({
url: param.url,
format: new ol.format.KML()
})
});

の個所を次のように変更（画像ファイル、文字色などは適宜変更して下さい）。

var style = new ol.style.Style({
image: new ol.style.Icon({
size: [24, 24], // 用いる画像ファイルの画素数
src: 'symbols/Summit.png' // 用いる画像ファイルのURL
}),
text: new ol.style.Text({
font: 'bold 16px sans-serif', // ラベルのフォント、サイズを指定
fill: new ol.style.Fill({
color: 'blue' // ラベルの文字色を指定
}),
stroke: new ol.style.Stroke({
color: 'white', // ラベルの文字の縁取りの色を指定
width: 2 // ラベルの縁取りの太さを指定
})
})
});

var kml = new ol.layer.Vector({
source: new ol.source.Vector({
url: param.url,
format: new ol.format.KML({
defaultStyle: [style]
})
})
});

Placemarkの数は多くても大丈夫なはずですが、
もしかしたら <Style>、<styleUrl> の指定が関係していて、
削ったらうまくいくかも知れません。

あにねこ様、お世話になっております。
私のやりたいことを先取りしたアドバイスを本当にありがとうございます。labelstyleでラベルの表示色を変更できることは分かったのですが、さらに見易くするためフォントを変更できないかとなどと考えていたところでした。私にとってはかなり高度な内容ですが、いただいた情報を大いに参考とさせていただきます。
最近は目的を忘れ地図表示にはまり、寝不足の日々ですが、まだまだ続きそうなので、どうぞよろしくお願いします。

あにねこ様、お世話になっております。
いただいたアドバイスを参考として、やっと満足できる表示が実現できました。
アイコンの表示につきましては少々手こずり、結局はsize指定を削除し、scaleを追加して解決できました。
プレースマークの表示不良につきましては、緯度経度の誤った値が原因であることが判明し、データを正しく修正してすべて表示できるようになりました。
すべて、あにねこさんのおかげです、ありがとうございました。

満足できる表示が出来て良かったです。
お疲れ様でした。

ありがとうございます。
Firefoxでは問題なく表示されていたのですが、朝になって別ブラウザ（IEやChrome）で見たところ、アイコンが表示されていませんでした。がっかり。
アイコンで苦労したと書きましたが、24×24pxで自作した画像を指定したところ、その画道の左下隅の一部だけが表示され、ラベルの位置も随分と右上に離れていました。そこでsizeを48×48にしてみると巨大なアイコンが表示されましたので、sizeを外しscaleを指定したところ正常に表示できました。まさかブラウザで振る舞いが違うと思いもしませんでした。
あにねこさんのサイトで使用している画像（山のマーク）を使って試したところ正常に表示されました。
普通の画像編集ソフトで24×24のpngを作成したのですが、アイコン画像作成の注意点など教えいただければ助かります。

原理は理解できておりませんが、試行錯誤の結果、sizeとscaleの両方を指定すると、求める表示になりました。お騒がせしました。

解決されたようですが、画像を縮小して表示する際の縮小アルゴリズムが、ブラウザによって異なるのかも知れませんね。

あにねこ様からの情報提供のおかげで、イメージ通りのものが出来ました。いまのところ、いくつかのブラウザで確認しましたが、いずれも同様に表示していますので、ここで打ち止めにしようと思います。
ほんとうにありがとうございました。

ところで、「山名一覧 on the Web地図」を私が所属する会のホームページにリンクを貼ってもよいでしょうか。

リンク張って頂いても、もちろん差し支えありません。
宜しくお願い致します。